jQuery chart.refresh() clears data in series - complex objects

[J]

Hi,

I met quite strange behaviour. I have my kendo chart defined with complex (= not just array of numbers) object in serie.data. It's defined like this:

$("#chart2").kendoChart({
        seriesDefaults: {
            categoryField: "endTimestamp",
            field: "value",
            type: "line"
        },
        categoryAxis: {
            type: "date",
            baseUnit: "minutes",
            baseUnitStep: 15,
        },
        series: [{
            name: "First serie",
            data: [
                {
                    value: 150,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                },
                {
                    value: 162,
                    startTimestamp: new Date(2021, 8, 1, 0, 15, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 30, 0)
                }
            ]
        }],
    });

Now, when I try to add some data into the serie and refresh it by

var chart = $("#chart").data("kendoChart");
chart.options.series[0].data.push({
                    value: 110,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                });
chart.refresh();

or when I try to add new serie and refresh it

        var chart = $("#chart").data("kendoChart");
        chart.options.series.push({
            name: "1-1:1.9.0",
            data: [
            {
                value: 110,
                startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
            }]
        });

all data in series are empty and thus no data is shown in the chart.

I tried also to call chart.redraw(), but this is useless for me as I need to add values into serie and redraw does not cause the chart to wide to next values, but refresh does.

Interesting thing is that when I try the same on serie with simple number array (and thus no 'field' in 'seriesDefaults'), everything works fine:

    $("#chart").kendoChart({
        seriesDefaults: {
            type: "line"
        },
        series: [{
                data: [1, 2, 3]
            }],
    });

        var chart = $("#chart").data("kendoChart");
        chart.options.series.push(
            {
                data: [7, 8, 9, 10]
            }
        );
        chart.refresh();

        var chart = $("#chart").data("kendoChart");
        chart.options.series[0].push(5);
        chart.refresh();

Any help would be appreciated.

J

[Georgi Denchev]

Hi, J,

Thank you for the provided code snippets!

Since you're modifying the options of the widget, I would recommend you update them through the setOptions method instead of calling redraw or refresh.

This way you can ensure that the new data and series are properly rendered.

      var chart = $("#chart").data("kendoChart");
      
      chart.options.series[0].data.push({
	value: 110,
	startTimestamp: new Date(2021, 8, 1, 0, 30, 0),
	endTimestamp: new Date(2021, 8, 1, 0, 45, 0)
      });
      
      let options = chart.options;
      chart.setOptions(options);

Dojo sample:

https://dojo.telerik.com/@gdenchev/aqAPACIs 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[J]

Thank you very much, works like a charm. And more - I've found out that if I change any property of the 'options' after this assignment, it shows in the chart as well.