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

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

Added Dojo 1.9.3 release.
File size: 7.0 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>DataSeries 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
23<style>
24    .dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px;}
25    .dojoxLegendText {vertical-align: text-top; padding-right: 10px}
26   
27        #charts {
28                clear: both;
29                margin-bottom: 50px;
30        }
31        .chart-area {
32                float: left;
33                border: 1px solid #ccc;
34                width:  450px;
35        height: 350px;
36                margin: 3px;
37        }
38        .chart {
39                width:  450px;
40                height: 300px;
41        }
42</style>
43
44<script src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true"></script>
45
46<script>
47   
48    dojo.require("dojox.charting.Chart");
49    dojo.require("dojox.charting.DataSeries");
50    dojo.require("dojox.charting.themes.ThreeD");
51    dojo.require("dojox.charting.widget.Legend");
52
53    dojo.require("dojox.charting.axis2d.Default");
54   
55    dojo.require("dojox.charting.plot2d.Markers");
56    dojo.require("dojox.charting.plot2d.Columns");
57    dojo.require("dojox.charting.plot2d.Pie");
58   
59    dojo.require("dojox.charting.action2d.Tooltip");
60    dojo.require("dojox.charting.action2d.MoveSlice");
61    dojo.require("dojox.charting.action2d.Magnify");
62    dojo.require("dojox.charting.action2d.Shake");
63
64    dojo.require("dojo.data.ItemFileWriteStore");
65
66    dojo.require("dijit.form.NumberSpinner");
67   
68    var store = new dojo.data.ItemFileWriteStore({url: "stock.json"});
69   
70    function addLegend(chart, node){
71        var legend = new dojox.charting.widget.Legend({chart: chart}, node);
72        dojo.connect(chart, "render", legend, "refresh");
73    }
74   
75    var templates = {
76        low:   "<strong>{0}</strong>: <strong>low {1}</strong> &ndash; {2} &ndash; {3}",
77        price: "<strong>{0}</strong>: {1} &ndash; <strong>price {2}</strong> &ndash; {3}",
78        high:  "<strong>{0}</strong>: {1} &ndash; {2} &ndash; <strong>high {3}</strong>"
79    };
80   
81    function valTrans(value, store, item){
82        return {
83            y: store.getValue(item, value),
84            tooltip: dojo.replace(
85                templates[value],
86                dojo.map(["symbol", "low", "price", "high"], function(field){
87                    return store.getValue(item, field);
88                })
89            )
90        };
91    }
92   
93    var chartL, chartC, chartP;
94   
95    makeCharts = function(){
96        chartL = new dojox.charting.Chart("lines").
97                setTheme(dojox.charting.themes.ThreeD).
98                addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, majorTickStep: 5}).
99                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
100                addPlot("default", {type: dojox.charting.plot2d.Markers}).
101                addSeries("Price", new dojox.charting.DataSeries(
102                    store, {query: {symbol: "*"}}, "price")).
103                render();
104        addLegend(chartL, "lines_legend");
105        new dojox.charting.action2d.Magnify(chartL);
106        new dojox.charting.action2d.Tooltip(chartL);
107
108        chartC = new dojox.charting.Chart("cols").
109                setTheme(dojox.charting.themes.ThreeD).
110                addAxis("x", {natural: true}).
111                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
112                addPlot("default", {type: dojox.charting.plot2d.Columns}).
113                addSeries("Low", new dojox.charting.DataSeries(
114                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "low"))).
115                addSeries("Price", new dojox.charting.DataSeries(
116                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "price"))).
117                addSeries("High", new dojox.charting.DataSeries(
118                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "high"))).
119                render();
120        addLegend(chartC, "cols_legend");
121        new dojox.charting.action2d.Shake(chartC, "default", {shiftY: 0});
122        new dojox.charting.action2d.Tooltip(chartC);
123       
124        chartP = new dojox.charting.Chart("pie").
125                setTheme(dojox.charting.themes.ThreeD).
126                addPlot("default", {type: dojox.charting.plot2d.Pie, radius: 125}).
127                addSeries("Price", new dojox.charting.DataSeries(
128                    store, {query: {symbol: "*"}}, {y: "price", text: "symbol", tooltip: "price"})).
129                render();
130        addLegend(chartP, "pie_legend");
131        new dojox.charting.action2d.Tooltip(chartP);
132        new dojox.charting.action2d.MoveSlice(chartP);
133    };
134
135    makeSpinners = function(items){
136        dojo.forEach(items, function(m){
137            var nm = store.getLabel(m);
138            var num = store.getValue(m, "price");
139            console.log(nm, num);
140            var w = new dijit.form.NumberSpinner({
141                onChange: function(val){
142                    val = val===0 ? 0.01 : val; //HACKS the no label-when-zero bug
143                    console.log("OC:", nm, val);
144                    store.setValue(m, "price", val);
145                    //store.setValues(m, "historicPrice", store.getValues("historicPrice").push(val));
146                    console.log("OC:", nm, val);
147                },
148                value: num,
149                constraints: {min:0, max:10,places:2},
150                className: "myField",
151                intermediateChanges: true
152            });
153            dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last")
154            dojo.place(w.domNode, "spinners", "last")
155        });
156       
157        var labels = dojo.map(items, function(item, index){
158                return {
159                    value: index + 1,
160                    text:  store.getLabel(item)
161                }
162            });
163        chartC.addAxis("x", {natural: true, labels: labels}).render();
164    }
165
166    dojo.addOnLoad(function(){
167        makeCharts();
168        console.log(store.getFeatures())
169        store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}})
170    });
171</script>
172
173</head>
174
175<body class="claro">
176        <h1>DataSeries Test</h1>
177        <p>
178                Use the spinner fields at the bottom to change the data. The charts listen to store changes an update automatically.
179        </p>
180        <div id="charts">
181                <div class="chart-area">
182            <div id="lines_legend"></div>
183                        <div id="lines" class="chart"></div>
184                </div>
185                <div class="chart-area">
186            <div id="cols_legend"></div>
187                        <div id="cols" class="chart"></div>
188                </div> 
189                <div class="chart-area">
190            <div id="pie_legend"></div>
191                        <div id="pie" class="chart"></div>
192                </div>
193        </div>
194        <div id="spinners"></div>
195</body>
196</html>
Note: See TracBrowser for help on using the repository browser.