← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to statistics/statistics.js

  • Committer: Keith Hughitt
  • Date: 2012-06-12 20:18:46 UTC
  • Revision ID: keith.hughitt@gmail.com-20120612201846-k3nm2g2sznpfumhc
Added latest movies page

Show diffs side-by-side

added added

removed removed

Lines of Context:
statistics/statistics.js
 
1
/**
 
2
 * Helioviewer Usage Statistics Functions
 
3
 * 2011/02/09
 
4
 */
 
5
 
 
6
/**
 
7
 *  Fetches the usage statistics for the specified time interval and displays summary text and graphs
 
8
 *  
 
9
 *  @param timeInterval The time interval or resolution for which the usage statistics should be displayed, e.g.
 
10
 *                      hourly, daily, weekly, etc.
 
11
 *  @return void
 
12
 */
 
13
var getUsageStatistics = function(timeInterval) {
 
14
    $.getJSON("../api/index.php", {action: "getUsageStatistics", resolution: timeInterval}, function (response) {
 
15
        displayUsageStatistics(response, timeInterval);
 
16
    });
 
17
};
 
18
 
 
19
/**
 
20
 * Handles the actual rendering of the usage statistics for the requested period
 
21
 * 
 
22
 * @param data          Usage statistics
 
23
 * @param timeInterval  Query time interval
 
24
 * 
 
25
 * @return void
 
26
 */
 
27
var displayUsageStatistics = function (data, timeInterval) {
 
28
    var pieChartHeight, barChartHeight, barChartMargin, summary, max;
 
29
 
 
30
    // Determine how much space is available to plot charts
 
31
    pieChartHeight = Math.min(0.4 * $(window).width(), $(window).height());
 
32
    barChartHeight = Math.min(150, pieChartHeight / 3);
 
33
    
 
34
    // Overview text
 
35
    summary = data['summary'];
 
36
    displaySummaryText(timeInterval, summary);
 
37
 
 
38
    // Create summary pie chart
 
39
    createPieChart('pieChart', summary, pieChartHeight);
 
40
 
 
41
    // Create bar graphs for each request type
 
42
    createColumnChart('takeScreenshot', data['takeScreenshot'], 'Screenshot', barChartHeight, "#8e305c");
 
43
    createColumnChart('buildMovie', data['buildMovie'], 'Movie', barChartHeight, "#5d8f31");
 
44
    createColumnChart('getJPX', data['getJPX'], 'JPX', barChartHeight, "#315d8f");
 
45
    
 
46
    // Spreads bar graphs out a bit if space permits
 
47
    barChartMargin = Math.round(($("#visualizations").height() - $("#barCharts").height()) / 6);
 
48
    $(".columnChart").css("margin", barChartMargin + "px 0");
 
49
}
 
50
 
 
51
/**
 
52
 * Displays summary text to be shown at the top of the usage statistics page
 
53
 * 
 
54
 * @param timeInterval  Time interval for which the statistics are shown
 
55
 * @param summary       Total counts for each type of request
 
56
 * 
 
57
 * @return string HTML for the overview text block
 
58
 */
 
59
var displaySummaryText = function(timeInterval, summary) {
 
60
    var humanTimes, when, html;
 
61
 
 
62
    // Human readable text for the requested time intervals
 
63
    humanTimes = {
 
64
        "daily"  : "two weeks",
 
65
        "weekly" : "two months",
 
66
        "monthly": "year",
 
67
        "yearly" : "three years"
 
68
    };
 
69
    
 
70
    when = humanTimes[timeInterval];
 
71
    
 
72
    // Generate HTML
 
73
    html = '<span id="when">During the last <b>' + when + '</b> Helioviewer.org users created</span> ' +
 
74
           '<span id="numScreenshots" class="summaryCount">' + summary['takeScreenshot'] + ' screenshots</span>, ' +
 
75
           '<span id="numMovies" class="summaryCount">' + summary['buildMovie'] + ' movies</span>, and ' +
 
76
           '<span id="numJPXMovies" class="summaryCount">' + summary['getJPX'] + ' JPX movies</span>.';
 
77
 
 
78
    $("#overview").html(html);
 
79
    
 
80
};
 
81
 
 
82
/**
 
83
 * Creates a bar chart representing the frequency of requests for the specified type across time
 
84
 * 
 
85
 * @param id        Id of the dom element where bar chart should be placed
 
86
 * @param rows      Data rows
 
87
 * @param desc      Description ...
 
88
 * @param height    Height of the bar chart
 
89
 * @param color     Color to use for the bars
 
90
 * 
 
91
 * @return void
 
92
 */
 
93
var createColumnChart = function (id, rows, desc, height, color) {
 
94
    // Build datatable
 
95
    var data = new google.visualization.DataTable();
 
96
    data.addColumn('string', 'Time');
 
97
    data.addColumn('number', desc);
 
98
    data.addRows(rows.length);
 
99
 
 
100
    // Set datatable values
 
101
    row = 0;
 
102
    $.each(rows, function (i, pair) {
 
103
        // Grab key and value from the pair
 
104
        for (key in pair) {
 
105
            data.setValue(row, 0, key);
 
106
            data.setValue(row, 1, pair[key]);                         
 
107
        }
 
108
        row++;
 
109
    });
 
110
 
 
111
    $("#barCharts").append('<div id="' + id + 'Chart" class="columnChart"></div>');
 
112
 
 
113
    chart = new google.visualization.ColumnChart(document.getElementById(id + "Chart"));
 
114
    chart.draw(data, {
 
115
        height: height,
 
116
        colors: [color],
 
117
        legend: 'none',
 
118
        title: 'Number of ' + desc + ' requests',
 
119
        hAxis: {slantedText: true}
 
120
    });
 
121
};
 
122
 
 
123
/**
 
124
 * Creates a pie chart to show proportion of each request type made
 
125
 *  
 
126
 * @param id        Id of the dom element where pie chart should be placed
 
127
 * @param totals    Array containing counts for each type of query
 
128
 * @param size      Length of each side of the graph
 
129
 * 
 
130
 * @return void
 
131
 */
 
132
var createPieChart = function (id, totals, size) {
 
133
    var chart, width, data = new google.visualization.DataTable();
 
134
 
 
135
    data.addColumn('string', 'Request');
 
136
    data.addColumn('number', 'Frequency of requests');
 
137
 
 
138
    data.addRows(3);
 
139
 
 
140
    data.setValue(0, 0, 'Screenshots');
 
141
    data.setValue(0, 1, totals['takeScreenshot']);
 
142
    data.setValue(1, 0, 'Movies');
 
143
    data.setValue(1, 1, totals['buildMovie']);
 
144
    data.setValue(2, 0, 'JPX Movies');
 
145
    data.setValue(2, 1, totals['getJPX']);
 
146
 
 
147
    chart = new google.visualization.PieChart(document.getElementById(id));
 
148
    chart.draw(data, {width: size, height: size, colors: ["#8e305c", "#5d8f31", "#315d8f"], title: "Frequency of requests"});
 
149
};