|
Lines 23-28
Link Here
|
| 23 |
[% FOREACH mainloo IN mainloop %] |
23 |
[% FOREACH mainloo IN mainloop %] |
| 24 |
<h1>Circulation statistics</h1> |
24 |
<h1>Circulation statistics</h1> |
| 25 |
<canvas id="circChart" width="1000" height="400"></canvas> |
25 |
<canvas id="circChart" width="1000" height="400"></canvas> |
|
|
26 |
<div id="toolbar" class="btn-toolbar"><div class="btn-group"><a id="updateChart" class="btn" href="#">Click to change to <span id="chartType">Line</span> Chart</a></div></div> |
| 26 |
[% IF ( mainloo.loopfilter ) %] |
27 |
[% IF ( mainloo.loopfilter ) %] |
| 27 |
<p>Filtered on:</p> |
28 |
<p>Filtered on:</p> |
| 28 |
<ul> |
29 |
<ul> |
|
Lines 299-305
Link Here
|
| 299 |
[% IF ( do_it ) %] |
300 |
[% IF ( do_it ) %] |
| 300 |
<script type="text/javascript"> |
301 |
<script type="text/javascript"> |
| 301 |
var ctx = $("#circChart").get(0).getContext("2d"); |
302 |
var ctx = $("#circChart").get(0).getContext("2d"); |
| 302 |
var circChart = new Chart(ctx).Bar({ |
303 |
|
|
|
304 |
var chartData = { |
| 303 |
labels: [[% FOREACH loopco IN mainloo.loopcol %]"[% loopco.coltitle_display |html %]", [% END %]], |
305 |
labels: [[% FOREACH loopco IN mainloo.loopcol %]"[% loopco.coltitle_display |html %]", [% END %]], |
| 304 |
datasets: [ |
306 |
datasets: [ |
| 305 |
[% FOREACH loopro IN mainloo.looprow %]{ |
307 |
[% FOREACH loopro IN mainloo.looprow %]{ |
|
Lines 312-320
Link Here
|
| 312 |
pointHighlightStroke: "[% loopro.highlight %]", |
314 |
pointHighlightStroke: "[% loopro.highlight %]", |
| 313 |
data: [[% FOREACH loopcel IN loopro.loopcell %]"[% loopcel.value %]", [% END %]] |
315 |
data: [[% FOREACH loopcel IN loopro.loopcell %]"[% loopcel.value %]", [% END %]] |
| 314 |
}, [% END %]] |
316 |
}, [% END %]] |
| 315 |
}, {}); |
317 |
}; |
|
|
318 |
|
| 319 |
var chartType = "Bar"; |
| 320 |
var circChart = new Chart(ctx).Bar( chartData, {}); |
| 321 |
|
| 322 |
$("#updateChart").click(function() { |
| 323 |
console.log("Updating Chart: "); |
| 324 |
|
| 325 |
// Replace the chart canvas element |
| 326 |
$('#circChart').replaceWith('<canvas id="circChart" width="1000" height="400"></canvas>'); |
| 327 |
|
| 328 |
// Draw the chart |
| 329 |
ctx = $('#circChart').get(0).getContext("2d"); |
| 316 |
|
330 |
|
| 317 |
circChart.update(); |
331 |
if ( chartType == "Bar" ) { |
|
|
332 |
new Chart(ctx).Line( chartData, {}); |
| 333 |
$('#chartType').text('Bar'); |
| 334 |
chartType = "Line"; |
| 335 |
} else { |
| 336 |
new Chart(ctx).Bar( chartData, {}); |
| 337 |
$('#chartType').text('Line'); |
| 338 |
chartType = "Bar"; |
| 339 |
} |
| 340 |
}); |
| 341 |
//circChart.update(); |
| 318 |
</script> |
342 |
</script> |
| 319 |
[% END %] |
343 |
[% END %] |
| 320 |
[% INCLUDE 'intranet-bottom.inc' %] |
344 |
[% INCLUDE 'intranet-bottom.inc' %] |
| 321 |
- |
|
|