+++ /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