Adding data to a highchart chart using an array with IDs

Question

I want to add a series to a highchart scatterplot where I am naming each point in the series. I create a chart in the following way:

var chart; // globally available

makeCharts = function(){

      chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container1',
            type: 'scatter'
         },        
         series: [{
            name: 'a',
                data: [{                    
                    'id': 'point1',
                    'x': 1,
                    'y': 2
                }, {
                    'id': 'point2',
                    'x': 2,
                    'y': 5
                }]
            }]

      });
}

I would like to be able to update the points on the chart using something like:

chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])

but this is not correct. Is it possible to update a chart using this approach where each point has an ID?

EDIT:

Just to clarify, I would like to be able to pass the arrays directly, rather than adding the data point by point using addPoint(). I could loop through an array and use addPoint() doing something like this:

id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];

for (i=0; i<x.length; i++)
  {
  chart.series[0].addPoint({
    x:  x[[i],
    y:  y[i],
    id: id[i]
});

  }

However, this is very slow. It's much quicker to add data using the following approach:

chart.series[0].setData([[1,0],[2,1],[3,2]]);

I have found that I can add data like this:

 chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

but then the only way that I can access the id when the point is selected, is through this.point.config[2]. With the following approach I am unable to use chart.get('pointID') to identify a point as I did not set the ID. I want to be able to identify the point using just the ID.

please update on the status of the problem, if any of the solutions helped mark accordingly, if there was something kindly consider leaving a comment at the least. — Jugal Thakkar
– Jugal Thakkar, Commented Oct 10, 2012 at 18:58

Jugal Thakkar · Accepted Answer · 2012-10-07 19:04:54Z

Well broadly speaking there are two ways in which you can modify the chart data dynamically

Series.setData() Use this approach when you want to completely replace the existing data with some new data
Series.addPoint() Use this approach when you want to add a subset of the points dynamically. This method is not just for adding one point at a time, if you read the documentation carefully again you will find that this method takes a boolean redraw argument, and the argument detail is as following

redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more than one point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly called after the adding of points is finished.

In your case, since you want to add a few points dynamically, but retaining the existing points, you should go with approach 2. But you need to use it inside a loop, with the redraw being set to false (hence solving the problem of being slow) and then after the loop, call the redraw method explicitly

Code

var id = ['point3', 'point4', 'point5'],
    y = [0, 1, 2],
    x = [1, 2, 3];

for (var i = 0; i < x.length; i++) {
    chart.series[0].addPoint({
        x: x[i],
        y: y[i],
        id: id[i]
    },false);
}
chart.redraw();

Adding multiple points dynamically | Highcharts and Highstock @ jsFiddle

Igor Shastin · Accepted Answer · 2012-10-05 07:03:30Z

1

Try using series.addPoint.

chart.series[0].addPoint({
    x:  0,
    y:  0,
    id: 'anything'
});

But if you need to set data for series, use

chart.series[0].setData([{
    x:  0,
    y:  0,
    id: 'anything'
},{
    x:  2,
    y:  2,
    id: 'another'
}]);

answered Oct 5, 2012 at 7:03

Igor Shastin

2,8982 gold badges27 silver badges38 bronze badges

3 Comments

djq Over a year ago

Thanks for the suggestion. I would like to be able to add an array in. I suppose I could use a loop with addpoint() to cycle through an array which would also work.

Igor Shastin Over a year ago

@celenius Can I take a look on the array which you want to add in?

djq Over a year ago

I included it in my question above: x=[1,2,3]; y=[0,1,2];id=['point3', 'point4', 'point5'];

Igor Shastin · Accepted Answer · 2012-10-07 17:49:08Z

1

As soon as you can pass your data like this:

chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

(as you stated in question), I can suggest you to use a little hack.

We'll need to add another statement to method applyOptions of Highcharts.Point prototype.

if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];

Here you can see it in action.

answered Oct 7, 2012 at 17:49

Igor Shastin

2,8982 gold badges27 silver badges38 bronze badges

Collectives™ on Stack Overflow

Adding data to a highchart chart using an array with IDs

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related