You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
6.2 KiB
216 lines
6.2 KiB
<!--[if IE 7]> |
|
<!DOCTYPE> |
|
<html lang="en"> |
|
<head> |
|
<![endif]--> |
|
<!--[if IE 8]> |
|
<!DOCTYPE> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> |
|
<![endif]--> |
|
<![if gte IE 9]> |
|
<!DOCTYPE HTML> |
|
<html lang="en"> |
|
<head> |
|
<![endif]> |
|
<title>Chart 2D -- Sparklines Edition</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
.volume { color: #666666; } |
|
|
|
.label { |
|
text-align: right; |
|
line-height: 1.5em; |
|
} |
|
</style> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="isDebug: false, parseOnLoad: true"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojox.charting.plot2d.Lines"); |
|
dojo.require("dojox.charting.plot2d.Areas"); |
|
dojo.require("dojox.charting.widget.Sparkline"); |
|
dojo.require("dojox.charting.themes.Tufte"); |
|
dojo.require("dojox.data.HtmlStore"); |
|
dojo.require("dojox.data.CsvStore"); |
|
dojo.require("dojo.parser"); |
|
</script> |
|
|
|
</head> |
|
<body> |
|
<h1>Chart 2D</h1> |
|
<p>Sparkline-style charts using dojox.charting</p> |
|
<p><em>This is a particularly brutal example with <strong>lots and lots</strong> of data. |
|
It may cause laggyness in lesser browsers.</em></p> |
|
|
|
<div dojoType="dojox.data.HtmlStore" dataId="tableExample" data-dojo-id="tableStore"></div> |
|
<table id="tableExample" style="display: none;"> |
|
<thead> |
|
<tr><th>value</th></tr> |
|
</thead> |
|
<tbody> |
|
<tr><td>6.3</td></tr> |
|
<tr><td>1.8</td></tr> |
|
<tr><td>3 </td></tr> |
|
<tr><td>0.5</td></tr> |
|
<tr><td>4.4</td></tr> |
|
<tr><td>2.7</td></tr> |
|
<tr><td>2 </td></tr> |
|
</tbody> |
|
</table> |
|
|
|
<table cellpadding="0" cellspacing="3" border="0"> |
|
<tr> |
|
<td class="label"> |
|
Simple Sparkline: |
|
</td> |
|
<td> |
|
<div dojoType="dojox.charting.widget.Chart" |
|
theme="dojox.charting.themes.Tufte" |
|
margins="{ l: 0, r: 0, t: 0, b: 0 }" |
|
style="width: 100px; height: 15px;"> |
|
<div class="plot" name="default" type="Lines"></div> |
|
<div class="series" name="Series A" store="tableStore" valueFn="Number(x)"></div> |
|
</div> |
|
</td> |
|
<td> |
|
7 arbitrary data points |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="label"> |
|
<a href="http://finance.google.com/finance?q=Google">Google </a> Closing Price & <span class="volume">Volume</span>: |
|
</td> |
|
<td> |
|
|
|
<div dojoType="dojox.data.CsvStore" data-dojo-id="googStore" |
|
url="data/goog_prices.csv"></div> |
|
<div dojoType="dojox.charting.widget.Chart" |
|
theme="dojox.charting.themes.Tufte" |
|
margins="{ l: 0, r: 0, t: 0, b: 0 }" |
|
style="width: 100px; height: 15px;"> |
|
<div class="plot" name="default" type="Lines"></div> |
|
<div class="series" |
|
name="Closing Price" |
|
plot="default" |
|
store="googStore" |
|
count="Infinity" |
|
field="Close" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
valueFn="Number(x)"></div> |
|
<div class="plot" name="volume" type="Areas"></div> |
|
<div class="series" |
|
name="Volume" |
|
plot="volume" |
|
store="googStore" |
|
count="Infinity" |
|
field="Volume" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
stroke="{ color: '#666666', width: 0 }" |
|
fill="'#b3b3b3'" |
|
valueFn="Number(x/100000)"></div> |
|
</div> |
|
|
|
</td> |
|
<td> |
|
~1400 data points, all trading days since Jan '05 |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="label"> |
|
<a href="http://finance.google.com/finance?q=Yahoo">Yahoo</a> Closing Price & <span class="volume">Volume</span>: |
|
</td> |
|
<td> |
|
|
|
<div dojoType="dojox.data.CsvStore" data-dojo-id="yahooStore" |
|
url="data/yahoo_prices.csv"></div> |
|
<div dojoType="dojox.charting.widget.Chart" |
|
theme="dojox.charting.themes.Tufte" |
|
margins="{ l: 0, r: 0, t: 0, b: 0 }" |
|
style="width: 100px; height: 15px;"> |
|
<div class="plot" name="default" type="Lines"></div> |
|
<div class="series" |
|
name="Closing Price" |
|
plot="default" |
|
store="yahooStore" |
|
count="Infinity" |
|
field="Close" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
valueFn="Number(x)"></div> |
|
<div class="plot" name="volume" type="Areas"></div> |
|
<div class="series" |
|
name="Volume" |
|
plot="volume" |
|
store="yahooStore" |
|
count="Infinity" |
|
field="Volume" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
stroke="{ color: '#666666', width: 0 }" |
|
fill="'#b3b3b3'" |
|
valueFn="Number(x/100000)"></div> |
|
</div> |
|
|
|
</td> |
|
<td> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="label"> |
|
<a href="http://finance.google.com/finance?q=Microsoft">Microsoft</a> Closing Price & <span class="volume">Volume</span>: |
|
</td> |
|
<td> |
|
<div dojoType="dojox.data.CsvStore" data-dojo-id="msftStore" |
|
url="data/msft_prices.csv"></div> |
|
<div dojoType="dojox.charting.widget.Chart" |
|
theme="dojox.charting.themes.Tufte" |
|
margins="{ l: 0, r: 0, t: 0, b: 0 }" |
|
style="width: 100px; height: 15px;"> |
|
<div class="plot" name="default" type="Lines"></div> |
|
<div class="series" |
|
name="Closing Price" |
|
plot="default" |
|
store="msftStore" |
|
count="Infinity" |
|
field="Close" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
valueFn="Number(x)"></div> |
|
<div class="plot" name="volume" type="Areas"></div> |
|
<div class="series" |
|
name="Volume" |
|
plot="volume" |
|
store="msftStore" |
|
count="Infinity" |
|
field="Volume" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
stroke="{ color: '#666666', width: 0 }" |
|
fill="'#b3b3b3'" |
|
valueFn="Number(x/100000)"></div> |
|
</div> |
|
|
|
</td> |
|
<td> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="label"> |
|
<a href="http://finance.google.com/finance?q=Microsoft">Microsoft</a> Closing Price: |
|
</td> |
|
<td> |
|
<div dojoType="dojox.charting.widget.Sparkline" |
|
style="width: 100px; height: 15px;" |
|
store="msftStore" |
|
field="Close" |
|
count="100" |
|
sort="[{ attribute: 'Date', descending: false }]" |
|
valueFn="Number(x)" |
|
></div> |
|
</td> |
|
<td> |
|
100 points using Sparkline widget |
|
</td> |
|
</tr> |
|
|
|
</table> |
|
</body> |
|
</html>
|
|
|