|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
|
5 <title>Title</title> |
|
6 <! Javascript Here> |
|
7 |
|
8 <script type="text/javascript"> |
|
9 |
|
10 function offsetLabels(labels, offset) |
|
11 { |
|
12 var copy = new Array(); |
|
13 for (key in labels) { |
|
14 copy[key] = new Array(labels[key][0] + 0.25, labels[key][1]); |
|
15 } |
|
16 return copy; |
|
17 } |
|
18 |
|
19 function createLogDataSet(inDataSet) |
|
20 { |
|
21 var logDataSet = {}; |
|
22 logDataSet.label = inDataSet.label; |
|
23 logDataSet.data = []; |
|
24 |
|
25 if (!inDataSet.data) |
|
26 return logDataSet; |
|
27 |
|
28 var length = inDataSet.data.length; |
|
29 |
|
30 for (var i = 0; i < length; i++) { |
|
31 logDataSet.data[i] = []; |
|
32 logDataSet.data[i][0] = inDataSet.data[i][0]; |
|
33 logDataSet.data[i][1] = Math.log(inDataSet.data[i][1]); |
|
34 } |
|
35 return logDataSet; |
|
36 } |
|
37 |
|
38 |
|
39 function createLogData(inData) |
|
40 { |
|
41 var logData = []; |
|
42 |
|
43 // foreach data set; |
|
44 var length = inData.length; |
|
45 for (var i = 0; i < length; ++i) { |
|
46 logData[i] = createLogDataSet(inData[i]); |
|
47 } |
|
48 return logData; |
|
49 } |
|
50 |
|
51 function createChart() { |
|
52 // alert("create chart" + this.chartId) |
|
53 |
|
54 var dataSet; |
|
55 |
|
56 if (this.useLinearScale) |
|
57 dataSet = this.selectedDataset; |
|
58 else |
|
59 dataSet = createLogData(this.selectedDataset); |
|
60 |
|
61 if (this.useLineChart) { |
|
62 var f = Flotr.draw($(this.chartId), |
|
63 dataSet, |
|
64 { legend:{ backgroundColor: '#D2E8FF' } |
|
65 , xaxis: { ticks: this.labels, noTicks : 10 } |
|
66 , mouse: { |
|
67 track: true, |
|
68 lineColor: 'purple', |
|
69 sensibility: 1, |
|
70 trackDecimals: 2, |
|
71 trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; } |
|
72 } |
|
73 }); |
|
74 |
|
75 } else { |
|
76 var f = Flotr.draw($(this.chartId), |
|
77 dataSet, |
|
78 { legend:{ backgroundColor: '#D2E8FF'} |
|
79 , bars: { show: true, lineWidth: 1, barWidth: this.barWidth } |
|
80 , xaxis: { ticks: offsetLabels(this.labels, chartOptions.tickOffset), noTicks : 10 } |
|
81 }); |
|
82 } |
|
83 } |
|
84 |
|
85 function checkform() |
|
86 { |
|
87 // alert("check form " + this.form.id + " " + this.chartId); |
|
88 var field = this.form.list |
|
89 |
|
90 // Apparently list of lenght one is not a list... |
|
91 // Display the entire chart if there is only one data series. |
|
92 if (!field.length) { |
|
93 this.createChart(); |
|
94 return; |
|
95 } |
|
96 |
|
97 this.selectedDataset = []; |
|
98 var data = []; |
|
99 var index = 0; |
|
100 |
|
101 for (i = 0; i < field.length; i++) { |
|
102 if (field[i].checked == true) { |
|
103 this.selectedDataset[index++] = this.dataset[i]; |
|
104 } else { |
|
105 this.selectedDataset[index++] = []; |
|
106 } |
|
107 } |
|
108 this.createChart(); |
|
109 } |
|
110 |
|
111 function createElement(nodeName, name) { |
|
112 var node; |
|
113 try { |
|
114 node = document.createElement("<"+nodeName+" name="+name+">"); |
|
115 } catch (e) { |
|
116 node = document.createElement(nodeName); |
|
117 node.name = name; |
|
118 } |
|
119 return node; |
|
120 } |
|
121 |
|
122 function createFormSelector(form, value, text, type) |
|
123 { |
|
124 var selector = createElement('input', 'list'); |
|
125 selector.type = type; |
|
126 selector.defaultChecked = true; |
|
127 selector.value = value; |
|
128 |
|
129 form.appendChild(selector); |
|
130 form.appendChild(document.createTextNode(text)); |
|
131 form.appendChild(document.createElement("BR")); |
|
132 } |
|
133 |
|
134 function createCheckBox(form, value, text) |
|
135 { |
|
136 createFormSelector(form, value, text, "checkbox"); |
|
137 } |
|
138 |
|
139 function createRadioButton(form, value, text) |
|
140 { |
|
141 createFormSelector(form, value, text, "radio"); |
|
142 } |
|
143 |
|
144 function buildSeriesSelector(form, chartOptions) |
|
145 { |
|
146 // alert("form" + form.id + " " + chartOptions.chartId); |
|
147 var series = chartOptions.seriesLabels; |
|
148 form.onclick = function() { /*alert("fn " + chartOptions.chartId);*/ chartOptions.checkform() }; |
|
149 for (s = 0; s < series.length; ++s) { |
|
150 createCheckBox(form, s, series[s]); |
|
151 } |
|
152 } |
|
153 |
|
154 function buildChartTypeSelector() |
|
155 { |
|
156 createRadioButton(this.chartTypeForm, 0, "Bar Chart"); |
|
157 createRadioButton(this.chartTypeForm, 1, "Line Chart"); |
|
158 |
|
159 var field = this.chartTypeForm.list; |
|
160 if (this.useLineChart) |
|
161 field[1].checked = true; |
|
162 else |
|
163 field[0].checked = true; |
|
164 |
|
165 var chartOptions = this; |
|
166 this.chartTypeForm.onclick = function() { |
|
167 var field = chartOptions.chartTypeForm.list; |
|
168 |
|
169 chartOptions.useLineChart = (field[1].checked == true); |
|
170 chartOptions.checkform(); |
|
171 }; |
|
172 } |
|
173 |
|
174 function buildScaleSelector() |
|
175 { |
|
176 createRadioButton(this.scaleForm, 0, "Linear Scale"); |
|
177 createRadioButton(this.scaleForm, 1, "Logarithmic Scale"); |
|
178 |
|
179 var field = this.scaleForm.list; |
|
180 field[0].checked = true; |
|
181 field[1].checked = false; |
|
182 |
|
183 var chartOptions = this; |
|
184 this.scaleForm.onclick = function() { |
|
185 var field = chartOptions.scaleForm.list; |
|
186 |
|
187 chartOptions.useLinearScale = (field[0].checked == true); |
|
188 chartOptions.checkform(); |
|
189 }; |
|
190 } |
|
191 |
|
192 |
|
193 </script> |
|
194 </head> |
|
195 <body> |
|
196 <h2> |
|
197 <! Title Here> |
|
198 </h2> |
|
199 <! Description Here> |
|
200 <! Chart Here> |
|
201 </body> |
|
202 </html> |