chart series update in javascript - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

chart series update in javascript

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <style id="compiled-css" type="text/css">

#container {// w w  w .  j a  v  a2 s  . c o m
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(function(){
var MyChartComponent = {
  initHighcharts: function() {
    this.chart = new Highcharts.Chart({
      lang: {
        noData: 'test test'
      },
      chart: {
        type: 'column',
        renderTo: 'container'
      },
      title: {
        text: 'My chart'
      },
      xAxis: {
        categories: ['Audrey', 'Bob', 'Cindy', 'Dan', 'Eric']
      },
      yAxis: {
        min: 0,
        title: {
          text: "Number of fruits"
        },
        stackLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },
      legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
              textShadow: '0 0 3px black'
            }
          }
        }
      },
      series: []
    });
    this.chart.showLoading();
  },
  setDataFromApi: function() {
    this.dataFromApi = [{
      name: 'Oranges',
      data: [5, 3, 4, 7, 2]
    }, {
      name: 'Apples',
      data: [2, 2, 3, 2, 1]
    }]
  },
  updateChart: function() {
    this.dataFromApi.forEach(function(serie) {
      this.chart.addSeries(serie, false);
    }.bind(this));
    this.chart.redraw();
    this.chart.hideLoading();
  },
};
MyChartComponent.initHighcharts();
setTimeout(function() {
  MyChartComponent.setDataFromApi();
  MyChartComponent.updateChart();
}, 2000);
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials