split the array of objects based on the array inside an object to create column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

split the array of objects based on the array inside an object to create column 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="http://cdn.jsdelivr.net/lodash/2.1.0/lodash.compat.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <button id="next"> next </button> 
      <p id="d"> PAGE: 0 </p> 
      <script type="text/javascript">
const data = [...Array(100)].map((v, i) => {
  return {/*  w  w  w . j  av  a  2s.c  o m*/
    x: i,
    y: Math.random()
  };
});
const arrays = {};
for(i=0; i < 10; i++){
   arrays[i] = data;
}
console.log(arrays);
const pages = _.chunk(data, 25);
(function () {
  let page = 0;
  const el = document.getElementById('d');
  document.getElementById('next').onclick = function () {
    chart.series[0].update({
      data: pages[++page % 4].slice()
    });
    d.innerHTML = 'PAGE: ' + page % 4;
  };
})();
const chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  series: [{
    data: pages[0].slice()
  }]
});

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

Related Tutorials