creating highcharts using data from datatable

by deepak Singh

HTML

<link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js
"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
 <body>



   <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tfoot>
       <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
       </tr>
   </tfoot>
  <tbody>
    <tr class="odd gradeX">
      <td>Trident</td>
      <td>Internet
         Explorer 4.0</td>
      <td>Win 95+</td>
      <td class="center"> 4</td>
      <td class="center">X</td>
    </tr>
    <tr class="even gradeC">
      <td>Trident</td>
      <td>Internet
         Explorer 5.0</td>
      <td>Win 95+</td>
      <td class="center">5</td>
      <td class="center">C</td>
    </tr>
    <tr class="odd gradeA">
      <td>Trident</td>
      <td>Internet
         Explorer 5.5</td>
      <td>Win 95+</td>
      <td class="center">5.5</td>
      <td class="center">A</td>
    </tr>
    <tr class="even gradeA">
      <td>Trident</td>
      <td>Internet
         Explorer 6</td>
      <td>Win 98+</td>
      <td class="center">6</td>
      <td class="center">A</td>
    </tr>
    <tr class="odd gradeA">
      <td>Trident</td>
      <td>Internet Explorer 7</td>
      <td>Win XP SP2+</td>
      <td class="center">7</td>
      <td...

JavaScript

$(document).ready(function() {
var table = $('#example').DataTable();
var data = table.rows().data();

var categories=[]; //creating array for storing browser type in array.
    for(var i=0;i<data.length;i++){
    categories.push(data[i][0])
    }
var  count = {}; //creating object for getting categories with count
categories.forEach(function(i) {
	count[i] = (count[i]||0)+1;  
});
//console.log(count)
var series_data=[]; //creating empty array for highcharts series data
var categores=[];//creating empty array for highcharts categories
Object.keys(count).map(function(item, key) {
  series_data.push(count[item]) ;
  categores.push(item)
});
//console.log(series_data)
plotChart(series_data,categores)
} );

function plotChart(series_data,categores){
Highcharts.chart('container', {
		chart:{
    type:'column'
    },
    xAxis: {
        categories: categores
    },
     yAxis: {
       
        title: {
            text: 'Count'
        }
    },
    series:[{
    name:'Browser',
    data:series_data
    }]

});
}