client-freqwatch/index2.php

   1 <html>
   2 <head>
   3 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
   4 <meta content="utf-8" http-equiv="encoding">
   5 <script src="Chart.js/Chart.js"></script>
   6 </head>
   7 <body>
   8 <?
   9   $r=open_database("freqwatch", "select count(id) as tot,freq from freqs group by freq asc limit 1000");
  10   $num=mysql_numrows($r);
  11   $skipper=50;
  12   while ($i<$num) {
  13     $tot=mysql_result($r,$i,"tot");
  14     $freq=mysql_result($r,$i,"freq");
  15     #if ($skipper==50) {
  16       $labels=$labels.'"'.$freq.'",';
  17     #  $skipper=0;
  18     #} else {
  19     #  $labels=$labels.'" ",';
  20     #}
  21     $data=$data.'"'.$tot.'",';
  22     $i++;
  23     #$skipper++;
  24     #echo $freq;
  25   }
  26   $labels=rtrim($labels,',');
  27   $data=rtrim($data,",");
  28   #$num=150;
  29 ?>
  30         <div style="width: 75%">
  31                         <canvas id="canvas" height="800" width="<? echo $num*5; ?>"></canvas>
  32                 </div>
  33
  34
  35         <script>
  36         var lineChartData = {
  37                 labels : [<? echo $labels; ?>],
  38                 datasets : [
  39                         {
  40                                 label: "My First dataset",
  41                                 fillColor : "rgba(220,220,220,0.2)",
  42                                 strokeColor : "rgba(220,220,220,1)",
  43                                 pointColor : "rgba(220,220,220,1)",
  44                                 pointStrokeColor : "#fff",
  45                                 pointHighlightFill : "#fff",
  46                                 pointHighlightStroke : "rgba(220,220,220,1)",
  47
  48                                 data : [<? echo $data; ?>]
  49                         }
  50                 ]
  51         }
  52         window.onload = function(){
  53                 var ctx = document.getElementById("canvas").getContext("2d");
  54                 window.myLine = new Chart(ctx).Line(lineChartData, {
  55                         animation: false,
  56                         scaleShowLabels: true,
  57                         pointHitDetectionRadius : 1,
  58                         showScale: false,
  59                         //scaleLineWidth: 1,
  60                         //barStrokeWidth : 0.01,
  61                         responsive : false
  62                 });
  63         //}
  64                 canvas.onclick = function(evt){
  65                         var activePoints = myLine.getPointsAtEvent(evt);
  66                         console.log(activePoints);
  67                         alert(activePoints[0].label);
  68                         // => activePoints is an array of points on the canvas that are at the same position as the click event.
  69                 };
  70         }
  71         </script>
  72 </body>
  73 </html>
  74 <?
  75 function open_database($dab,$sqlquery)
  76 {
  77   $db = mysql_connect("localhost", "freqwatch", "anyoldpasswordwilldo");
  78   if (!$db) {
  79     echo "Cant connect to server.<br>";
  80     exit();
  81   }
  82   if (! @mysql_select_db($dab)) {
  83     echo "Cant connect to DB.<br>";
  84     exit();
  85   }
  86   $result=mysql_query($sqlquery);
  87   return($result);
  88 }
  89 ?>