<html> <head> <title>dojo: Chart demo</title> <script type="text/javascript"> var djConfig = { isDebug: true }; </script> <script type="text/javascript" src="../../dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.Chart"); //dojo.hostenv.writeIncludes(); </script> </head> <body> <p> The following only works on browsers that support inline SVG (FF1.5+ and Opera 9) and Internet Explorer. </p> <div dojoType="chart" style="border:1px solid black;width:600px;background-color:#ededde;"> <table width="600" height="400" padding="20 20 20 40" plotType="line" axisAt="0 xmin" rangeX="0 100" rangeY="-20 60" > <thead> <tr> <th>X</th> <th plotType="bar">Series A</th> <th>Series B</th> <th plotType="bubble">Series C</th> <th plotType="scatter" color="#963">Series D</th> </tr> </thead> <tbody> <tr><td>2</td><td>22</td><td>17</td><td size="2.28">18</td><td>1.04137618667233</td></tr> <tr><td>4</td><td>19</td><td>14.7224318643355</td><td size="1.4">24</td><td>8.5</td></tr> <tr><td>6</td><td>16</td><td>8.5</td><td size="0.85">30</td><td>14.7224318643355</td></tr> <tr><td>8</td><td>13</td><td>2.08275237334465</td><td>36</td><td>17</td></tr> <tr><td>10</td><td>-23</td><td>8.5</td><td>42</td><td>14.7224318643355</td></tr> <tr><td>12</td><td>-20</td><td>14.7224318643355</td><td>48</td><td>8.50000000000001</td></tr> <tr><td>14</td><td>17</td><td>17</td><td>54</td><td>3.12412856001698</td></tr> <tr><td>16</td><td>-14</td><td>14.7224318643355</td><td size="4.84">15</td><td>8.5</td></tr> <tr><td>18</td><td>-24</td><td>8.50000000000001</td><td>21</td><td>14.7224318643355</td></tr> <tr><td>20</td><td>21</td><td>4.16550474668931</td><td>27</td><td>17</td></tr> <tr><td>22</td><td>18</td><td>8.5</td><td>33</td><td>14.7224318643355</td></tr> <tr><td>24</td><td>15</td><td>14.7224318643355</td><td>39</td><td>8.49999999999999</td></tr> <tr><td>26</td><td>12</td><td>17</td><td>45</td><td>5.20688093336164</td></tr> <tr><td>28</td><td>22</td><td>14.7224318643355</td><td>51</td><td>8.49999999999999</td></tr> <tr><td>30</td><td>-19</td><td>8.5</td><td>12</td><td>14.7224318643355</td></tr> <tr><td>32</td><td>-16</td><td>6.24825712003396</td><td>18</td><td>17</td></tr> <tr><td>34</td><td>-13</td><td>8.49999999999999</td><td>24</td><td>14.7224318643355</td></tr> <tr><td>36</td><td>23</td><td>14.7224318643355</td><td>30</td><td>8.5</td></tr> <tr><td>38</td><td>-20</td><td>17</td><td>36</td><td>7.28963330670629</td></tr> <tr><td>40</td><td>17</td><td>14.7224318643355</td><td>42</td><td>8.49999999999999</td></tr> <tr><td>42</td><td>-14</td><td>8.5</td><td>48</td><td>14.7224318643355</td></tr> <tr><td>44</td><td>-24</td><td>8.33100949337862</td><td>54</td><td>17</td></tr> <tr><td>46</td><td>21</td><td>8.49999999999998</td><td>15</td><td>14.7224318643355</td></tr> <tr><td>48</td><td>18</td><td>14.7224318643355</td><td>21</td><td>8.5</td></tr> <tr><td>50</td><td>15</td><td>17</td><td>27</td><td>9.37238568005094</td></tr> <tr><td>52</td><td>12</td><td>14.7224318643355</td><td>33</td><td>8.50000000000001</td></tr> <tr><td>54</td><td>22</td><td>8.5</td><td>39</td><td>14.7224318643355</td></tr> <tr><td>56</td><td>19</td><td>1.04137618667233</td><td>45</td><td>17</td></tr> <tr><td>58</td><td>-16</td><td>8.49999999999998</td><td>51</td><td>14.7224318643355</td></tr> <tr><td>60</td><td>-13</td><td>14.7224318643354</td><td>12</td><td>8.50000000000003</td></tr> <tr><td>62</td><td>-23</td><td>17</td><td>18</td><td>1.87429282164087</td></tr> <tr><td>64</td><td>-20</td><td>14.7224318643355</td><td>24</td><td>8.50000000000001</td></tr> <tr><td>66</td><td>-17</td><td>8.5</td><td>30</td><td>14.7224318643355</td></tr> <tr><td>68</td><td>-14</td><td>1.24965142400679</td><td>36</td><td>17</td></tr> <tr><td>70</td><td>24</td><td>8.49999999999998</td><td>42</td><td>14.7224318643355</td></tr> <tr><td>72</td><td>21</td><td>14.7224318643354</td><td>48</td><td>8.50000000000003</td></tr> <tr><td>74</td><td>18</td><td>17</td><td>54</td><td>1.6660175843064</td></tr> <tr><td>76</td><td>15</td><td>14.7224318643355</td><td>15</td><td>8.50000000000001</td></tr> <tr><td>78</td><td>12</td><td>8.5</td><td>21</td><td>14.7224318643355</td></tr> <tr><td>80</td><td>22</td><td>1.45792666134126</td><td>27</td><td>17</td></tr> <tr><td>82</td><td>19</td><td>8.49999999999998</td><td>33</td><td>14.7224318643355</td></tr> <tr><td>84</td><td>16</td><td>14.7224318643354</td><td>39</td><td>8.50000000000003</td></tr> <tr><td>86</td><td>13</td><td>17</td><td>45</td><td>1.45774234697194</td></tr> <tr><td>88</td><td>23</td><td>14.7224318643355</td><td>51</td><td>8.5</td></tr> <tr><td>90</td><td>20</td><td>8.50000000000001</td><td>12</td><td>14.7224318643355</td></tr> <tr><td>92</td><td>17</td><td>1.66620189867572</td><td>18</td><td>17</td></tr> <tr><td>94</td><td>14</td><td>8.49999999999998</td><td>24</td><td>14.7224318643355</td></tr> <tr><td>96</td><td>24</td><td>14.7224318643354</td><td>30</td><td>8.50000000000003</td></tr> <tr><td>98</td><td>21</td><td>17</td><td>36</td><td>1.24946710963747</td></tr> <tr><td>100</td><td>18</td><td>14.7224318643355</td><td>42</td><td>8.5</td></tr> <tr><td>102</td><td>15</td><td>8.50000000000001</td><td>48</td><td>14.7224318643355</td></tr> <tr><td>104</td><td>12</td><td>1.87447713601019</td><td>54</td><td>17</td></tr> <tr><td>106</td><td>22</td><td>8.49999999999998</td><td>15</td><td>14.7224318643355</td></tr> <tr><td>108</td><td>19</td><td>14.7224318643355</td><td>21</td><td>8.49999999999998</td></tr> <tr><td>110</td><td>16</td><td>17</td><td>27</td><td>1.041191872303</td></tr> <tr><td>112</td><td>13</td><td>14.7224318643355</td><td>33</td><td>8.5</td></tr> <tr><td>114</td><td>23</td><td>8.50000000000001</td><td>39</td><td>14.7224318643355</td></tr> <tr><td>116</td><td>20</td><td>2.08275237334465</td><td>45</td><td>17</td></tr> </tbody> </table> </div> <div style="float:right;"> <p>this one, kind of like a sparkline.</p> <div dojoType="chart" style="border:1px solid black;width:200px;background-color:#ededde;"> <table width="200" height="80" padding="12" plotType="line" axisAt="0 xmax" rangeX="-50 50" rangeY="-50 50" > <thead> <tr> <th>X</th> <th plotType="bar">Series A</th> <th>Series B</th> <th>Series C</th> </tr> </thead> <tbody> <tr><td>-50</td><td>0</td><td>0</td><td size="1.23">-17.327</td></tr> <tr><td>-47</td><td>5.352</td><td>5.352</td><td size="3.54">-16.349</td></tr> <tr><td>-44</td><td>10.612</td><td>10.612</td><td size="1.62">-15.359</td></tr> <tr><td>-41</td><td>15.69</td><td>15.69</td><td size="3.93">-14.359</td></tr> <tr><td>-38</td><td>20.5</td><td>20.5</td><td size="2.00999999999999">-13.348</td></tr> <tr><td>-35</td><td>24.959</td><td>24.959</td><td size="4.31999999999999">-12.329</td></tr> <tr><td>-32</td><td>28.991</td><td>28.991</td><td size="2.39999999999999">-11.301</td></tr> <tr><td>-29</td><td>32.527</td><td>32.527</td><td size="4.70999999999999">-10.266</td></tr> <tr><td>-26</td><td>35.507</td><td>35.507</td><td size="2.78999999999999">-9.223</td></tr> <tr><td>-23</td><td>37.879</td><td>37.879</td><td size="5.09999999999999">-8.174</td></tr> <tr><td>-20</td><td>39.603</td><td>39.603</td><td size="3.17999999999999">-7.12</td></tr> <tr><td>-17</td><td>40.649</td><td>40.649</td><td size="1.25999999999998">-6.06</td></tr> <tr><td>-14</td><td>41</td><td>41</td><td size="3.56999999999998">-4.997</td></tr> <tr><td>-11</td><td>40.649</td><td>40.649</td><td size="1.64999999999998">-3.93</td></tr> <tr><td>-8</td><td>39.603</td><td>39.603</td><td size="3.95999999999998">-2.86</td></tr> <tr><td>-5</td><td>37.879</td><td>37.879</td><td size="2.03999999999998">-1.788</td></tr> <tr><td>-2</td><td>35.507</td><td>35.507</td><td size="4.34999999999998">-0.716</td></tr> <tr><td>1</td><td>32.527</td><td>32.527</td><td size="2.42999999999997">0.358</td></tr> <tr><td>4</td><td>28.991</td><td>28.991</td><td size="4.73999999999997">1.431</td></tr> <tr><td>7</td><td>24.959</td><td>24.959</td><td size="2.81999999999997">2.503</td></tr> <tr><td>10</td><td>20.5</td><td>20.5</td><td size="5.12999999999997">3.573</td></tr> <tr><td>13</td><td>15.69</td><td>15.69</td><td size="3.20999999999997">4.641</td></tr> <tr><td>16</td><td>10.612</td><td>10.612</td><td size="1.28999999999997">5.706</td></tr> <tr><td>19</td><td>5.352</td><td>5.352</td><td size="3.59999999999997">6.767</td></tr> <tr><td>22</td><td>0</td><td>0</td><td size="1.67999999999996">7.823</td></tr> <tr><td>25</td><td>-5.352</td><td>-5.352</td><td size="3.98999999999996">8.874</td></tr> <tr><td>28</td><td>-10.612</td><td>-10.612</td><td size="2.06999999999996">9.919</td></tr> <tr><td>31</td><td>-15.69</td><td>-15.69</td><td size="4.37999999999996">10.957</td></tr> <tr><td>34</td><td>-20.5</td><td>-20.5</td><td size="2.45999999999996">11.987</td></tr> <tr><td>37</td><td>-24.959</td><td>-24.959</td><td size="4.76999999999996">13.009</td></tr> <tr><td>40</td><td>-28.991</td><td>-28.991</td><td size="2.84999999999995">14.023</td></tr> <tr><td>43</td><td>-32.527</td><td>-32.527</td><td size="5.15999999999995">15.027</td></tr> <tr><td>46</td><td>-35.507</td><td>-35.507</td><td size="3.23999999999995">16.02</td></tr> <tr><td>49</td><td>-37.879</td><td>-37.879</td><td size="1.31999999999995">17.002</td></tr> <tr><td>52</td><td>-39.603</td><td>-39.603</td><td size="3.62999999999995">17.973</td></tr> </tbody> </table> </div> </div> <p>...and another one...</p> <div dojoType="chart" style="border:1px solid black;width:420px;background-color:#ededde;"> <table width="420" height="200" padding="24" plotType="line" axisAt="0 0" rangeX="-50 50" rangeY="-50 50" > <thead> <tr> <th>X</th> <th plotType="bar">Series A</th> <th>Series B</th> <th plotType="bubble">Series C</th> </tr> </thead> <tbody> <tr><td>-50</td><td>0</td><td>0</td><td size="1.23">-17.327</td></tr> <tr><td>-47</td><td>5.352</td><td>5.352</td><td size="3.54">-16.349</td></tr> <tr><td>-44</td><td>10.612</td><td>10.612</td><td size="1.62">-15.359</td></tr> <tr><td>-41</td><td>15.69</td><td>15.69</td><td size="3.93">-14.359</td></tr> <tr><td>-38</td><td>20.5</td><td>20.5</td><td size="2.00999999999999">-13.348</td></tr> <tr><td>-35</td><td>24.959</td><td>24.959</td><td size="4.31999999999999">-12.329</td></tr> <tr><td>-32</td><td>28.991</td><td>28.991</td><td size="2.39999999999999">-11.301</td></tr> <tr><td>-29</td><td>32.527</td><td>32.527</td><td size="4.70999999999999">-10.266</td></tr> <tr><td>-26</td><td>35.507</td><td>35.507</td><td size="2.78999999999999">-9.223</td></tr> <tr><td>-23</td><td>37.879</td><td>37.879</td><td size="5.09999999999999">-8.174</td></tr> <tr><td>-20</td><td>39.603</td><td>39.603</td><td size="3.17999999999999">-7.12</td></tr> <tr><td>-17</td><td>40.649</td><td>40.649</td><td size="1.25999999999998">-6.06</td></tr> <tr><td>-14</td><td>41</td><td>41</td><td size="3.56999999999998">-4.997</td></tr> <tr><td>-11</td><td>40.649</td><td>40.649</td><td size="1.64999999999998">-3.93</td></tr> <tr><td>-8</td><td>39.603</td><td>39.603</td><td size="3.95999999999998">-2.86</td></tr> <tr><td>-5</td><td>37.879</td><td>37.879</td><td size="2.03999999999998">-1.788</td></tr> <tr><td>-2</td><td>35.507</td><td>35.507</td><td size="4.34999999999998">-0.716</td></tr> <tr><td>1</td><td>32.527</td><td>32.527</td><td size="2.42999999999997">0.358</td></tr> <tr><td>4</td><td>28.991</td><td>28.991</td><td size="4.73999999999997">1.431</td></tr> <tr><td>7</td><td>24.959</td><td>24.959</td><td size="2.81999999999997">2.503</td></tr> <tr><td>10</td><td>20.5</td><td>20.5</td><td size="5.12999999999997">3.573</td></tr> <tr><td>13</td><td>15.69</td><td>15.69</td><td size="3.20999999999997">4.641</td></tr> <tr><td>16</td><td>10.612</td><td>10.612</td><td size="1.28999999999997">5.706</td></tr> <tr><td>19</td><td>5.352</td><td>5.352</td><td size="3.59999999999997">6.767</td></tr> <tr><td>22</td><td>0</td><td>0</td><td size="1.67999999999996">7.823</td></tr> <tr><td>25</td><td>-5.352</td><td>-5.352</td><td size="3.98999999999996">8.874</td></tr> <tr><td>28</td><td>-10.612</td><td>-10.612</td><td size="2.06999999999996">9.919</td></tr> <tr><td>31</td><td>-15.69</td><td>-15.69</td><td size="4.37999999999996">10.957</td></tr> <tr><td>34</td><td>-20.5</td><td>-20.5</td><td size="2.45999999999996">11.987</td></tr> <tr><td>37</td><td>-24.959</td><td>-24.959</td><td size="4.76999999999996">13.009</td></tr> <tr><td>40</td><td>-28.991</td><td>-28.991</td><td size="2.84999999999995">14.023</td></tr> <tr><td>43</td><td>-32.527</td><td>-32.527</td><td size="5.15999999999995">15.027</td></tr> <tr><td>46</td><td>-35.507</td><td>-35.507</td><td size="3.23999999999995">16.02</td></tr> <tr><td>49</td><td>-37.879</td><td>-37.879</td><td size="1.31999999999995">17.002</td></tr> <tr><td>52</td><td>-39.603</td><td>-39.603</td><td size="3.62999999999995">17.973</td></tr> </tbody> </table> </div> </body> </html>