convert an object array DataTable for chart - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

convert an object array DataTable for chart

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://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> 
      <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*  w w  w.  jav a  2 s. c o  m*/
var data = [{
    "itemName": "item1",
    "Jan": "4056479",
    "Feb": "3716377",
    "Mar": "6924148"
}, {
    "itemName": "item2",
    "Jan": "3034448",
    "Feb": "930077",
    "Mar": "1210250"
}, {
    "itemName": "item3",
    "Jan": "3938924",
    "Feb": "1624727",
    "Mar": "9626947"
}];
function filterData(data, key) {
    var result = [];
    $.each(data, function (index, rcd) {
        result.push([rcd['itemName'], parseFloat(rcd[key])]);
    });
    return result;
}
$('#statTable').DataTable({
    data: data,
    columns: [
       { data: "itemName" },
       { data: "Jan" },
       { data: "Feb" },
       { data: "Mar" }
    ]
});
var options = {
    chart: {
        type: "column",
        height: "300",
    },
    series: [{
        index: 0,
        name: "Jan",
        data: filterData(data, 'Jan')
    }, {
        index: 1,
        name: "Feb",
        data: filterData(data, 'Feb')
    }, {
        index: 2,
        name: "Mar",
        data: filterData(data, 'Mar')
    }]
};
$('#statChart').highcharts(options);
    });

      </script> 
   </head> 
   <body> 
      <div> 
         <table id="statTable" class="display" cellspacing="0" width="100%"> 
            <thead> 
               <tr> 
                  <th>Item</th> 
                  <th>January</th> 
                  <th>February</th> 
                  <th>March</th> 
               </tr> 
            </thead> 
         </table> 
      </div> 
      <hr> 
      <div id="statChart"></div>  
   </body>
</html>

Related Tutorials