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

Line chart incorrect render for non-uniform data

6 Answers 213 Views

Charts

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

Sunil asked on 13 Feb 2017, 03:03 AM

I am trying to draw line (step) on date axis with small spikes of data but seems like it auto compress.

Code

<body>

<div id="example">

<div class="demo-section k-content wide">

<div id="chart"></div>

</div>

<script>

var stats = [{ value: 0, date: new Date("2012/01/04") },

{ value: 30, date: new Date("2012/01/05 11:22AM") },

{ value: 0, date: new Date("2012/01/05 11:22:30AM") },

{ value: 0, date: new Date("2012/01/10") }];

function createChart() {<br> $("#chart").kendoChart({<br> title: {<br> text: "Units sold"

<br>                        },<br>                        dataSource: {<br>                            data: stats<br>                        },<br>                        series: [{<br>                            type:

"line",<br> style: "step",<br> field: "value",<br> categoryField: "date"

<br>                        }],<br>                        categoryAxis: {<br>                            baseUnit:

"weeks"

<br>                        }<br>                    });<br>                }<br>                $(document).ready(createChart);<br>                $(

"#example").bind("kendo:skinChange", createChart);<br> </script><br> </div><br></body>

6 Answers, 1 is accepted

answered on 14 Feb 2017, 01:41 PM

Hello,

I am not sure if I understand correctly the issue but the format used for the dates in the data will not be parsed by most browsers due to missing space between the time and the day period. This will result in invalid date and the corresponding values will be skipped. Does changing the format as in this example resolve the issue? If not then could you clarify what you mean by "compress data" and what is the expected result with the provided data?

Regards,
Daniel
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 14 Feb 2017, 10:09 PM

kendobug_2.png

Hi Daniel,

your example giving same result. I even tried date format by "new Date(2015, 01, 05, 11, 22, 30, 0)" but that also don't work.

Data are over span of 10 days and in which for couple of minutes data has spike then normal range but graph still shows something completely different. Is it bug?

answered on 16 Feb 2017, 04:12 PM

Hello again,

The category axis values are aggregated for the category period meaning that the point value will depend on the series.aggregate(max by default) for all points in the category(week in this case). Thus the value of the point will be the maximum value of all values in the week.
I am still not sure if I understand what is the expected result but if you wish to show a separate point for each date then you could set the type to "category". The other option is to change the baseUnit to seconds example.

Regards,
Daniel
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.