Chart update problem

[Andrea Perazzolo]

Hi, I have the following problem: I'm changing the series of a single JS Chart via JS using the following method:

$("#myChart").ejChart("option", { series: updatedSeries, primaryXAxis: { range: { "min": data.min, "max": data.max, "interval": 3 } } });

There are always 4 series, containing the data of a single month.

By doing this, sometimes the chart screw something, and the behaviour is repeatable.

I'll explain the exact problem with the screenshot attached:
- I show the chart for October, and it's okay ("chart_oct.png")
- Next, I change the month and show the chart for September, and it's okay ("chart_sep_from_oct.png")
- Next, I change the month and show the chart fo August, and it's okay ("chart_aug.png")
- Finally, I change back to September (same data as before), and the chart is screwd up. ("chart_semp_from_aug.png")

As I said, the behaviour is repeatable, meaning every time i go from October to September the chart is ok, every time i go from August to September it screws up.
This happens also for other months, but not for all months, and I havent't found the correlation.

From the behaviour, I suppose this is somewhat related to some "permanence" of the data of the previous displayed chart.
There is any fix for this, or I am somewhat using the wrong way to re-set the series of the chart?

Thanks.

Attachment: chartScreens_1dcec1b6.zip

[Anandaraj T]

Hi Andrea,

Thanks for using Syncfusion products.

We have analyzed your code snippet and the screenshot and we suggest you to remove the point collection before updating the series.

In your code snippet, option method was used to update the chart. The option method of chart extends the existing object with new values. For example, if we use option method to update a point in series, it will only update the specified point so other points and options like series type, marker, tooltip, etc will not be modified.

Since August and October months have 31 days and September has 30 days, only first 30 points in series will be updated and the last(31^st) point will not be removed when changing data from October to September or August to September. To avoid this we need to remove the unnecessary point in series collection before updating.

Please refer the following code snippet to achieve this

[JS]

    //Create an instance of chart

    var chartObj = $("#container").ejChart("instance");

             

    for (var i = 0; i < chartObj.model.series.length; i++)

        //Empty the point collection in each series before updating

        chartObj.model.series[i].points = [];

             

    //Update the chart with new points
    $("#container").ejChart("option", {series: updatedSeries});

We have prepared a simple sample for your requirement and it can be downloaded from the following link
Dynamic update

We can also update the chart using redraw method. The following KB article provides more information about redraw method
https://www.syncfusion.com/kb/3275/how-to-use-the-redraw-method-of-chart

Note: Option method is a shorthand to update multiple options in Chart without instance. In redraw method, we should create an instance and update the options individually.

Please let us know if you have any concern.

Regards,
Anandaraj

[Andrea Perazzolo]

Hi,

the removal of the points through the "for" solved the problem.

Thanks.

[Saranya CJ]

Hi Andrea,
Thank you for your update.
Please let us know if you require any other assistance.
Regards,
Saranya