Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

218 lines (213 sloc) 3.675 kb
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo page</title>
<link type="text/css" rel="stylesheet" href="css/visualize.css"/>
<!-- <link type="text/css" rel="stylesheet" href="css/visualize-dark.css"/> -->
<link type="text/css" rel="stylesheet" href="demopage.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
//make some charts
$('table.pie').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});
$('table.line').visualize({type: 'line'});
$('table.area').visualize({type: 'area'});
$('table.bar').visualize({type: 'bar', barDirection: 'horizontal'});
});
</script>
</head>
<body>
<h1>jQuery Visualize demos</h1>
<p><a href="interactive.html">See also with interaction</a></p>
<h2>Charts from the same data</h2>
<table class="pie line area bar">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
<th>auto</th>
<th>household</th>
<th>furniture</th>
<th>kitchen</th>
<th>bath</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>190</td>
<td>0</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>-70</td>
</tr>
<tr>
<th>Tom</th>
<td>-3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th>Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th>Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
<h2>Pie charts</h2>
<table class="pie">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>50</td>
</tr>
<tr>
<th>Tom</th>
<td>0</td>
</tr>
<tr>
<th>Brad</th>
<td>50</td>
</tr>
<tr>
<th>Kate</th>
<td>0</td>
</tr>
</tbody>
</table>
<table class="pie">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>0</td>
</tr>
<tr>
<th>Tom</th>
<td>1</td>
</tr>
<tr>
<th>Brad</th>
<td>1</td>
</tr>
<tr>
<th>Kate</th>
<td>98</td>
</tr>
</tbody>
</table>
<table class="pie">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>10</td>
</tr>
<tr>
<th>Tom</th>
<td>10</td>
</tr>
<tr>
<th>Brad</th>
<td>0</td>
</tr>
<tr>
<th>Kate</th>
<td>80</td>
</tr>
</tbody>
</table>
<table class="pie">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>2345</td>
</tr>
<tr>
<th>Tom</th>
<td>346</td>
</tr>
<tr>
<th>Brad</th>
<td>0</td>
</tr>
<tr>
<th>Kate</th>
<td>5778</td>
</tr>
</tbody>
<table class="pie">
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th>food</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>10</td>
</tr>
<tr>
<th>Tom</th>
<td>10</td>
</tr>
<tr>
<th>Brad</th>
<td>1</td>
</tr>
<tr>
<th>Kate</th>
<td>79</td>
</tr>
</tbody>
</table>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.