Jquery Visualize Example - Jquery
How to use jquery visualize concept?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This simple jquery visualize code which allows you to create various output like piechart, line charts, graphs etc using HTML 5 canvas.Refer the below link for jquery visualize plugin:
https://github.com/filamentgroup/jQuery-Visualize/blob/master/js/visualize.jQuery.js.
The code to create visualize effect is given below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='visualize.js'></script>
<script type="text/javascript">
$(function(){
$('table').visualize();
});
</script>
<table cellspacing=8 cellpadding=5>
<caption><b>Subject Marks</b></caption>
<thead>
<tr>
<td></td>
<th scope="col">Tamil</th>
<th scope="col">English</th>
<th scope="col">Maths</th>
<th scope="col">Science</th>
<th scope="col">Social</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>90</td>
<td>60</td>
<td>50</td>
<td>70</td>
<td>30</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>93</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
</tr>
<tr>
<th scope="row">Brad</th>
<td>70</td>
<td>80</td>
<td>50</td>
<td>85</td>
<td>75</td>
</tr>
</tbody>
</table>
