<!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>