We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart update problem

Thread ID:

Created:

Updated:

Platform:

Replies:

123184 Feb 24,2016 02:37 PM UTC Mar 1,2016 04:13 AM UTC JavaScript 3
loading
Tags: ejChart
Andrea Perazzolo
Asked On February 24, 2016 02:37 PM UTC

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 [Syncfusion]
Replied On February 25, 2016 11:51 AM UTC

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(31st) 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
Replied On February 29, 2016 08:01 AM UTC

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

Thanks.

Saranya CJ [Syncfusion]
Replied On March 1, 2016 04:13 AM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;