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
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
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.
Comments 13
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
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.
The chart should show exactly those c that have produced c*5.
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.
Ajith,
Can you please create a jsfiddle with your code and post it in our forum so that we can have a look?
Hi is it possible to add new different chart to same chart using dynamically condition or on any button click.
himanshu,
Please refer this example.
thanks it solved my purpose.
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”?
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.
Hola como podria obtener los datos de temperatura de mi base de datos ?
puedo actualizar con valores desde una base de datos mysql ?
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
seelams,
Please refer to this thread.