Plot dynamically added array elements using Highcharts.js

Question

Here is my fiddle : DEMO

The fiddle is a mimic of a real case scenario wherein I get the data from sensors (MQTT)

dataArray[] is populated every 1 second. To show the same I have a button which on click adds an array element to dataArray.

The plotting of graph starts after timeout of 5 seconds. If the button was clicked for 'x' times within 5 seconds of DOM ready, 'x' points will be plotted.

$("#addToArray").click(function() {
  dataArray.push((payload));
  console.log(dataArray);
})

var payload = {
  "temperature": 2,
  "humidity": 80
};

function startGraph() {
   //Graph code
}

If button is pressed after 5 seconds, array element will still be added but not plotted (i.e, any sensor data coming in after 5 seconds will not be plotted)

Is there a way to read the newly added array elements and continue plotting the graph?

Could you please elaborate a bit on what you mean by "read newly added array elements and continue plotting"? Read them to where, do what with them? — ewolden
– ewolden, Commented Jan 29, 2018 at 11:44
check this if it is useful jsfiddle.net/3x3fwszo calling startGraph() on click function — Deep 3015
– Deep 3015, Commented Jan 29, 2018 at 11:47
@ewolden: To also plot all of those values that were added to the dataArray after the timeout of 5 seconds i.e, after the chart was initialised — Inchara Raveendra
– Inchara Raveendra, Commented Jan 29, 2018 at 11:47
@Deep3015: This makes the graph to restart every time a new element is added which should not be the case while displaying streaming temperature data. Is there any other way? — Inchara Raveendra
– Inchara Raveendra, Commented Jan 29, 2018 at 11:50

Dmitry · Accepted Answer · 2018-01-29 11:45:49Z

3

You can use addPoint method of the series to add points dynamically.

$("#addToArray").click(function() {
  //myChartTemperature and myChartHumidity are created  globally in your code
  //so I check if they exist here
  if(myChartTemperature) {
    myChartTemperature.series[0].addPoint(payload.temperature);
  }
  if(myChartHumidity){
    myChartHumidity.series[0].addPoint(payload.humidity);
  }
})

JSFiddle

answered Jan 29, 2018 at 11:45

Dmitry

7,29614 gold badges42 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Inchara Raveendra Over a year ago

Could you please recheck? I see no graph. It says myChartTemperature is undefined in the console.

Dmitry Over a year ago

It works fine when I press after the graph is loaded. I'll check why it does not work before the graph is loaded.

Deep 3015 Over a year ago

give more time to add point after forming chart check this jsfiddle.net/ms91r4pr/3

ewolden Over a year ago

Also, since the original fiddle has a slice of 8, I assume that is the desired behaviour. So a removePoint if there are more than 8 points is probably a good idea.

Paweł Fus Over a year ago

I would simply define missing variables. Defining global variables without var is not the best idea. Working demo: jsfiddle.net/BlackLabel/ms91r4pr/4

|

Collectives™ on Stack Overflow

Plot dynamically added array elements using Highcharts.js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related