Use add Series function to add series to chart - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Use add Series function to add series to chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/boost.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 600px; max-width: 800px; margin: 0 auto"></div> 
      <script type="text/javascript">
function getData(n) {//from  w  w w .j av  a  2  s .  c om
  var arr = [],
    i,
    a,
    b,
    c,
    spike;
  for (i = 0; i < n; i = i + 1) {
    if (i % 100 === 0) {
      a = 2 * Math.random();
    }
    if (i % 1000 === 0) {
      b = 2 * Math.random();
    }
    if (i % 10000 === 0) {
      c = 2 * Math.random();
    }
    if (i % 50000 === 0) {
      spike = 10;
    } else {
      spike = 0;
    }
    arr.push([
      i,
      2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
    ]);
  }
  return arr;
}
var data = getData(500000);
Highcharts.chart('container', {
  chart: {
    type: 'area',
    zoomType: 'xy',
  },
  title: {
    text: 'Highcharts drawing ' + data.length + ' points'
  },
  subtitle: {
    text: 'Using the Boost module'
  },
  boost: {
    useGPUTranslations: true
  },
  yAxis: {
    min: 0,
    max: 10
  },
  series: [{
    data: data
  }]
});

      </script>  
   </body>
</html>

Related Tutorials