This is a migrated thread and some comments may be shown as answers.

StockChart Navigator - problem with displaying "area" navigator

8 Answers 56 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Alexandra
Top achievements
Rank 1
Alexandra asked on 09 Jun 2015, 12:48 PM

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

8 Answers, 1 is accepted

Sort by
0
EZ
Top achievements
Rank 2
answered on 09 Jun 2015, 02:05 PM

add

missingValues : "interpolate",

to both the navigator and the main chart

Updated DEMO 

 

0
Alexandra
Top achievements
Rank 1
answered on 09 Jun 2015, 03:00 PM
missingValues : "interpolate"

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

 Any other suggestions?

 

Thanks,

Alexandra

0
EZ
Top achievements
Rank 2
answered on 09 Jun 2015, 04:42 PM

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

0
Alexandra
Top achievements
Rank 1
answered on 09 Jun 2015, 09:58 PM

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)

 

0
EZ
Top achievements
Rank 2
answered on 09 Jun 2015, 11:00 PM

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.

0
Alexandra
Top achievements
Rank 1
answered on 10 Jun 2015, 08:33 PM

Thank you.

 I will wait help from Telerik team.

0
Accepted
T. Tsonev
Telerik team
answered on 11 Jun 2015, 08:18 AM
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!
 
0
Alexandra
Top achievements
Rank 1
answered on 11 Jun 2015, 11:11 AM

It works perfect!

Thank you for your help.

 

Best regards,
Alexandra

Tags
Charts
Asked by
Alexandra
Top achievements
Rank 1
Answers by
EZ
Top achievements
Rank 2
Alexandra
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or