source: Dev/trunk/src/client/dojox/charting/tests/test_DataChart.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.1 KB
Line 
1<!--[if IE 7]>
2<!DOCTYPE>
3<html lang="en">
4        <head>
5<![endif]-->
6<!--[if IE 8]>
7<!DOCTYPE>
8<html lang="en">
9    <head>
10           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
11<![endif]-->
12<![if gte IE 9]>
13<!DOCTYPE HTML>
14<html lang="en">
15        <head>
16<![endif]>
17<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18<title>DataChart Test</title>
19<link rel="stylesheet" href="../../../dijit/themes/claro/document.css"/>
20<link rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
21<link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css"/>
22<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad:true"></script>
23<script type="text/javascript">
24dojo.require("dojo.parser");
25dojo.require("dojox.charting.DataChart");
26dojo.require("dojo.data.ItemFileWriteStore");
27dojo.require("dijit.form.NumberSpinner");
28
29var store = new dojo.data.ItemFileWriteStore({ url:"stock.json" });
30               
31makeCharts = function(){
32       
33       
34       
35        var lines = new dojox.charting.DataChart("lines", {
36                displayRange:7,
37                xaxis:{labels:["0", "A","B","C","D","E","F","G","H","I","J"]},
38                type: dojox.charting.plot2d.Lines
39        });
40        lines.setStore(store, {symbol:"*"}, "historicPrice");
41       
42        var linesC = new dojox.charting.DataChart("linesC", {
43                displayRange:6,
44                xaxis:{labelFunc:"seriesLabels"},
45                yaxis:{minorLabels:true},
46                type: dojox.charting.plot2d.Lines,
47                comparative:true
48        });
49        linesC.setStore(store, {symbol:"*"}, "price");
50       
51        var cols = new dojox.charting.DataChart("cols", {
52                displayRange:8,
53                scroll:false,
54                xaxis:{labelFunc:"seriesLabels"},
55                type: dojox.charting.plot2d.Columns
56        });
57        cols.setStore(store, {symbol:"*"}, "price");
58       
59        var bars = new dojox.charting.DataChart("bars", {
60                displayRange:10,
61                yaxis:{max:8,min:1, majorTickStep:1, labelFunc:"seriesLabels", maxLabelSize:30},
62                scroll:false,
63                type: dojox.charting.plot2d.Bars
64        });
65        bars.setStore(store, {symbol:"*"}, "price");
66                                 
67        var pie = new dojox.charting.DataChart("pie", {
68                type: dojox.charting.plot2d.Pie,
69                comparative:true
70        });
71        pie.setStore(store, {symbol:"*"}, "price");
72};
73makeSpinners = function(items){
74        dojo.forEach(items, function(m){
75                var nm = store.getLabel(m);
76                var num = store.getValue(m, "price");
77                console.log(nm, num);
78                var w = new dijit.form.NumberSpinner({
79                        onChange:function(val){
80                                val = val===0 ? 0.01 : val; //HACKS the no label-when-zero bug
81                                console.log("OC:", nm, val);
82                                store.setValue(m, "price", val);
83                                //store.setValues(m, "historicPrice", store.getValues("historicPrice").push(val));
84                                console.log("OC:", nm, val);
85                        },
86                        value:num,
87                        constraints:{min:0, max:10,places:2},
88                        className:"myField"
89                });
90                w.startup();
91                dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last")
92                dojo.place(w.domNode, "spinners", "last")
93        });
94}
95dojo.addOnLoad(function(){
96        makeCharts();
97        console.log(store.getFeatures())
98        store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}})
99});
100
101handleSpinner = function(){
102        console.log(arguments)
103}
104</script>
105
106<style>
107        #charts{
108                clear:both;
109                margin-bottom:50px;
110        }
111        #charts span{
112                padding:0 10px;
113                display:block;
114                font-size:10px;
115        }
116        .lines, .linesC, .cols, .bars, .pie{
117                float:left;
118                border:1px solid #ccc;
119        }
120        .lines, #lines, .linesC, #linesC, .cols, #cols, .bars, #bars, .pie, #pie{
121                width:200px;
122                height:200px;
123        }
124        .lines, .linesC, .cols, .bars, .pie{
125                height:250px;
126                margin:3px;
127        }
128        .cols, #cols{
129                width:280px;
130        }
131        .linesC, #linesC{
132                width:260px;
133        }
134        .lines, #lines,.bars, #bars{
135                width:260px;
136        }
137</style>
138</head>
139<body class="claro">
140        <h1>DataChart</h1>
141        <p>
142                DataChart extends dojox.charting.Chart2D and allows for a simple connection to a data store. When adding a store to a chart, it is necessary to also supply which
143                item property you wish charted. There are two types of properties supported: numbers and arrays of numbers (bubble charts take an array of objects and are not currently
144                supported). If the property is an array, a segment of the array is taken from the end that fits in the display range of the chart. Animated charts are also possible.
145        </p>
146        <p>
147                Use the spinner fields at the bottom to change the data. The charts listen to store changes an update automatically.
148        </p>
149        <div id="charts">
150                <div class="lines">
151                        <div id="lines"></div>
152                        <span>This line chart uses a different data field than the rest, which is an array. This chart will not upate using the spinners.</span>       
153                </div>
154                <div class="linesC">
155                        <div id="linesC"></div>
156                        <span>This chart uses <em>comparitive</em> to compare the price of each item. Without compartive, the items would each be a separate series and not be connected. Will update.</span>   
157                </div>
158                <div class="cols">
159                        <div id="cols"></div>
160                        <span>Each column in this chart is a separate series. Will update. </span>     
161                </div> 
162                <div class="bars">
163                        <div id="bars"></div>
164                        <span>Each bar in this chart is a separate series. Will update.</span>                 
165                </div>
166                <div class="pie">
167                        <div id="pie"></div>
168                        <span>This chart also uses <em>comparitive</em> to create one series from several items. Will update.</span>   
169                </div>
170        </div>
171        <div id="spinners"></div>
172</body>
173</html>
Note: See TracBrowser for help on using the repository browser.