summaryrefslogtreecommitdiffstats
path: root/application/views/scripts/statistics/category.phtml
blob: db17b63e8b9355eaf68f8bdd34f8237317e05800 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<h1>Statistics</h1>
<h2>Which categories of events are used?</h2>

<link
	rel="stylesheet" type="text/css"
	href="/media/css/jquery.jqplot.min.css" />

<select id="poolselectbox" name="PoolSelectbox"
	onclick="setPoolIDtmp();" onChange="fetchPoolEvents();">
	<option value="default">Please choose a Pool</option>
	<option value="all">All Pools</option>
</select>

<script>

//fetch all poolevents of the selected #poolselectbox value
function fetchPoolEvents() {
  poolID = $("#poolselectbox option:selected").val();
  plot();
}

function setPoolIDtmp() {
    poolIDtmp = $("#poolselectbox option:selected").val();
  }

function plot() {
	poolID = $("#poolselectbox option:selected").val();
  $.get("/statistics/categoryplot/poolID/" + poolID, function(data) {
		    if(data.dataBar == '' && poolID != 'default') {
		        $( "#noEventsDialog" ).dialog('open');
		        $('#plotBar').empty();
		        $('#plotPie').empty();
		        } else if (poolID == 'default') {
		    	  $('#plotBar').empty();
		        $('#plotPie').empty();
		      } else refreshPlot(data.dataBar, data.dataPie, data.color);
		  }, "json");
}

function refreshPlot(dataBar, dataPie, color) {
	$('#plotBar').empty();
	$.jqplot('plotBar', dataBar, {
        seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            varyBarColor : true
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    },
    seriesColors: color,
    highlighter: { show: false }
    });
	$('#plotPie').empty();
	$.jqplot('plotPie', dataPie,
	                {
	                  seriesDefaults: {
	                    // Make this a pie chart.
	                    renderer: jQuery.jqplot.PieRenderer,
	                    rendererOptions: {
	                      // Put data labels on the pie slices.
	                      // By default, labels show the percentage of the slice.
	                      showDataLabels: true,
	                      varyBarColor : true
	                    }
	                  },
	                  seriesColors: color
	                });
}

$(document).ready(function(){

	 //fetch poollist from pbs database
	  $.get("/event/getpoollist/", function(getpoollistresult){
	    $("#poolselectbox").append(getpoollistresult);
	    poolIDtmp = $("#poolselectbox option:selected").val();
	    fetchPoolEvents();
	    });
});

$(function() {
    $( "#noEventsDialog" ).dialog({
            autoOpen: false,
            width: 600,
      modal: true,
      title: "No Events",
            buttons: { 
              "OK": function() { 
                $(this).dialog("close");
              }
            },
      open: function () {
                $(".ui-dialog-titlebar-close").hide();
                //$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
            }
    });
  }); 

</script>

<div>
<div id="plotBar" class="spalte"
	style="height: 300px; width: 350px;"></div>
<div id="plotPie" class="spalte"
	style="height: 300px; width: 350px;"></div>
</div>

<!-- no events -->
<div id="noEventsDialog" style="display: none">
<p>There are no events in this pool to plot a statistic.</p>
</div>