accessing series data by category name - Javascript highcharts

Javascript examples for highcharts:Chart Series

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Series

Description

accessing series data by category name

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {/*from w  w w .  j a  v  a 2  s .co  m*/
  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.
  });
  $('#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);
         }
      }
  });
  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();
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <button id="add">Add data</button> 
      <button id="remove">Remove data</button> 
      <button id="edit">Edit data</button>  
   </body>
</html>

Related Tutorials