❮ Highcharts Combinations Column Highcharts Line Logarithmic ❯

Highcharts Column Chart Using HTML Table Data

The following example demonstrates a column chart using HTML table data.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. Add the table configuration under data.

data

The data module provides some simple interfaces for adding data, which we can use from sources like CSV, HTML tables, or grid views.

data.table

Set an id in the HTML table and match it with the data.table parameter to parse the data. Relevant settings include startRow, endRow, startColumn, and endColumn.

data: {
   table: 'dataTable'  
}

Example

Filename: highcharts_column_table.htm

<html>
<head>
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script> 
   <script src="http://code.highcharts.com/modules/data.js"></script>     
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var data = {
      table: 'datatable'
   };
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Reading Data from HTML Table in Webpage'   
   };      
   var yAxis = {
      allowDecimals: false,
      title: {
         text: 'Units'
      }
   };
   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
      }
   };
   var credits = {
      enabled: false
   };  

   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.data = data;
   json.yAxis = yAxis;
   json.credits = credits;  
   json.tooltip = tooltip;  
   $('#container').highcharts(json);
});

</script>
<table id="datatable">
<thead>
<tr><th></th><th>Jane</th><th>John</th></tr>
</thead>
<tbody>
<tr><th>Apples</th><td>3</td><td>4</td></tr>
<tr><th>Pears</th><td>2</td><td>0</td></tr>
<tr><th>Plums</th><td>5</td><td>11</td></tr>
<tr><th>Bananas</th><td>1</td><td>1</td></tr>
<tr><th>Oranges</th><td>2</td><td>4</td></tr>
</tbody>
</table>
</body>
</html>

Try it »

The output of the above example is:

Highcharts Column Chart

❮ Highcharts Combinations Column Highcharts Line Logarithmic ❯