3 <title>Chart 2D -- Sparklines Edition</title>
4 <style type="text/css">
5 @import "../../../dojo/resources/dojo.css";
6 @import "../../../dijit/tests/css/dijitTests.css";
7 .volume { color: #666666; }
14 <script type="text/javascript" src="../../../dojo/dojo.js"
15 djConfig="isDebug: false, parseOnLoad: true"></script>
16 <script type="text/javascript">
17 dojo.require("dojox.charting.widget.Chart2D");
18 dojo.require("dojox.charting.themes.ET.greys");
19 dojo.require("dojox.data.HtmlStore");
20 dojo.require("dojox.data.CsvStore");
21 dojo.require("dojo.parser");
27 <p>Sparkline-style charts using dojox.charting</p>
29 <div dojoType="dojox.data.HtmlStore" dataId="tableExample" jsId="tableStore"></div>
30 <table id="tableExample" style="display: none;">
32 <tr><th>value</th></tr>
45 <table cellpadding="0" cellspacing="3" border="0">
51 <div dojoType="dojox.charting.widget.Chart2D"
52 theme="dojox.charting.themes.ET.greys"
53 margins="{ l: 0, r: 0, t: 0, b: 0 }"
54 style="width: 100px; height: 15px;">
55 <div class="plot" name="default" type="Lines"></div>
56 <div class="series" name="Series A" store="tableStore" valueFn="Number(x)"></div>
60 7 arbitrary data points
65 <a href="http://finance.google.com/finance?q=Google">Google </a> Closing Price & <span class="volume">Volume</span>:
69 <div dojoType="dojox.data.CsvStore" jsId="googStore"
70 url="data/goog_prices.csv"></div>
71 <div dojoType="dojox.charting.widget.Chart2D"
72 theme="dojox.charting.themes.ET.greys"
73 margins="{ l: 0, r: 0, t: 0, b: 0 }"
74 style="width: 100px; height: 15px;">
75 <div class="plot" name="default" type="Lines"></div>
82 sort="[{ attribute: 'Date', descending: false }]"
83 valueFn="Number(x)"></div>
84 <div class="plot" name="volume" type="Areas"></div>
91 sort="[{ attribute: 'Date', descending: false }]"
92 stroke="{ color: '#666666', width: 0 }"
94 valueFn="Number(x/100000)"></div>
99 ~1400 data points, all trading days since Jan '05
104 <a href="http://finance.google.com/finance?q=Yahoo">Yahoo</a> Closing Price & <span class="volume">Volume</span>:
108 <div dojoType="dojox.data.CsvStore" jsId="yahooStore"
109 url="data/yahoo_prices.csv"></div>
110 <div dojoType="dojox.charting.widget.Chart2D"
111 theme="dojox.charting.themes.ET.greys"
112 margins="{ l: 0, r: 0, t: 0, b: 0 }"
113 style="width: 100px; height: 15px;">
114 <div class="plot" name="default" type="Lines"></div>
121 sort="[{ attribute: 'Date', descending: false }]"
122 valueFn="Number(x)"></div>
123 <div class="plot" name="volume" type="Areas"></div>
130 sort="[{ attribute: 'Date', descending: false }]"
131 stroke="{ color: '#666666', width: 0 }"
133 valueFn="Number(x/100000)"></div>
142 <a href="http://finance.google.com/finance?q=Microsoft">Microsoft</a> Closing Price & <span class="volume">Volume</span>:
145 <div dojoType="dojox.data.CsvStore" jsId="msftStore"
146 url="data/msft_prices.csv"></div>
147 <div dojoType="dojox.charting.widget.Chart2D"
148 theme="dojox.charting.themes.ET.greys"
149 margins="{ l: 0, r: 0, t: 0, b: 0 }"
150 style="width: 100px; height: 15px;">
151 <div class="plot" name="default" type="Lines"></div>
158 sort="[{ attribute: 'Date', descending: false }]"
159 valueFn="Number(x)"></div>
160 <div class="plot" name="volume" type="Areas"></div>
167 sort="[{ attribute: 'Date', descending: false }]"
168 stroke="{ color: '#666666', width: 0 }"
170 valueFn="Number(x/100000)"></div>