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 |
- |
|
|