| 9 |
lars |
1 |
<!DOCTYPE html>
|
|
|
2 |
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
|
|
|
6 |
<title>Chart Theming</title>
|
|
|
7 |
|
|
|
8 |
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
|
|
|
9 |
<link rel="stylesheet" type="text/css" href="examples.min.css" />
|
|
|
10 |
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
|
|
|
11 |
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
|
|
|
12 |
|
|
|
13 |
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
|
14 |
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
15 |
|
|
|
16 |
|
|
|
17 |
</head>
|
|
|
18 |
<body>
|
|
|
19 |
<div id="header">
|
|
|
20 |
<div class="nav">
|
|
|
21 |
<a class="nav" href="../../../index.php"><span>></span>Home</a>
|
|
|
22 |
<a class="nav" href="../../../docs/"><span>></span>Docs</a>
|
|
|
23 |
<a class="nav" href="../../download/"><span>></span>Download</a>
|
|
|
24 |
<a class="nav" href="../../../info.php"><span>></span>Info</a>
|
|
|
25 |
<a class="nav" href="../../../donate.php"><span>></span>Donate</a>
|
|
|
26 |
</div>
|
|
|
27 |
</div>
|
|
|
28 |
<div class="colmask leftmenu">
|
|
|
29 |
<div class="colleft">
|
|
|
30 |
<div class="col1" id="example-content">
|
|
|
31 |
|
|
|
32 |
|
|
|
33 |
<!-- Example scripts go here -->
|
|
|
34 |
|
|
|
35 |
<style type="text/css">
|
|
|
36 |
.jqplot-target {
|
|
|
37 |
margin: 30px;
|
|
|
38 |
}
|
|
|
39 |
</style>
|
|
|
40 |
|
|
|
41 |
<p>jqPlot has basic theming support for commonly styled atributes of plot elements. Upon creation, each plot will have a "themeEngine" that controls modificaition, adding, removing and activating of plot themes. In addition, each plot will have a "Default" theme which corresponds to the styling of the plot at plot creation.<p>
|
|
|
42 |
|
|
|
43 |
<p>Creation of new themes is easy. A "style" object is created with properties for the various plot elements to be styles. Attached to each of those is an ojbect with the actual styling properties. A simple style object might look like:</p>
|
|
|
44 |
|
|
|
45 |
<pre>
|
|
|
46 |
gabe = {
|
|
|
47 |
series: [
|
|
|
48 |
{color: 'rgba(216, 159, 60, 0.4)'},
|
|
|
49 |
{color: 'rgba(159, 216, 60, 0.4)'},
|
|
|
50 |
{color: 'rgba(60, 159, 216, 0.4)'},
|
|
|
51 |
],
|
|
|
52 |
grid: {
|
|
|
53 |
backgroundColor: '#DEA493'
|
|
|
54 |
}
|
|
|
55 |
}
|
|
|
56 |
</pre>
|
|
|
57 |
|
|
|
58 |
<p>This new style would then be added to the plot's themeEngine as a new theme. it can then be activated by calling the plot's <code>activateTheme</code> method.</p>
|
|
|
59 |
<pre>
|
|
|
60 |
plot1b.themeEngine.newTheme('gabe', gabe);
|
|
|
61 |
plot1b.activateTheme('gabe');
|
|
|
62 |
</pre>
|
|
|
63 |
|
|
|
64 |
<div id="chart1b" class="plot" style="width:400px;height:260px;"></div>
|
|
|
65 |
<p>Select Theme for area plot:
|
|
|
66 |
<select id="p1bswitcher" onchange="switch1b();">
|
|
|
67 |
<option value="Default" selected>Default</option>
|
|
|
68 |
<option value="gabe">gabe</option>
|
|
|
69 |
</select>
|
|
|
70 |
</p>
|
|
|
71 |
|
|
|
72 |
<p>Themes can be reused between plots. Here a style object is created and assigned to two different plots. For convenience, the theme is given the same name when added to each plot's themeEngine. Since each plot keeps its own copy of the theme, the names do not need to be the same. Also note that themes are added as deep copies by value and not by reference. This avoids strange behavior due to the cascading nature of css related styles.</p>
|
|
|
73 |
|
|
|
74 |
<pre>
|
|
|
75 |
temp = {
|
|
|
76 |
seriesStyles: {
|
|
|
77 |
seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
|
|
|
78 |
highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
|
|
|
79 |
},
|
|
|
80 |
legend: {
|
|
|
81 |
fontSize: '8pt'
|
|
|
82 |
},
|
|
|
83 |
title: {
|
|
|
84 |
fontSize: '18pt'
|
|
|
85 |
},
|
|
|
86 |
grid: {
|
|
|
87 |
backgroundColor: 'rgb(211, 233, 195)'
|
|
|
88 |
}
|
|
|
89 |
};
|
|
|
90 |
|
|
|
91 |
plot3.themeEngine.newTheme('uma', temp);
|
|
|
92 |
plot5.themeEngine.newTheme('uma', temp);
|
|
|
93 |
</pre>
|
|
|
94 |
|
|
|
95 |
<p>Select Theme for funnel and pie charts at same time:
|
|
|
96 |
<select id="p35switcher" onchange="switch35();">
|
|
|
97 |
<option value="Default" selected>Default</option>
|
|
|
98 |
<option value="uma">uma</option>
|
|
|
99 |
</select>
|
|
|
100 |
</p>
|
|
|
101 |
|
|
|
102 |
<div id="chart3" class="plot" style="width:400px;height:320px;"></div>
|
|
|
103 |
|
|
|
104 |
<p>Select Theme for funnel plot:
|
|
|
105 |
<select id="p3switcher" onchange="switch3();">
|
|
|
106 |
<option value="Default" selected>Default</option>
|
|
|
107 |
<option value="uma">uma</option>
|
|
|
108 |
</select>
|
|
|
109 |
</p>
|
|
|
110 |
|
|
|
111 |
<div id="chart5" class="plot" style="width:400px;height:260px;"></div>
|
|
|
112 |
|
|
|
113 |
<p>Select Theme for pie chart:
|
|
|
114 |
<select id="p5switcher" onchange="switch5();">
|
|
|
115 |
<option value="Default" selected>Default</option>
|
|
|
116 |
<option value="uma">uma</option>
|
|
|
117 |
</select>
|
|
|
118 |
</p>
|
|
|
119 |
|
|
|
120 |
<p>There are various was to create and edit themes for a plot. Below are two different methods for creating additional themes for a line plot and adding them to the plots themeEngine. Here the <code>axesStyles</code> property is used to supply styling to all axes at one time. A similar property, <code>seriesStyles</code>, exists for styling all series of a plot at one time. Note, neither of these methods is as straightforward as using the <code>newTheme()</code> method of the plots themeEngine, but are included for illustrative purposes.</p>
|
|
|
121 |
|
|
|
122 |
<pre>
|
|
|
123 |
e1 = plot1.themeEngine;
|
|
|
124 |
brass = e1.copy('Default', 'brass');
|
|
|
125 |
brass.title.fontFamily = 'Copperplate, Impact';
|
|
|
126 |
brass.grid.backgroundColor = "rgb(216, 198, 114)";
|
|
|
127 |
brass.grid.drawGridlines = false;
|
|
|
128 |
brass.series[0].lineWidth = 6.5;
|
|
|
129 |
brass.series[0].markerOptions.show = false;
|
|
|
130 |
brass.axesStyles.label.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
|
|
|
131 |
brass.axesStyles.ticks.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
|
|
|
132 |
brass.axesStyles.label.fontSize = '14pt';
|
|
|
133 |
|
|
|
134 |
temp = {
|
|
|
135 |
grid: {
|
|
|
136 |
backgroundColor: "#593D2B",
|
|
|
137 |
gridLineColor: '#E8E8E8',
|
|
|
138 |
gridLineWidth: 3
|
|
|
139 |
},
|
|
|
140 |
title: {
|
|
|
141 |
fontFamily: '"Comic Sans MS", cursive',
|
|
|
142 |
fontSize: '18pt',
|
|
|
143 |
textColor: '#C7CC4E'
|
|
|
144 |
},
|
|
|
145 |
seriesStyles: {
|
|
|
146 |
color: "#DBBCAF",
|
|
|
147 |
lineWidth: 8,
|
|
|
148 |
markerOptions: {
|
|
|
149 |
show: false
|
|
|
150 |
}
|
|
|
151 |
},
|
|
|
152 |
axes: {
|
|
|
153 |
xaxis: {
|
|
|
154 |
label: {
|
|
|
155 |
fontFamily: '"Comic Sans MS", cursive',
|
|
|
156 |
textColor: '#C7CC4E'
|
|
|
157 |
}
|
|
|
158 |
}
|
|
|
159 |
}
|
|
|
160 |
};
|
|
|
161 |
|
|
|
162 |
chocolate = plot1.themeEngine.copy('Default', 'chocolate', temp);
|
|
|
163 |
</pre>
|
|
|
164 |
|
|
|
165 |
<div id="chart1" class="plot" style="width:400px;height:260px;"></div>
|
|
|
166 |
|
|
|
167 |
<p>Select theme for line chart:
|
|
|
168 |
<select id="p1switcher" onchange="switch1();">
|
|
|
169 |
<option value="Default" selected>Default</option>
|
|
|
170 |
<option value="brass">brass</option>
|
|
|
171 |
<option value="chocolate">chocolate</option>
|
|
|
172 |
</select>
|
|
|
173 |
</p>
|
|
|
174 |
|
|
|
175 |
<p>The example below shows more extensive use of the various styling options to give the chart a rather ugly and dated appearence. Note that, for bar (and funnel, pie and donut charts), <code>highlightColors</code> can be specified as an array of colors which will be applied to each bar individually, as a single string giving a color to apply to all bars, or as an empty array which will force jqPlot to auto calculate highlight colors based on the current bar color.<p>
|
|
|
176 |
|
|
|
177 |
<pre>
|
|
|
178 |
oldstyle = {
|
|
|
179 |
title: {
|
|
|
180 |
fontFamily: 'Times New Roman',
|
|
|
181 |
textColor: 'black'
|
|
|
182 |
},
|
|
|
183 |
axesStyles: {
|
|
|
184 |
borderWidth: 0,
|
|
|
185 |
ticks: {
|
|
|
186 |
fontSize: '12pt',
|
|
|
187 |
fontFamily: 'Times New Roman',
|
|
|
188 |
textColor: 'black'
|
|
|
189 |
},
|
|
|
190 |
label: {
|
|
|
191 |
fontFamily: 'Times New Roman',
|
|
|
192 |
textColor: 'black'
|
|
|
193 |
}
|
|
|
194 |
},
|
|
|
195 |
grid: {
|
|
|
196 |
backgroundColor: 'white',
|
|
|
197 |
borderWidth: 0,
|
|
|
198 |
gridLineColor: 'black',
|
|
|
199 |
gridLineWidth: 2,
|
|
|
200 |
borderColor: 'black'
|
|
|
201 |
},
|
|
|
202 |
series: [
|
|
|
203 |
{color: 'red', highlightColors: ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']},
|
|
|
204 |
{color: 'green', highlightColors: []},
|
|
|
205 |
{color: 'blue', highlightColors: []},
|
|
|
206 |
{color: 'yellow', highlightColors: 'rgb(255, 245, 185)'}
|
|
|
207 |
],
|
|
|
208 |
legend: {
|
|
|
209 |
background: 'white',
|
|
|
210 |
textColor: 'black',
|
|
|
211 |
fontFamily: 'Times New Roman',
|
|
|
212 |
border: '1px solid black'
|
|
|
213 |
}
|
|
|
214 |
};
|
|
|
215 |
|
|
|
216 |
plot2.themeEngine.newTheme('oldstyle', oldstyle);
|
|
|
217 |
</pre>
|
|
|
218 |
|
|
|
219 |
<div id="chart2" class="plot" style="width:760px;height:360px;"></div>
|
|
|
220 |
|
|
|
221 |
<p>Select theme for bar chart:
|
|
|
222 |
<select id="p2switcher" onchange="switch2();">
|
|
|
223 |
<option value="Default" selected>Default</option>
|
|
|
224 |
<option value="oldstyle">oldstyle</option>
|
|
|
225 |
</select>
|
|
|
226 |
</p>
|
|
|
227 |
|
|
|
228 |
<script language="javascript" type="text/javascript">
|
|
|
229 |
$(document).ready(function(){
|
|
|
230 |
|
|
|
231 |
l1 = [['Seoul', 1], ['Paris', 7], ['Singapore',3], ['Hong Kong',5], ['Chicago', 2], ['New York', 9]];
|
|
|
232 |
l2 = [11, 9, 5, 12, 14];
|
|
|
233 |
l3 = [4, 8, 5, 3, 6];
|
|
|
234 |
l4 = [12, 6, 13, 11, 2];
|
|
|
235 |
l5 = [4, -3, 3, 6, 2, -2];
|
|
|
236 |
|
|
|
237 |
pop1980 = [7071639, 2968528, 3005072, 1595138, 789704, 1688210, 785940, 904599];
|
|
|
238 |
pop1990 = [7322564, 3485398, 2783726, 1630553, 983403, 1585577, 935933, 1006877];
|
|
|
239 |
pop2000 = [8008654, 3694644, 2896051, 1974152, 1322025, 1517550, 1160005, 1188603];
|
|
|
240 |
pop2008 = [8363710, 3833995, 2853114, 2242193, 1567924, 1447395, 1351305, 1279910];
|
|
|
241 |
|
|
|
242 |
ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas"];
|
|
|
243 |
|
|
|
244 |
plot1 = $.jqplot('chart1',[l2],{
|
|
|
245 |
title: 'Line Chart',
|
|
|
246 |
highlighter: {
|
|
|
247 |
show:true
|
|
|
248 |
},
|
|
|
249 |
cursor: {
|
|
|
250 |
show: true,
|
|
|
251 |
zoom: true
|
|
|
252 |
},
|
|
|
253 |
axes: {
|
|
|
254 |
xaxis: {
|
|
|
255 |
label: 'Sample'
|
|
|
256 |
}
|
|
|
257 |
}
|
|
|
258 |
});
|
|
|
259 |
|
|
|
260 |
plot1b = $.jqplot('chart1b',[l2, l3, l4],{
|
|
|
261 |
stackSeries: true,
|
|
|
262 |
showMarker: false,
|
|
|
263 |
seriesDefaults: {
|
|
|
264 |
fill: true
|
|
|
265 |
}
|
|
|
266 |
});
|
|
|
267 |
|
|
|
268 |
plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000, pop2008],{
|
|
|
269 |
title: 'City Population',
|
|
|
270 |
legend: {
|
|
|
271 |
show: true
|
|
|
272 |
},
|
|
|
273 |
seriesDefaults: {
|
|
|
274 |
renderer: $.jqplot.BarRenderer,
|
|
|
275 |
rendererOptions: {
|
|
|
276 |
barPadding: 2
|
|
|
277 |
}
|
|
|
278 |
},
|
|
|
279 |
series: [
|
|
|
280 |
{label: '1980'},
|
|
|
281 |
{label: '1990'},
|
|
|
282 |
{label: '2000'},
|
|
|
283 |
{label: '2008 (est)'}
|
|
|
284 |
],
|
|
|
285 |
axes: {
|
|
|
286 |
xaxis: {
|
|
|
287 |
label: 'City',
|
|
|
288 |
renderer: $.jqplot.CategoryAxisRenderer,
|
|
|
289 |
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
|
|
|
290 |
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
|
|
|
291 |
ticks: ticks,
|
|
|
292 |
tickOptions: {
|
|
|
293 |
angle: -30
|
|
|
294 |
}
|
|
|
295 |
},
|
|
|
296 |
yaxis: {
|
|
|
297 |
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
|
|
|
298 |
max: 9000000,
|
|
|
299 |
min: 0,
|
|
|
300 |
tickOptions: {
|
|
|
301 |
formatString: '%d',
|
|
|
302 |
angle: -30
|
|
|
303 |
}
|
|
|
304 |
}
|
|
|
305 |
}
|
|
|
306 |
});
|
|
|
307 |
|
|
|
308 |
plot3 = $.jqplot('chart3',[l1],{
|
|
|
309 |
title: 'Global City Index',
|
|
|
310 |
legend: {
|
|
|
311 |
show: true,
|
|
|
312 |
rendererOptions: {
|
|
|
313 |
// numberColumns: 2,
|
|
|
314 |
fontSize: '10pt'
|
|
|
315 |
}
|
|
|
316 |
},
|
|
|
317 |
seriesDefaults: {
|
|
|
318 |
renderer: $.jqplot.FunnelRenderer
|
|
|
319 |
}
|
|
|
320 |
});
|
|
|
321 |
|
|
|
322 |
plot5 = $.jqplot('chart5',[l1],{
|
|
|
323 |
title: 'Pie Chart',
|
|
|
324 |
seriesDefaults: {
|
|
|
325 |
renderer: $.jqplot.PieRenderer
|
|
|
326 |
},
|
|
|
327 |
legend: {
|
|
|
328 |
show: true
|
|
|
329 |
}
|
|
|
330 |
});
|
|
|
331 |
|
|
|
332 |
e1 = plot1.themeEngine;
|
|
|
333 |
brass = e1.copy('Default', 'brass');
|
|
|
334 |
brass.title.fontFamily = 'Copperplate, Impact';
|
|
|
335 |
brass.grid.backgroundColor = "rgb(216, 198, 114)";
|
|
|
336 |
brass.grid.drawGridlines = false;
|
|
|
337 |
brass.series[0].lineWidth = 6.5;
|
|
|
338 |
brass.series[0].markerOptions.show = false;
|
|
|
339 |
// brass.axes.xaxis.ticks.fontFamily = "Copperplate, Impact";
|
|
|
340 |
brass.axesStyles.label.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
|
|
|
341 |
brass.axesStyles.ticks.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
|
|
|
342 |
brass.axesStyles.label.fontSize = '14pt';
|
|
|
343 |
|
|
|
344 |
temp = {
|
|
|
345 |
grid: {
|
|
|
346 |
backgroundColor: "#593D2B",
|
|
|
347 |
gridLineColor: '#E8E8E8',
|
|
|
348 |
gridLineWidth: 3
|
|
|
349 |
},
|
|
|
350 |
title: {
|
|
|
351 |
fontFamily: '"Comic Sans MS", cursive',
|
|
|
352 |
fontSize: '18pt',
|
|
|
353 |
textColor: '#C7CC4E'
|
|
|
354 |
},
|
|
|
355 |
seriesStyles: {
|
|
|
356 |
color: "#DBBCAF",
|
|
|
357 |
lineWidth: 8,
|
|
|
358 |
markerOptions: {
|
|
|
359 |
show: false
|
|
|
360 |
}
|
|
|
361 |
},
|
|
|
362 |
axes: {
|
|
|
363 |
xaxis: {
|
|
|
364 |
label: {
|
|
|
365 |
fontFamily: '"Comic Sans MS", cursive',
|
|
|
366 |
textColor: '#C7CC4E'
|
|
|
367 |
}
|
|
|
368 |
}
|
|
|
369 |
}
|
|
|
370 |
};
|
|
|
371 |
|
|
|
372 |
chocolate = plot1.themeEngine.copy('Default', 'chocolate', temp);
|
|
|
373 |
|
|
|
374 |
gabe = {
|
|
|
375 |
series: [
|
|
|
376 |
{color: 'rgba(216, 159, 60, 0.6)'},
|
|
|
377 |
{color: 'rgba(159, 216, 60, 0.6)'},
|
|
|
378 |
{color: 'rgba(60, 159, 216, 0.6)'},
|
|
|
379 |
],
|
|
|
380 |
grid: {
|
|
|
381 |
backgroundColor: '#DEA493'
|
|
|
382 |
}
|
|
|
383 |
}
|
|
|
384 |
|
|
|
385 |
gabe = plot1b.themeEngine.newTheme('gabe', gabe);
|
|
|
386 |
|
|
|
387 |
oldstyle = {
|
|
|
388 |
title: {
|
|
|
389 |
fontFamily: 'Times New Roman',
|
|
|
390 |
textColor: 'black'
|
|
|
391 |
},
|
|
|
392 |
axesStyles: {
|
|
|
393 |
borderWidth: 0,
|
|
|
394 |
ticks: {
|
|
|
395 |
fontSize: '12pt',
|
|
|
396 |
fontFamily: 'Times New Roman',
|
|
|
397 |
textColor: 'black'
|
|
|
398 |
},
|
|
|
399 |
label: {
|
|
|
400 |
fontFamily: 'Times New Roman',
|
|
|
401 |
textColor: 'black'
|
|
|
402 |
}
|
|
|
403 |
},
|
|
|
404 |
grid: {
|
|
|
405 |
backgroundColor: 'white',
|
|
|
406 |
borderWidth: 0,
|
|
|
407 |
gridLineColor: 'black',
|
|
|
408 |
gridLineWidth: 2,
|
|
|
409 |
borderColor: 'black'
|
|
|
410 |
},
|
|
|
411 |
series: [
|
|
|
412 |
{color: 'red', highlightColors: ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']},
|
|
|
413 |
{color: 'green', highlightColors: []},
|
|
|
414 |
{color: 'blue', highlightColors: []},
|
|
|
415 |
{color: 'yellow', highlightColors: 'rgb(255, 245, 185)'}
|
|
|
416 |
],
|
|
|
417 |
legend: {
|
|
|
418 |
background: 'white',
|
|
|
419 |
textColor: 'black',
|
|
|
420 |
fontFamily: 'Times New Roman',
|
|
|
421 |
border: '1px solid black'
|
|
|
422 |
}
|
|
|
423 |
};
|
|
|
424 |
|
|
|
425 |
plot2.themeEngine.newTheme('oldstyle', oldstyle);
|
|
|
426 |
|
|
|
427 |
temp = {
|
|
|
428 |
seriesStyles: {
|
|
|
429 |
seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
|
|
|
430 |
highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
|
|
|
431 |
},
|
|
|
432 |
legend: {
|
|
|
433 |
fontSize: '8pt'
|
|
|
434 |
},
|
|
|
435 |
title: {
|
|
|
436 |
fontSize: '18pt'
|
|
|
437 |
},
|
|
|
438 |
grid: {
|
|
|
439 |
backgroundColor: 'rgb(211, 233, 195)'
|
|
|
440 |
}
|
|
|
441 |
};
|
|
|
442 |
|
|
|
443 |
plot3.themeEngine.newTheme('uma', temp);
|
|
|
444 |
plot5.themeEngine.newTheme('uma', temp);
|
|
|
445 |
|
|
|
446 |
});
|
|
|
447 |
|
|
|
448 |
function switch1() {
|
|
|
449 |
var th = $('#p1switcher').val();
|
|
|
450 |
plot1.activateTheme(th);
|
|
|
451 |
}
|
|
|
452 |
|
|
|
453 |
function switch1b() {
|
|
|
454 |
var th = $('#p1bswitcher').val();
|
|
|
455 |
plot1b.activateTheme(th);
|
|
|
456 |
}
|
|
|
457 |
|
|
|
458 |
function switch2() {
|
|
|
459 |
var th = $('#p2switcher').val();
|
|
|
460 |
plot2.activateTheme(th);
|
|
|
461 |
}
|
|
|
462 |
|
|
|
463 |
function switch3() {
|
|
|
464 |
var th = $('#p3switcher').val();
|
|
|
465 |
plot3.activateTheme(th);
|
|
|
466 |
}
|
|
|
467 |
|
|
|
468 |
function switch5() {
|
|
|
469 |
var th = $('#p5switcher').val();
|
|
|
470 |
plot5.activateTheme(th);
|
|
|
471 |
}
|
|
|
472 |
|
|
|
473 |
function switch35() {
|
|
|
474 |
var th = $('#p35switcher').val();
|
|
|
475 |
plot3.activateTheme(th);
|
|
|
476 |
plot5.activateTheme(th);
|
|
|
477 |
}
|
|
|
478 |
|
|
|
479 |
|
|
|
480 |
</script>
|
|
|
481 |
|
|
|
482 |
<!-- End example scripts -->
|
|
|
483 |
|
|
|
484 |
<!-- Don't touch this! -->
|
|
|
485 |
|
|
|
486 |
|
|
|
487 |
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
|
|
|
488 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
|
|
|
489 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
|
|
|
490 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
|
|
|
491 |
<!-- End Don't touch this! -->
|
|
|
492 |
|
|
|
493 |
<!-- Additional plugins go here -->
|
|
|
494 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
|
|
|
495 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
|
|
496 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
|
|
|
497 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.donutRenderer.min.js"></script>
|
|
|
498 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
|
|
|
499 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
|
|
|
500 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.funnelRenderer.min.js"></script>
|
|
|
501 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
|
|
|
502 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
|
|
|
503 |
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
|
|
|
504 |
|
|
|
505 |
<!-- End additional plugins -->
|
|
|
506 |
|
|
|
507 |
</div>
|
|
|
508 |
<div class="col2">
|
|
|
509 |
|
|
|
510 |
<div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
|
|
|
511 |
<div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
|
|
|
512 |
<div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
|
|
|
513 |
<div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
|
|
|
514 |
<div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
|
|
|
515 |
<div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
|
|
|
516 |
<div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
|
|
|
517 |
<div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
|
|
|
518 |
<div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
|
|
|
519 |
<div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
|
|
|
520 |
<div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
|
|
|
521 |
<div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
|
|
|
522 |
<div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
|
|
|
523 |
<div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
|
|
|
524 |
<div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
|
|
|
525 |
<div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
|
|
|
526 |
<div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
|
|
|
527 |
<div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
|
|
|
528 |
<div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
|
|
|
529 |
<div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
|
|
|
530 |
<div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
|
|
|
531 |
<div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
|
|
|
532 |
<div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
|
|
|
533 |
<div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
|
|
|
534 |
<div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
|
|
|
535 |
<div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
|
|
|
536 |
<div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
|
|
|
537 |
<div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
|
|
|
538 |
<div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
|
|
|
539 |
<div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
|
|
|
540 |
<div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
|
|
|
541 |
<div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
|
|
|
542 |
<div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
|
|
|
543 |
<div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
|
|
|
544 |
<div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
|
|
|
545 |
<div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
|
|
|
546 |
<div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
|
|
|
547 |
<div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
|
|
|
548 |
<div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
|
|
|
549 |
<div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
|
|
|
550 |
<div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
|
|
|
551 |
<div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
|
|
|
552 |
<div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
|
|
|
553 |
<div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
|
|
|
554 |
<div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
|
|
|
555 |
<div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
|
|
|
556 |
<div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
|
|
|
557 |
<div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
|
|
|
558 |
<div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
|
|
|
559 |
<div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
|
|
|
560 |
<div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
|
|
|
561 |
<div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
|
|
|
562 |
<div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
|
|
|
563 |
<div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
|
|
|
564 |
<div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
|
|
|
565 |
<div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
|
|
|
566 |
|
|
|
567 |
</div>
|
|
|
568 |
</div>
|
|
|
569 |
</div>
|
|
|
570 |
<script type="text/javascript" src="example.min.js"></script>
|
|
|
571 |
|
|
|
572 |
</body>
|
|
|
573 |
|
|
|
574 |
|
|
|
575 |
</html>
|