Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Data Defined in a Html Table Chart Example
Keywords : How to create a chart based on data defined in a html table using highcharts example, Use html table data to create chart using highcharts example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Fixed placement columns Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartdata={ table: 'datatable' } var chartype = { type: 'column' } var chartitle = { text: 'Data extracted from a HTML table in the page' } var chartyaxis = { allowDecimals: false, title: { text: 'Units' } } var chartooltip = { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase(); } } $('#container').highcharts({ data:chartdata, chart:chartype, title: chartitle, yAxis: chartyaxis, tooltip: chartooltip }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <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>
Click Here to See Result
Result
Previous
Next
