Populating Data From Array - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

Populating Data From Array

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> 
      <script type="text/javascript">
var data = [{//w w  w .  ja v  a  2 s  .  c  o m
  "CategoryName": "Home life worries",
  "count": "2"
}, {
  "CategoryName": "Social life worries",
  "count": "2"
}, {
  "CategoryName": "Exam stress",
  "count": "1"
}, {
  "CategoryName": "University life stress",
  "count": "1"
}, {
  "CategoryName": "Work stress",
  "count": "1"
}];
$(function() {
  // Populate series
  var processed_json = [],
      len = data.length;
  for (i = 0; i < len; i++) {
    processed_json.push([data[i].CategoryName, parseInt(data[i].count)]);
  }
  $(document).ready(function() {
    // draw chart
    var options = {
      chart: {
        renderTo: 'container',
        type: "column"
      },
      title: {
        text: "Diary Entries by Category"
      },
      xAxis: {
        type: 'category',
        title: {
          text: "CategoryName"
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: "Total"
        }
      },
      series: [{
         data: processed_json
      }]
    };
    var chart = new Highcharts.Chart(options);
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials