Edgar Navasardyan Edgar Navasardyan - 1 month ago 12
Javascript Question

HighChart - accessing series data by category name

The question is simple. How do I programmatically edit data series which corresponds to

desired_category_name
in this Fiddle ?

$(function() {

var chart, x,
btnRemove = $('#remove'),
btnAdd = $('#add'),
btnEdit = $('#edit');
x = 10;
btnAdd.click(function() {
chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10.
});

btnEdit.click(function() {

desired_category_name = 'USA'
// Do something like chart.series[0].data[i].update(x += 10);

});

btnRemove.click(function() {
if (chart.series[0].points[0]) {
chart.series[0].points[0].remove();
}
});

$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'No data in pie chart'
},
series: [{
type: 'pie',
name: 'Random data',
data: [
['USA', 1],
['Europe', 2]
]
}]
});

chart = $('#container').highcharts();
});

Answer

You can access series data with this - it has an array of points:

  chart.series[0]

You can modify point with this:

  chart.series[0].data[0].update( _new_value_ )

Each point has an attribute "name" that corresponds to category.

  chart.series[0].data[0].name // USA 

http://jsfiddle.net/3nhm9cjc/

 $('#edit').click(function() {

    desired_category_name = 'USA';
      // Do something like   chart.series[0].data[i].update(x += 10);
      console.log(chart.series[0].data.length)
      for(var i = 0; i< chart.series[0].data.length; i++){

         if(chart.series[0].data[i].name===desired_category_name){
            chart.series[0].data[i].update(10);
         }
      }


  });
Comments