StockChart Navigator - problem with displaying "area" navigator

[Alexandra]

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

[EZ]

add

missingValues : "interpolate",

to both the navigator and the main chart

Updated DEMO 

 

[Alexandra]

missingValues : "interpolate"

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

 Any other suggestions?

 

Thanks,

Alexandra

[EZ]

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"
        }
    }
});

[Alexandra]

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)

 

[EZ]

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.

[Alexandra]

Thank you.

 I will wait help from Telerik team.

[T. Tsonev]

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

 

 

[Alexandra]

It works perfect!

Thank you for your help.

 

Best regards,
Alexandra