| Index: trunk/fundraiser-statistics/fundraiser-scripts/web_reporting/templates/live_results/index.html |
| — | — | @@ -0,0 +1,122 @@ |
| | 2 | + |
| | 3 | +{% extends "base.html" %} |
| | 4 | +{% block content %} |
| | 5 | + |
| | 6 | +<h1>Live Results:</h1><br> |
| | 7 | +<h4>The plots below are representative of the latest Fundraiser results:</h4><br> |
| | 8 | + |
| | 9 | +<!-- jscript for live plots --> |
| | 10 | + |
| | 11 | +<div id="placeholder0" style="width:800px;height:600px;"></div> |
| | 12 | +<p>Donations for the latest campaigns over the last 6 hours.</p> |
| | 13 | +<br><br> |
| | 14 | +<div id="placeholder1" style="width:800px;height:600px;"></div> |
| | 15 | +<p>Donations for the latest banners over the last 6 hours.</p> |
| | 16 | +<br><br> |
| | 17 | +<div id="placeholder2" style="width:800px;height:600px;"></div> |
| | 18 | +<p>Donations for the latest landing pages over the last 6 hours.</p> |
| | 19 | + |
| | 20 | +<script type="text/javascript"> |
| | 21 | +$(function () { |
| | 22 | + |
| | 23 | + |
| | 24 | + var total_plots = 3; |
| | 25 | + |
| | 26 | + // Extract the django variables |
| | 27 | + var data = {{ data }}; |
| | 28 | + var max_data = {{ max_data }}; |
| | 29 | + var counts = {{ counts }}; |
| | 30 | + var num_elems = {{ num_elems }}; |
| | 31 | + var labels = "{{ labels }}"; |
| | 32 | + |
| | 33 | + labels = labels.split("!") |
| | 34 | + var num_label_lists = (labels.length - 1) / 2; |
| | 35 | + var new_labels = new Array(num_label_lists); |
| | 36 | + // document.write (num_label_lists); |
| | 37 | + for (i = 0; i < num_label_lists; i++) { |
| | 38 | + new_labels[i] = labels[2*i + 1] |
| | 39 | + } |
| | 40 | + labels = new_labels |
| | 41 | + |
| | 42 | + for (plot_index = 0; plot_index < total_plots; plot_index++) { |
| | 43 | + |
| | 44 | + labels[plot_index] = labels[plot_index].split("?") |
| | 45 | + // document.write ("test" + plot_index.toString()); |
| | 46 | + var all_data = new Array(num_elems[plot_index]); |
| | 47 | + for (x = 0; x < num_elems[plot_index]; x++) { |
| | 48 | + //document.write (data[plot_index][x]); |
| | 49 | + var elem = new Object(); |
| | 50 | + elem["data"] = data[plot_index][x]; |
| | 51 | + elem["label"] = labels[plot_index][x]; |
| | 52 | + all_data[x] = elem; |
| | 53 | + //document.write (data[plot_index][x]); |
| | 54 | + //document.write ("<br>"); |
| | 55 | + //document.write (labels[plot_index][x]); |
| | 56 | + //document.write ("<br><br>"); |
| | 57 | + } |
| | 58 | + |
| | 59 | + // $.plot($("#placeholder"), [{"data": [[0.0, 0.0], [2.0, 0.0], [4.0, 0.0], [6.0, 0.0], [8.0, 0.0], [10.0, 0.0], [12.0, 0.0], [14.0, 0.0], [16.0, 0.0], [18.0, 0.0], [20.0, 0.0]], "label": "empty"}, {"data": [[0.0, 0.0], [2.0, 0.0], [4.0, 0.0], [6.0, 1.0], [8.0, 1.0], [10.0, 0.0], [12.0, 0.0], [14.0, 0.0], [16.0, 0.0], [18.0, 0.0], [20.0, 0.0]], "label": "C20110603_JWJN001_US"}, {"data": [[0.0, 1.0], [2.0, 1.0], [4.0, 0.0], [6.0, 0.0], [8.0, 0.0], [10.0, 0.0], [12.0, 0.0], [14.0, 0.0], [16.0, 0.0], [18.0, 0.0], [20.0, 0.0]], "label": "20101204SB002"}], { |
| | 60 | + $.plot($("#placeholder" + plot_index.toString()), all_data, { |
| | 61 | + series: { |
| | 62 | + lines: { show: true }, |
| | 63 | + points: { show: true } |
| | 64 | + }, |
| | 65 | + grid: { hoverable: true, clickable: true }, |
| | 66 | + yaxis: { min: 0, max: max_data[plot_index] * 1.6 } |
| | 67 | + }); |
| | 68 | + //document.write ("<br><br><br><br>"); |
| | 69 | + enable_plothover("#placeholder" + plot_index.toString()); |
| | 70 | + } |
| | 71 | + |
| | 72 | + |
| | 73 | + function showTooltip(x, y, contents) { |
| | 74 | + $('<div id="tooltip">' + contents + '</div>').css( { |
| | 75 | + position: 'absolute', |
| | 76 | + display: 'none', |
| | 77 | + top: y + 5, |
| | 78 | + left: x + 5, |
| | 79 | + border: '1px solid #fdd', |
| | 80 | + padding: '2px', |
| | 81 | + 'background-color': '#fee', |
| | 82 | + opacity: 0.80 |
| | 83 | + }).appendTo("body").fadeIn(200); |
| | 84 | + } |
| | 85 | + |
| | 86 | + function enable_plothover(image_class) { |
| | 87 | + var previousPoint = null; |
| | 88 | + $(image_class).bind("plothover", function (event, pos, item) { |
| | 89 | + $("#x").text(pos.x.toFixed(2)); |
| | 90 | + $("#y").text(pos.y.toFixed(2)); |
| | 91 | + |
| | 92 | + if (item) { |
| | 93 | + if (previousPoint != item.dataIndex) { |
| | 94 | + previousPoint = item.dataIndex; |
| | 95 | + |
| | 96 | + $("#tooltip").remove(); |
| | 97 | + var x = item.datapoint[0].toFixed(2), |
| | 98 | + y = item.datapoint[1].toFixed(2); |
| | 99 | + |
| | 100 | + showTooltip(item.pageX, item.pageY, |
| | 101 | + item.series.label + " of " + x + " = " + y); |
| | 102 | + } |
| | 103 | + } |
| | 104 | + else { |
| | 105 | + $("#tooltip").remove(); |
| | 106 | + previousPoint = null; |
| | 107 | + } |
| | 108 | + |
| | 109 | + }); |
| | 110 | + } |
| | 111 | +}); |
| | 112 | +</script> |
| | 113 | + |
| | 114 | + |
| | 115 | + |
| | 116 | + |
| | 117 | +<br><br> |
| | 118 | +<u>Go to:</u> |
| | 119 | +<br><br> |
| | 120 | +<a href="https://www.mediawiki.org/">Home</a> |
| | 121 | +<br> |
| | 122 | + |
| | 123 | +{% endblock %} |
| \ No newline at end of file |