Chart not showing data points which are actually set in the datasource

[Paolo]

Hello.

We own a license for an older version of Kendo UI for jQuery, and we are now testing the latest release (demo version) to decide if we should upgrade.

We have a chart showing the datapoints from a datasource, where category is a date (rounded to minute) and value is a number. Series is set to show a gap if data point is missing.

The attached picture shows the chart on the left, and the content of the datasource._view array as logged in the browser's JavaScript console. As you can see after datapoint at 15.57 there's a big gap, even if the datapoints actually exist in the datasource.

The chart is updated by creating a new datasource when new data is available every 5 minutes.

What could be the reason if such behavior? Are we doing something wrong? Maybe we should reset the chart in some way before passing the updated datasource?

Thank you.

[Paolo]

I just noticed that some datapoint, scattered here and there, are also plotted on the chart, but still interleaved by gaps (see attached picture). 

[Paolo]

We tried destroying and recreating the chart before setting the new datasource, but the behavior doesn't change: some datapoints are not plotted, even if they exist in the datasource.

But... if we reload the page entirely, then all datapoints are plotted, until next update.

[Paolo]

As a workaround, this was fixed by passing an empty datasource to the chart and redrawing it right before passing the actual updated datasource (and redraw again).

[Nikolay]

Hi Paolo,

It sounds like you're encountering a common issue with dynamically updating charts in Kendo UI for jQuery. Here are a few potential reasons and solutions for the behavior you're seeing:

 - When updating the chart with new data, ensure that the DataSource is properly refreshed. You can try calling dataSource.read() and dataSource.refresh() methods to ensure the DataSource is updated correctly.

 - Instead of destroying and recreating the chart, you might try using the refresh() method on the chart itself after updating the DataSource. This can help in re-rendering the chart with the new data.

 - If your series is set to show gaps for missing data points, ensure that the data points are correctly formatted and that there are no issues with the data itself. Sometimes, gaps can appear if the data points are not in the expected format or if there are discrepancies in the data.

 - Your workaround of passing an empty DataSource before the actual updated DataSource is a valid approach. This forces the chart to redraw completely and can help in resolving issues with missing data points.

Best Practices: For dynamically changing data, binding the chart to a DataSource and ensuring that the DataSource is properly managed and refreshed can help in maintaining the integrity of the chart.

function updateChart(newData) {
    var chart = $("#chart").data("kendoChart");
    var dataSource = new kendo.data.DataSource({
        data: newData
    });

    dataSource.read();
    chart.setDataSource(dataSource);
    chart.refresh();
}

Regards,
Nikolay
Progress Telerik