StockChart Navigator - problem with displaying "area" navigator

9 posts, 1 answers
  1. Alexandra
    Alexandra  avatar
    5 posts
    Member since:
    Apr 2013

    Posted 09 Jun 2015 Link to this post

    I have trouble with displaying navigator with type "area".

    Here is an example of what I have right now:

    Code: http://dojo.telerik.com/iPuRi/3

    As you can see both graphs have "area" type. The problem is that navigator graph looks like a "jagged bumps". 

    What can I do to make it the same as the main graph (more smooth)?


    Thank you,
    Alex

  2. EZ
    EZ avatar
    65 posts
    Member since:
    May 2015

    Posted 09 Jun 2015 in reply to Alexandra Link to this post

    add

    missingValues : "interpolate",

    to both the navigator and the main chart

    Updated DEMO 

     

  3. Alexandra
    Alexandra  avatar
    5 posts
    Member since:
    Apr 2013

    Posted 09 Jun 2015 in reply to EZ Link to this post

    missingValues : "interpolate"

    But graph is incorrect with this parameter.. it displays not accurate data (see attachment).

     Any other suggestions?

     

    Thanks,

    Alexandra

  4. EZ
    EZ avatar
    65 posts
    Member since:
    May 2015

    Posted 09 Jun 2015 in reply to Alexandra Link to this post

    Did you add it to both the navigator and the main chart? For me the updated dojo demo looks correct.

     

    $("#stock-chart").kendoStockChart({
        dataSource: data,
        transitions: false,
        title: {
            text: "Test Area Chart",
            color: "#565656"
        },
        series: [{
          type: "area",
          field: "Count",
          categoryField: "Date",
          missingValues : "interpolate",
          tooltip: {
            template: "#= kendo.toString(category, 'MM/dd/yyyy') #: #= value # items"
          }
        }],
        navigator: {
            series: [{
                type: "area",
                field: "Count",
                categoryField: "Date",
                missingValues : "interpolate"                    
            }],
            categoryAxis: {
                baseUnit: "days",
                labels: {
                        visible: true,
                    font: "10px sans-serif"
                }
            }
        },
        chartArea: {
            width: 600,
            height: 250
        },
        categoryAxis: {
            majorGridLines: {
                visible: true,
                color: "#eeeeee",
                step: 1
            },
            labels: {
                visible: false
            },
            line: {
                color: "#eeeeee"
            },
            baseUnit: "days"
        },
        valueAxis: {
            majorGridLines: {
                visible: false
            },
            labels: {
                font: "11px sans-serif",
                template: "#= value #",
                step: 2
            },
            line: {
                color: "#eeeeee"
            }
        }
    });

  5. Alexandra
    Alexandra  avatar
    5 posts
    Member since:
    Apr 2013

    Posted 09 Jun 2015 in reply to EZ Link to this post

    I created new DEMO that has 2 StockCharts: first one with { missingValues: "zero" }, the second one with { missingValues: "interpolate" }

    The first chart displays data properly (there is no sales for 2015/02/21-2015/02/24 period).
    The second chart fill the same period using interpolated values, and it can confuse users as they will think that there were some sales on 2015/02/21-2015/02/24.

    Just to be clear... my goal is get StockChart almost the same as first one, but navigator should look as reduced copy of the top part (see attachment)

     

  6. EZ
    EZ avatar
    65 posts
    Member since:
    May 2015

    Posted 09 Jun 2015 in reply to Alexandra Link to this post

    I see your problem.  We'll see if a Telerik employee has a better answer for you...

    If not and you are really representing discrete data points, perhaps you should change the chart type to "column". If not on the main chart, then at least on the navigator pane.

  7. Alexandra
    Alexandra  avatar
    5 posts
    Member since:
    Apr 2013

    Posted 10 Jun 2015 in reply to EZ Link to this post

    Thank you.

     I will wait help from Telerik team.

  8. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 11 Jun 2015 Link to this post

    Hi,

    The problem here is that you only have data for some of the dates. The "interpolate" option will link them together regardless if they're one day or five days apart.

    The solution is to provide actual zero values for the days that should show zero. See the updated snippet.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Alexandra
    Alexandra  avatar
    5 posts
    Member since:
    Apr 2013

    Posted 11 Jun 2015 in reply to T. Tsonev Link to this post

    It works perfect!

    Thank you for your help.

     

    Best regards,
    Alexandra

Back to Top