<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/jquery.highchartTable.js"></script>
<script>
$(function () {
$('table.highchart').highchartTable();
$("button.btnChart").click(function(){
var type = $(this).html();
showShape(type);
});
function showShape(type){
$('table.highchart').attr("data-graph-type",type);
//$('table.highchart').attr("data-graph-container",".container");
$('table.highchart').bind('highchartTable.beforeRender',function(event,config){
var series = config.series;
for(var i = 0,len = series.length;i < len;i ++){
series[i].type = type;
}
}).highchartTable();
}
});
</script>
<style type="text/css">
table th,table td{
line-height:18px;
text-align:left;
padding:8px;
border-top:1px solid #dddddd;
}
</style>
</head>
<body>
<div class="container1">
<div>
<button class="btnChart">line</button>
<button class="btnChart">spline</button>
<button class="btnChart">pie</button>
<button class="btnChart">area</button>
<button class="btnChart">column</button>
<button class="btnChart">areaspline</button>
<button class="btnChart">bar</button>
<button class="btnChart">scatter</button>
</div>
<table class="highchart" data-graph-container=".container" data-graph-type="line">
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>8000</td>
</tr>
<tr>
<td>February</td>
<td>18000</td>
</tr>
<tr>
<td>March</td>
<td>18000</td>
</tr>
<tr>
<td>April</td>
<td>2000</td>
</tr>
<tr>
<td>May</td>
<td>500</td>
</tr>
</tbody>
</table>
<div class="container"></div>
</div>
</body>
</html>