git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/charting/tests/test_sparklines.html

   1 <html>
   2         <head>
   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; }
   8
   9                         .label {
  10                                 text-align: right;
  11                                 line-height: 1.5em;
  12                         }
  13                 </style>
  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");
  22                 </script>
  23
  24         </head>
  25         <body>
  26                 <h1>Chart 2D</h1>
  27                 <p>Sparkline-style charts using dojox.charting</p>
  28
  29                 <div dojoType="dojox.data.HtmlStore" dataId="tableExample" jsId="tableStore"></div>
  30                 <table id="tableExample" style="display: none;">
  31                         <thead>
  32                                 <tr><th>value</th></tr>
  33                         </thead>
  34                         <tbody>
  35                                 <tr><td>6.3</td></tr>
  36                                 <tr><td>1.8</td></tr>
  37                                 <tr><td>3  </td></tr>
  38                                 <tr><td>0.5</td></tr>
  39                                 <tr><td>4.4</td></tr>
  40                                 <tr><td>2.7</td></tr>
  41                                 <tr><td>2  </td></tr>
  42                         </tbody>
  43                 </table>
  44
  45                 <table cellpadding="0" cellspacing="3" border="0">
  46                         <tr>
  47                                 <td class="label">
  48                                         Simple Sparkline:
  49                                 </td>
  50                                 <td>
  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>
  57                                         </div>
  58                                 </td>
  59                                 <td>
  60                                         7 arbitrary data points
  61                                 </td>
  62                         </tr>
  63                         <tr>
  64                                 <td class="label">
  65                                         <a href="http://finance.google.com/finance?q=Google">Google </a> Closing Price &amp; <span class="volume">Volume</span>:
  66                                 </td>
  67                                 <td>
  68
  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>
  76                                                 <div class="series"
  77                                                         name="Closing Price"
  78                                                         plot="default"
  79                                                         store="googStore"
  80                                                         count="Infinity"
  81                                                         field="Close"
  82                                                         sort="[{ attribute: 'Date', descending: false }]"
  83                                                         valueFn="Number(x)"></div>
  84                                                 <div class="plot" name="volume" type="Areas"></div>
  85                                                 <div class="series"
  86                                                         name="Volume"
  87                                                         plot="volume"
  88                                                         store="googStore"
  89                                                         count="Infinity"
  90                                                         field="Volume"
  91                                                         sort="[{ attribute: 'Date', descending: false }]"
  92                                                         stroke="{ color: '#666666', width: 0 }"
  93                                                         fill="'#b3b3b3'"
  94                                                         valueFn="Number(x/100000)"></div>
  95                                         </div>
  96
  97                                 </td>
  98                                 <td>
  99                                         ~1400 data points, all trading days since Jan '05
 100                                 </td>
 101                         </tr>
 102                         <tr>
 103                                 <td class="label">
 104                                         <a href="http://finance.google.com/finance?q=Yahoo">Yahoo</a> Closing Price &amp; <span class="volume">Volume</span>:
 105                                 </td>
 106                                 <td>
 107
 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>
 115                                                 <div class="series"
 116                                                         name="Closing Price"
 117                                                         plot="default"
 118                                                         store="yahooStore"
 119                                                         count="Infinity"
 120                                                         field="Close"
 121                                                         sort="[{ attribute: 'Date', descending: false }]"
 122                                                         valueFn="Number(x)"></div>
 123                                                 <div class="plot" name="volume" type="Areas"></div>
 124                                                 <div class="series"
 125                                                         name="Volume"
 126                                                         plot="volume"
 127                                                         store="yahooStore"
 128                                                         count="Infinity"
 129                                                         field="Volume"
 130                                                         sort="[{ attribute: 'Date', descending: false }]"
 131                                                         stroke="{ color: '#666666', width: 0 }"
 132                                                         fill="'#b3b3b3'"
 133                                                         valueFn="Number(x/100000)"></div>
 134                                         </div>
 135
 136                                 </td>
 137                                 <td>
 138                                 </td>
 139                         </tr>
 140                         <tr>
 141                                 <td class="label">
 142                                         <a href="http://finance.google.com/finance?q=Microsoft">Microsoft</a> Closing Price &amp; <span class="volume">Volume</span>:
 143                                 </td>
 144                                 <td>
 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>
 152                                                 <div class="series"
 153                                                         name="Closing Price"
 154                                                         plot="default"
 155                                                         store="msftStore"
 156                                                         count="Infinity"
 157                                                         field="Close"
 158                                                         sort="[{ attribute: 'Date', descending: false }]"
 159                                                         valueFn="Number(x)"></div>
 160                                                 <div class="plot" name="volume" type="Areas"></div>
 161                                                 <div class="series"
 162                                                         name="Volume"
 163                                                         plot="volume"
 164                                                         store="msftStore"
 165                                                         count="Infinity"
 166                                                         field="Volume"
 167                                                         sort="[{ attribute: 'Date', descending: false }]"
 168                                                         stroke="{ color: '#666666', width: 0 }"
 169                                                         fill="'#b3b3b3'"
 170                                                         valueFn="Number(x/100000)"></div>
 171                                         </div>
 172
 173                                 </td>
 174                                 <td>
 175                                 </td>
 176                         </tr>
 177
 178                 </table>
 179         </body>
 180 </html>