How to create pure HTML5 chart using jQuery [highchart]

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you get done reading this article.

In this tutorial we will see hoe to create pure HTML5 chart using jQuery highchart. Now it is very easy to create different different charts using the highchart jquery. you can create all types of charts as shown in below image :

charts

 

Now focus on the Implementation  :

1.  Create index.php or yourfilename.php

[code type=php]

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>How to create pure HTML5 chart using jQuery UI</title>
<style type=”text/css”>
.highchart { display:none; }
.container
{
width:500px;
float:left;
margin: 30px;
padding:10px;
background-color:#eee;
-webkit-box-shadow: 0px 1px 15px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 15px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 15px rgba(50, 50, 50, 0.75);
}
#parent
{
margin-left:7%;
margin-bottom:10%;
}
</style>

<!–
loading jQuery and jQuery UI javascript,
with highchartTable plugin
–>
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>
<script src=”highcharts.js” type=”text/javascript”></script>
<script src=”jquery.highchartTable.js” type=”text/javascript”></script>

<script type=”text/javascript”>
/*
jQuery document ready
The HighchartsTable plugin takes data
and attributes from a table
and parses them to simply create an Hight-charts chart
*/
$(document).ready(function()
{
/*
simply call highchartTable on a selector
that selects the prepared table. Like this :
*/
$(‘table.highchart’).highchartTable();
});
</script>
</head>
<body>
<h1 style=”text-align:center;”>How to create pure HTML5 chart using jQuery</h1>

<!–
chart generated and placed into below divs.
which defined into tables data-graph-container attributes
–>
<div id=”parent”>
<div class=”highchart-container container”></div>
<div class=”highchart-container_first container”></div>
<div class=”highchart-container_second container”></div>
<div style=”clear:both;”></div>
</div>

<!–
There are two ways to define where the graph must be rendered.
If you want a graph before the table you can use “data-graph-container-before”
otherwise use “data-graph-container” and use a CSS selector to choose where to display the graph.
–>

<!–
data-graph-type :
The data-graph-type attribute is required
available options are :
column
line
area
spline
pie
–>

<!–
table structure for first example
–>
<table class=”highchart” data-graph-container=”.highchart-container” data-graph-type=”column”>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Benefits</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>8000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>12000</td>
<td>3000</td>
</tr>
<tr>
<td>March</td>
<td>18000</td>
<td>4000</td>
</tr>
<tr>
<td>April</td>
<td>2000</td>
<td>-1000</td>
</tr>
<tr>
<td>May</td>
<td>500</td>
<td>-2500</td>
</tr>
</tbody>
</table>

<!–
table structure for second example
–>
<table data-graph-type=”line” data-graph-container=”.highchart-container_first” class=”highchart”>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Benefits</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>8000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>12000</td>
<td>3000</td>
</tr>
<tr>
<td>March</td>
<td>18000</td>
<td>4000</td>
</tr>
<tr>
<td>April</td>
<td>2000</td>
<td>-1000</td>
</tr>
<tr>
<td>May</td>
<td>500</td>
<td>-2500</td>
</tr>
</tbody>
</table>

<!–
table structure for third example
–>
<table class=”highchart” data-graph-container=”.highchart-container_second” data-graph-type=”column”>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th data-graph-type=”area”>Benefits</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>8000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>12000</td>
<td>3000</td>
</tr>
<tr>
<td>March</td>
<td>18000</td>
<td>4000</td>
</tr>
<tr>
<td>April</td>
<td>2000</td>
<td>-1000</td>
</tr>
<tr>
<td>May</td>
<td>500</td>
<td>-2500</td>
</tr>
</tbody>
</table>
</body>
</html>

[/code]

 

There are following js file required

  • highcharts.js
  • jquery.highchartTable.js
  • jquery.min,js

you can download whole source code from here.

If you have any doubt on this you can comment below.