Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<table class="table_1" style="width: 260px;" border='1'>
 <thead>
 <tr>
    <th>Process</th>
    <th class="prog_filecount"># of Files</th>
    <th class="prog_pgcount"># of Pages</th>
 </tr>
 </thead>
 <tfoot>
    <tr class="td_bold">
        <td>Totals:</td><td>2</td><td>0</td>
    </tr>
 </tfoot>
 <tbody>
<tr class="">
<td>Writing</td>
<td>10</td>
<td>0</td>
</tr>
<tr class="altrow">
<td>External Collaboration</td>
<td>7</td><td>0</td>
</tr>
<tr class="">
<td>Ready for Edit</td>
<td>3</td><td>0</td>
</tr>
<tr class="altrow">
<td>Editing</td>
<td>12</td><td>0</td>
</tr>
<tr class="">
<td>Ready for Review</td>
<td>10</td><td>0</td>
</tr>
<tr class="altrow">
<td>In Pink Team</td>
<td>8</td><td>0</td>
</tr>
<tr class="">
<td>In Red Team</td>
<td>9</td><td>0</td>
</tr>
<tr class="altrow">
<td>In Gold Team</td>
<td>9</td>
<td>0</td>
</tr>
<tr class="">
<td>Final Version</td>
<td>20</td><td>0</td>
</tr>
 </tbody>
</table>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

// dataPoints - hard coded
//var dps = [{  y: 10, indexLabel: "Writing" }, {  y: 9, indexLabel: "External Collaboration" }, {  y: 8, indexLabel: "Ready for Edit" }, {  y: 7, indexLabel: "Editing" }, {  y: 4, indexLabel: "Ready for Review" }, {  y: 10, indexLabel: "In Pink Team" }, {  y: 9, indexLabel: "In Gold Team" }, {  y: 11, indexLabel: "In Red Team" }, {  y: 20, indexLabel: "Final Versions" }]

// dataPoints - extract from DOM/table
// Instantiate array
var dps = [];
	
// Get the data straight from the HTML table generated
$("table.table_1 tbody tr").each(function(){
	key = $("td:nth-child(1)", $(this)).text();
	value = $("td:nth-child(2)", $(this)).text();
	// If value is empty, we make it a 0
	if (value == '') {
		value = 0;	
	}
	// Add new element to the prop files array
	// {  y: 10, indexLabel: "Writing (1)" }
	dps.push(['\{ y: ' + Number(value) + ', indexLabel: \"' + key + ' (' + value + ')\" \}' ]);								
});

// Convert to comma separated string for troubleshooting
var str_dps = dps.toString();
alert('Array to String: ' + str_dps);

// Canvas JS Code
var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Proposal Files Chart"
    },
	legend:{
		verticalAlign: "bottom",
		horizontalAlign: "center"
	},
    data: [{
      	type: "pie",
        dataPoints : dps
    }]
});

chart.render();