CODEWITHSUNDEEP
javascripthighcharts
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

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();
});

Upvotes: 0

Views: 157

Answers (1)

Vladimir M
Vladimir M

Reputation: 4489

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);
         }
      }


  });

Upvotes: 2

Related Questions