Do you have search Web tutorial on How to Convert HTML Table Data into different chart or graph like Column, line, area etc. Then you have come on right place in this post we have discuss how to use Jquery HighChartTable plugin with PHP script for convert dynamic HTML Table data into chart. By using this plugin we can easily make chart by using HTML table data. This JQuery plugin has convert HTML table data into a high quality HTML5 chars and graphs.
On this blog we have already publish how to can display mysql table data in graphical format and in that post we have discuss Google graph library, morris chart library and now we have discuss this JQuery HighChartTable plugin which transform HTML Tables data into nice charts. This plugin has use HighChart library for convert html table data into nice graphs. If you have work on any web development project and you want to display your data in graphical format then you have this plugin has nice option because it is very easy integrate into your current coding standard.
How this initialize this plugin, so for initialization of this plugin you have to use this highchartTable(). You have to apply this method on CSS Selector of you html data which you want to convert into chart. Here we have use JQuery Dialog box for display chart in pop up window. For define html tag where you want to display chart, so for this we have use this graph-container data attribute. By using this attribute we can define in which tag we want display graph. For define chart type for this here we have use graph-type data attribute, under this data attribute we can define type of chart like column, line, area etc. So for convert html table data into chart we have to use this two data attribute value, there other many options are available, so please go to this plugin official site and check other option. Below you can find source code for convert html table data into different chart by using Jquery HighChartTable plugin with PHP script.
Source Code
<?php
//index.php
$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');
$query = "SELECT * FROM tbl_admission ORDER BY id ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<title>Display HTML Table Data on Chart in PHP using HighChartTable Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.highcharttable.org/2.0.0/jquery.highchartTable.js"></script>
<script src="http://highcharttable.org/js/highcharts.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Display HTML Table Data on Chart in PHP using HighChartTable Plugin</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered table-striped" id="for_chart">
<thead>
<tr>
<th width="20%">Year</th>
<th width="40%">No. of Student Admission</th>
<th width="40%">No. of Student Passout</th>
</tr>
</thead>
<?php
foreach($result as $row)
{
echo '
<tr>
<td>'.$row["year"].'</td>
<td>'.$row["no_of_admission"].'</td>
<td>'.$row["no_of_passout"].'</td>
</tr>
';
}
?>
</table>
</div>
<br />
<div id="chart_area" id="Student Admission & Passout Details">
</div>
<br />
<div align="center">
<button type="button" name="view_chart" id="view_chart" class="btn btn-info btn-lg">View Data in Chart</button>
</div>
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#chart_area').dialog({
autoOpen: false,
width: 1000,
height:500
});
$('#view_chart').click(function(){
$('#for_chart').data('graph-container', '#chart_area');
$('#for_chart').data('graph-type', 'column');
$('#chart_area').dialog('open');
$('#for_chart').highchartTable();
});
});
</script>
Hi, I like ur site so much,
ReplyDeletehow to make it show at the div not a dialog box
hi i want ask,how to tables and chart in the same page?
ReplyDelete