1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
#seriesInputs .dijitInputField, #seriesInputs .dijitInputField input {
width: 30px;
}
</style>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.require("dijit.form.NumberSpinner");
</script>
<script type="text/javascript">
var chart1;
// The data to use.
var seriesData = [1, 2, 2, 3, 4, 5, 5, 7];
// This function creates the chart, and is really all you
// need. All other code is to allow you to update it on the
// fly.
dojo.addOnLoad(function(){
chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {
type: "Pie",
fontColor: "white",
labelOffset: 40,
radius: 100
});
chart1.addSeries("Series 1", seriesData);
changeColor("blue");
});
function changeColor(color){
// Load the required color plot information
dojo.require("dojox.charting.themes.PlotKit." + color);
chart1.setTheme(dojox.charting.themes.PlotKit[color]);
chart1.render();
}
//Create the inputs that allow you to update the chart
//on the fly.
function createInputs(){
var div = dojo.byId("seriesInputs");
var inputs = [];
dojo.forEach(seriesData, function(item, index){
var input = new dijit.form.NumberSpinner({
value: item,
constraints: {
min: 0,
max: 100
}
});
inputs.push(input);
div.appendChild(input.domNode);
dojo.style(input.domNode, "width", "60px");
var updateFn = function(value){
seriesData[index] = value;
chart1.updateSeries("Series 1", seriesData);
chart1.render();
};
// Update the change when the values are changed.
dojo.connect(input, "setValue", updateFn);
});
}
dojo.addOnLoad(createInputs);
</script>
</head>
<body>
Select a color:
<select onchange="changeColor(this.value);">
<option value="blue" selected>Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="cyan">Cyan</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
</select>
<div id="seriesInputs">
Choose Values:
</div>
<div id="simplechart" style="width: 350px; height: 350px;">
</div>
</body>
</html> |
