--- /dev/null
+<html>
+ <head>
+ <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"
+ djConfig="isDebug: false, parseOnLoad: true"></script>
+ <script type="text/javascript">
+ dojo.require("dojox.charting.widget.Chart2D");
+ dojo.require("dojox.charting.themes.ET.greys");
+ 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>
+
+ <div dojoType="dojox.data.HtmlStore" dataId="tableExample" jsId="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.Chart2D"
+ theme="dojox.charting.themes.ET.greys"
+ 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" jsId="googStore"
+ url="data/goog_prices.csv"></div>
+ <div dojoType="dojox.charting.widget.Chart2D"
+ theme="dojox.charting.themes.ET.greys"
+ 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" jsId="yahooStore"
+ url="data/yahoo_prices.csv"></div>
+ <div dojoType="dojox.charting.widget.Chart2D"
+ theme="dojox.charting.themes.ET.greys"
+ 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" jsId="msftStore"
+ url="data/msft_prices.csv"></div>
+ <div dojoType="dojox.charting.widget.Chart2D"
+ theme="dojox.charting.themes.ET.greys"
+ 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>
+
+ </table>
+ </body>
+</html>
projects / eow / blobdiff