Documentation - Quick Info
- Table2Charts is a free javascript library to convert your html tables to charts using Google Charts.
- The script is only 16kB
- You need to know a little Javascript in order to get this class working. I've tried to make the instructions as easy as possible to follow. But if you have any questions, please do not hesitate to put it in the forums.
Getting Started
- Download the latest version of table2charts class here and save it on your server.
- Call in your script within the <head> tags
<script type="text/javascript" src="path-to-file/table2charts_compress.js"></script>
- For any table that you have on the page, make sure you have an "id" associated with it. Please note, if you have multiple tables, they have to have their own unique ids. Avoid dashes (-) in your unique identifier. Use underscores instead.
<table id="unique_identifier">
<tr>
<td>
</td>
</tr>
</table>
- If you want to create a link that creates the chart, create the link. e.g.
<a onclick="runMe();" href="#">Click here</a>
or (some people get fussy about the above code)<a href="javascript:runMe()">Click here</a>
- or if you want the page to automatically load the charts, create a function in the <head> tag, and call it after your page loads up. e.g.
<head>
<script>
function runMe() { }
</script>
</head>
<body onload="runMe();">
<!-- Other HTML Stuff Pops up here -->
</body>
- within the runMe() function, create the instance of table2charts object.
<head>
<script>
function runMe() {
var t = umaniac_createGraph;
}
</script>
</head>
- create the chart right below that:
<head>
<script>
function runMe() {
var t = umaniac_createGraph;
var t.init('unique_identifier', 'type', { options });
</script>
}
</head>
- You will notice that "type" and "options" in the above example are in italics. To choose what you want to put in, refer to the tables below:
Type Description Pie Create a pie chart. Use the value 'pie' without quotes.
Line Create a line chart. Use the value 'line' without quotes. Bar Create a bar chart. Use the value 'bar' without quotes.
Bar (Stacked) Create a bar chart. Use the value 'bar' without quotes. Use stacked: true as one of the options
Options
All options are objects that contain a string and a value within t.init().
e.g.
var t;
t.init('id_of_table' , 'type_of_graph' , { string1: value1 , string2: value2 } );
String Values (bold values are default) Description target unique_identifier If you do not want to have your chart replace your table, you will need to create an html element (div or span) which has a unique id as an attribute. You can specify where the chart would pop up by naming the unique identifier. e.g. <table id="unique_identifier1">
<tr>
<td>
</td>
</tr>
</table>
<div id="unique_identifier2"></div>
// Your target would be unique_identifier2
<script>
var t = umaniac_createGraph;
t.init('unique_identifier1', 'line', { target: 'unique_identifier2' } );
</script>third true, false Create a 3D or 2D pie chart
Only available for pie charts.color yellow, light blue, green, dark blue, red Use a particular range of colors that you want to use in your chart. col_defined integer separated by commas. e.g. '1,2,3,5' If we only want to populate certain columns in a chart, we would define the columns here. This would/should not include the index. Examples on this page should help you understand it a little bit more. row_defined integer separated by commas. e.g. '1,2,3,5' If we only want to populate certain rows in a chart, we would define the rows here. This would/should not include the index. Examples on this page should help you understand it a little bit more. label true, false If set to true show the labels on a chart
or
width int Set the width of the table. Please read the Google docs to see what size restrictions the charts have. If you're not sure, leave it blank, and we'll try to match the div to the largest size possible height int Set the width of the table. Please read the Google docs to see what size restrictions the charts have. If you're not sure, leave it blank, and we'll try to match the div to the largest size possible stacked true, false If you're creating a bar chart, and want it stacked, set it to true.
e.g. t.init('id' , 'bar' { stacked: true });vertical true, false Applies to bar charts only. If you want to set your charts to a vertical alignment, set it to true.
e.g. t.init('id' , 'bar' { vertical: true });row_index int, default is 0 If your labels/legend do not lie on the first row, then you can define it here. Keep in mind, that the rest of the data will be below this row. col_index int, default is 0 If your labels/legend do not lie on the first column, then you can define it here. Keep in mind, that the rest of the data will be on the right of this column. spread_graph true, false By default, a small number of items would lead to a smaller chart being created, even if the canvas is spread out. Google Charts does allow you to spread out the charts to take advantage of the entire canvas. By default, this is set to true, so that the labels don't end up on top of each other. Enter in the value false if you don't want the graph to spread out.
e.g. t.init('id' , 'bar' { spread_graph: false });
Warning: Google Charts does not care if some of your charts fall off the canvas. Use the value "false" if you're sure that you know your data will show up.
Set to true
Set to false