Table To Chart

Create a HTML table and get a Google Chart.

I really like the Interactive Charts API that Google offers http://code.google.com/apis/charttools/ but I wanted to devise a way of creating these charts simply by creating a HTML table for those less inclined to using complex JavaScript. An example of the main function call is drawChart('columnchart','chartme','chart_div','Things I Do',600,400); It works with these charts for now: as first function parameter-"linechart","piechart","areachart","columnchart","barchart","gauge". 2nd parameter is the table id, 3rd is the element id that you would like your chart to appear, 4th parameter is the title of your chart, 5th and 6th are width and height respectively. All are necessary for the chart to function properly. You can download tabletochart.js here.

Dependencies: You must include Google's JSAPI library http://www.google.com/jsapi , Jquery - if you don't have it on your site, all you have to do is uncomment the line that reads "google.load("jquery", "1.4.1");" and it will add it for you. Of course, you will need tabletochart.js available for download above. Also when creating your HTML table, you must have TH tags in your first row. The code that runs behind the scenes will use the data within these tags in your chart. In addition to TH tags you should wrap all rows within your table inside of TBODY tags.

Feel free to use drawchart.js in your code, I just ask that you don't hotlink directly to it from your site. Let me know if you've got questions.


View the source on this page: http://peterschlamp.com/js/drawcharttest.html