Speed up development with full-stack environments for every branch.

Learn More

How to create pure HTML5 chart using jQuery [highchart]

7190 Runs 17274 Views 6861 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!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>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).