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

1 Answer 23 Views
Charts
J
Top achievements
Rank 1
J asked on 24 Aug 2021, 03:34 PM

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

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 27 Aug 2021, 09:38 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

J
Top achievements
Rank 1
commented on 06 Sep 2021, 06:32 AM

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.
Tags
Charts
Asked by
J
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or