views/index.tt

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4 <head>
   5 <meta http-equiv="Content-type" content="text/html; charset=[% settings.charset %]" />
   6 <title>charts</title>
   7 <link rel="stylesheet" href="[% request.uri_base %]/css/style.css" />
   8
   9 <!-- jqPlot Libraries -->
  10 <script language="javascript" type="text/javascript"
  11  src="[% request.uri_base %]/javascripts/jqplot/jquery.min.js"></script>
  12 <script language="javascript" type="text/javascript"
  13  src="[% request.uri_base %]/javascripts/jqplot/jquery.jqplot.min.js"></script>
  14 <script type="text/javascript"
  15  src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.json2.min.js"></script>
  16
  17 <script type="text/javascript"
  18  src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
  19 <script type="text/javascript"
  20  src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  21
  22 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
  23 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  24 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  25
  26 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
  27
  28
  29 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
  30 <script type="text/javascript" src="[% request.uri_base %]/javascripts/jqplot/plugins/jqplot.cursor.min.js"></script>
  31
  32
  33 <link rel="stylesheet" type="text/css"  href="[% request.uri_base %]/javascripts/jqplot/jquery.jqplot.css" />
  34 <link rel="stylesheet" type="text/css"  href="[% request.uri_base %]/javascripts/jqplot/jquery.jqplot.min.css" />
  35
  36
  37 <!-- Script to update chart -->
  38 <script language="javascript" type="text/javascript"
  39  src="[% request.uri_base %]/javascripts/update_chart.js"></script>
  40
  41 <script>
  42
  43 function get_data(){
  44     $.ajax({
  45         url: '/info/sites',
  46         dataType: 'json',
  47         success: function (data) {
  48             var i;
  49             for (i=0;i<data.sites.length;i++){
  50                 $('#home_wiki').append($('<option>', {
  51                     value: data.sites[i],
  52                     text: data.sites[i]
  53                 }));
  54             }
  55         }
  56     });
  57
  58     var start_year = 2005;
  59     var end_year = new Date().getFullYear();
  60     var years = [];
  61
  62     for (i=0; i<=end_year - start_year; i++){
  63         years.push(start_year + i);
  64     }
  65
  66     // alert(years);
  67     var i;
  68     for (i=0;i<years.length;i++){
  69         $('#start_year').append(
  70             $('<option>', {value: years[i],text: years[i]})
  71         );
  72         $('#end_year').append(
  73             $('<option>', {value: years[i],text: years[i]})
  74         );
  75     }
  76
  77 /*
  78 $('#start_year').change( function () {
  79     $("#end_year > option").each(function() {
  80         if (this.value < $('#start_year :selected').text()) {
  81             this.disabled = 'true';
  82         }
  83     });
  84 });
  85 */
  86
  87
  88 }
  89
  90
  91 </script>
  92 </head>
  93 <body onload="get_data();">
  94
  95 <p>AT <select id="home_wiki"></select> FROM <select id="start_year"></select>
  96  TO <select id="end_year"></select> EVERY <input type="text" id="interval"> DAYS.
  97 <button onclick="
  98 var start_year = $('#start_year').val();
  99 var end_year = $('#end_year').val();
 100 var interval = $('#interval').val();
 101 var jsonurl = '/chart/' + start_year + '/' + end_year + '/' + interval + '/' + $('#home_wiki').val();
 102
 103 $('#chartdiv').empty();
 104
 105 $.ajax({
 106     url: jsonurl,
 107     dataType: 'json',
 108     success: function(data) {
 109         var max_y = Math.max.apply(Math, data.map(function(i) {
 110             return i[1];
 111         }));
 112
 113         var tick_interval = 5*Math.pow(10,(Math.floor(Math.log(max_y)/Math.log(10))-1));
 114         var max_y = Math.ceil(max_y,tick_interval);
 115
 116         $.jqplot('chartdiv', [data], {
 117             title: 'Wikinews month-before publish statistics',
 118             axes: {
 119                 xaxis: {
 120                     renderer: $.jqplot.DateAxisRenderer,
 121                     tickOptions: {
 122                       formatString:'%Y-%m',
 123                       fontSize: '15pt'},
 124                     min: start_year+'-01-01',
 125                     tickInterval: '6 months',
 126                 },
 127                 yaxis: {
 128                    max:max_y,
 129                    min:0,
 130                    tickInterval: tick_interval,
 131                     tickOptions: {
 132                       fontSize: '15pt'},
 133                 }
 134             },
 135
 136           highlighter: {
 137             show: true,
 138             sizeAdjust: 7.5,
 139             tooltipLocation: 's',
 140           },
 141           cursor: {
 142             show: false
 143           }
 144
 145         });
 146
 147     },
 148 });
 149
 150 ">
 151 Show
 152 </button></p>
 153
 154 <div id="chartdiv" style="position:static;height:300px;width:900px;background-color:#eeeeee;"></div>
 155
 156
 157 <div id="footer">
 158 Powered by <a href="http://perldancer.org/">Dancer</a> [% dancer_version %]
 159 </div>
 160 </body>
 161 </html>