HTMLTable to image converter with Google Chart API
Last days after I ate alot, it decide to write a small javascript that let you dynamically generate charts from a HTML table. Soon is end of the year and all reports have to been available.
I found this fancy site Google Chart API that lets you dynamically generate charts.
So if you have a HTML table, with your yearly statistics and boring reports and you want add a chart, manager almost like do this, my fellow you are just some steps away to realize it.
1) Include the javascript file:
<script type="text/javascript"
src="js/table2img.js"></script>
or
<script type="text/javascript"
src="http://duriaan.ch/js/table2img.js"></script>
2) Create your HTML table an give a ID name:
<table border="1" rules="groups"
id="chart_table_1">
3) Add your image and give also an ID name:
<img id="chart_image_1">
4) Call the javascript function with the chart settings:
<script type="text/javascript">
dotable2img("chart_table_1", "chart_image_1",
"");
</script>
Below you can find some tables with very important content and some chart styles. Have fun creating reports and statistics, better you then me.
Download:
V0.0.1 - Created script - table2img.js
index.html
<head>
.
.
<script type="text/javascript"
src="js/table2img.js"></script>
</head>
.
.
.
<body>
.
.
<table border="1" rules="groups"
id="chart_table_1">
<thead>
<tr>
<th>Eaten fruits<br>
[%]/Year</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
</tr>
</thead>
<tbody>
<tr>
<td>Durian</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr><tr>
<td>Mangcau</td>
.
.
</table>
.
.
<img id="chart_image_1">
<script type="text/javascript">
dotable2img("chart_table_1", "chart_image_1",
"");
</script>
HTML Tables
Table 1
Eaten fruits
[%]/Year |
2005 |
2006 |
2007 |
2008 |
| Durian |
50 |
60 |
70 |
80 |
| Mangcau |
20 |
10 |
10 |
5 |
| Mangostane |
10 |
10 |
10 |
5 |
| Dragon fruit |
10 |
10 |
5 |
5 |
| Banana |
10 |
10 |
5 |
5 |
Table 2
Eaten fruits
[%]/Year |
Durian |
Mangcau |
| 2008 |
75 |
25 |
Table 3
Eaten fruits
[%]/Year |
Durian |
Mangcau |
| 2007 |
60 |
40 |
| 2008 |
75 |
25 |
Table 4
Eaten fruits
[%]/Year |
Durian |
Mangostane |
Banana |
| Durian |
80 |
20 |
20 |
| Mangostane |
0 |
| Banana |
0 |
1) Chart 1 from table 1
<img id="chart_image_1">
<script type="text/javascript">
dotable2img("chart_table_1", "chart_image_1",
"");
</script>
![]()
2) Chart 2 from table 1
<img id="chart_image_2">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "bvs";
chartsettings.chbh = "20,10,10";
chartsettings.chs = "400x200";
dotable2img("chart_table_1", "chart_image_2",
chartsettings);
</script>
![]()
3) Chart 3 from table 1
<img id="chart_image_3">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "lc";
chartsettings.chdlp="t";
chartsettings.chs = "600x200";
chartsettings.chco_start = "ccaabb";
chartsettings.chco_offset = "001133";
dotable2img("chart_table_1", "chart_image_3",
chartsettings);
</script>
![]()
4) Chart 4 from table 1
<img id="chart_image_4">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "bhg";
chartsettings.chxt= "y"
chartsettings.chs = "600x400";
chartsettings.chco_start = "ccaabb";
chartsettings.chco_offset = "001133";
dotable2img("chart_table_1", "chart_image_4",
chartsettings);
</script>
![]()
5) Chart 5 from table 2
<img id="chart_image_5">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.chtt= "Table title in image embedded"
chartsettings.cht = "p";
chartsettings.chs = "400x200";
chartsettings.chco_offset = "001133";
dotable2img("chart_table_2", "chart_image_5",
chartsettings);
</script>
![]()
6) Chart 6 from table 2
<img id="chart_image_6">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "p3";
chartsettings.chs = "400x200";
dotable2img("chart_table_2", "chart_image_6",
chartsettings);
</script>
![]()
7) Chart 7 from table 3
<img id="chart_image_7">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "pc";
chartsettings.chs = "400x200";
chartsettings.chco_offset = "001133";
dotable2img("chart_table_3", "chart_image_7",
chartsettings);
</script>
![]()
8) Chart 8 from table 4
<img id="chart_image_8">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "v";
chartsettings.chs = "400x200";
dotable2img("chart_table_4", "chart_image_8",
chartsettings);
</script>
![]()
9) Chart 9 from table 1
<img id="chart_image_9">
<script type="text/javascript">
var chartsettings = new ChartSettings();
chartsettings.cht = "r";
chartsettings.chs = "600x400";
chartsettings.chls = "3,6,3|3,1,0|1,6,3|3,9,3"
dotable2img("chart_table_1", "chart_image_9",
chartsettings);
</script> ![]()
Thats it...
|
