Overview – Updating chart options

In getting started section we explained the basics of creating a chart and customizing the same. We also had a small section on updating the chart. In this section we’ll be explaining more on how you can update a chart and some of the best practices to be followed in order to improve performance and avoid any memory leaks.

In order to update a chart, you need to first change the options object and then call chart.render().

You can access the options object via chart.options as shown below.

chart.options.title.text = "Updated Chart Title";

chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array

chart.options.data[0].dataPoints[3].y = 27;  // Update an existing dataPoint

Example on adding and updating a dataPoint with a button

Try Editing The Code
Note
  • You should remember to call chart.render() after setting/updating the options – try to batch all updates before calling chart.render().
  • We’ve got the performance part covered! So you can even update the chart every 100 milliseconds (or less if you wish!!) – though such an update rate will not be required in most cases.

Below are few more examples

chart.options.title.text = "Updates Chart Title";

chart.options.data = [array]; // Set Array of dataSeries

chart.options.data[0] = {object}; // Set/Replace dataSeries

chart.options.data.push({object}); // Add a new dataSeries

chart.options.data[0].dataPoints = [array]; // Set/Replace dataPoints (array) of dataSeries

chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array

chart.options.data[0].dataPoints[3] = {y: 23};  // Add/Replace a dataPoint

chart.options.data[0].dataPoints[3].y = 27;  // Update an existing dataPoint

chart.options.axisY.maximum = 60; // Set maximum of axisY
Tip
  • Instead of accessing options via chart object each time, you can keep a reference to options that are required later on and change their values directly when required. For example you create reference for dataPoints array once and later add new dataPoints to it by doing dataPoint.push({y:28}) instead of chart.options.data[0].dataPoints.push({y:28}).

Creating dynamic charts

Most important thing to remember while creating a dynamic chart is to create chart only once and later on update its options only – like adding new dataPoint, dataSeries, etc.

For example if you are getting new dataPoints every second by making AJAX calls, you should create chart outside the AJAX call and update only the dataSeries/dataPoints after getting the response. We strongly suggest not to create a new chart every time you want to update it with a new dataPoint, etc.

Below is an example which shows how to update chart every second.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

13 Comments

  1. saman says:

    suppose I have a function that generates random numbers and works on those numbers.
    I need to have exactly those generated numbers to be shown in my chart.
    is it possible ? can you please guide me?

    for example :
    var c;
    function help(){
    c=Math.random();
    document.getElementById(“id”).innerHTML = c*5;
    }
    The chart should show exactly those c that have produced t.

  3. Ajith says:

    can we add any for loops or any conditions in the above example. I have tried it but it was not working if I am using any for loop or any conditions.

  5. opendatafit says:

    Hi there – great program and beautiful charts. I am struggling though with two issues (see test site http://www.opendatafit.org/javatest/twoupdates.html – view source for code):

    1. is there a “clear graph()” type function? You may notice that my starting x-axis (time) value is 250. If I recalculate with a value less than that, say 100, the previous data at t > 100 still shows.

    2. I have two series as you can see. But when adjust any of the values, only one of graphs updates (even if I change both 1 and 2 order constant before hitting recalculate). Also, the legend text / colours don’t appear to update.

    Is there a way to completely clear the old graphs and replot a new graph (with smaller or bigger x-axis) when executing the change on “click”?

    • opendatafit says:

      OK – I worked out the second problem! Silly me – turned out I forgot to use chart.options.data[1] for the second data set! But the first problem is still there. Try for instance to change the initial concentration (A) to 100 and max time (t) to 150 and see what happens.

  8. seelams says:

    Hi ,

    As mentioned above examples, chart.options.data = [array]; // Set Array of dataSeries, i am trying to assign array of series to line chart, but chart not getting plotted. As we are not aware of series it is dynamic and completly depends on data. So we cannot hard code in chart data : [ { // series1 }, {// series2 }.. etc ]

    1. Calling funtion to get data

    $.getJSON(“/Home/GetPidData/”, { year: year, catID: catid, subCatID: subcategoryid }, function (data1) {}

    2. GetPidData is action method in Mvc 4 and it looks like this

    public ContentResult GetPidData(string year, string categoryId, string subCatergoryId)
    {
    return Content(JsonConvert.SerializeObject(dataSeries), “application/json”, Encoding.UTF8);
    }

    3. I am forming the complete Series in action method

    4 when i assign the data1 (which is a Json Object) .

    5. I tried looping through data1 after deserializing and creating a array

    var jsonData = eval(data1);

    var seriesData = [];
    for (var i = 0; i < jsonData.length; i++) {
    seriesData[0] = jsonData[i];
    }
    but no luck, can you please help me out

If you have any questions, please feel free to ask in our forums. Ask Question