Our goal here is to have an ‘offline’ page that we can keep an eye on to monitor hits vs misses without accessing the MaxCDN control panel. This time, I’ve used php library to make it more interesting and for show-and-tell I have included only summary reports with hourly hit/miss rate and overall hit/miss rate in a google PieChart.

Yes! We will play around with existing JSAPI that google provides as it’s quite flexible and responsive.

  1. Assuming that you have installed php library and created your project directory we can proceed composing php script that will hit our API and retrieve report data:

     //Auth and load library
           require_once 'vendor/autoload.php';
           $api = new NetDNA("ALIAS", "KEY", "SECRET");
           //Fill the ‘stats’ var with data from summary reports
           $stats = $api->get('/reports/stats.json/hourly');
           //Define empty var that will be filled with hit/miss values by time chunks
           $hit = "";
           //Populate var ‘data’ with summary report in JSON format
           $data = json_decode($stats, true);
           //Creating the array populated with time stamps, hits and misses per time stamps
           foreach($data['data']['stats'] as $obj){
           $timestamp = $obj['timestamp'];
           //Don’t forget to escape quotes that are needed in final string
           $hit .= "{\"c\":[{\"v\":\"$timestamp\"},{\"v\":" . $obj['cache_hit'] . "},{\"v\":" . $obj['noncache_hit'] . "}]},";
           $hitflow = "{\"cols\":[{\"id\":\"\",\"label\":\"Time\",\"pattern\":\"\",\"type\":\"string\"},{\"id\":\"\",\"label\":\"Cache Hits\",\"pattern\":\"\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"Non-Cache Hits\",\"pattern\":\"\",\"type\":\"number\"}],\"rows\":[" . $hit . "]}";
           file_put_contents('flow.json', $hitflow);
  2. HTML page that will load chart using google JSAPI and populate DIV with data

              <script type="text/javascript" src="https://www.google.com/jsapi"></script>
              <script type="text/javascript" src="https://www.maxcdn.com/one//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
              <script type="text/javascript">    
              google.load('visualization', '1', {'packages':['corechart']});      
              function drawChart() {
               var jsonData = $.ajax({
          //fetchjson.php is a php script that will fetch the JSON data e generated using above php code
                   url: "fetchjson.php",
                   async: false
               var data = new google.visualization.DataTable(jsonData);
               var chart = new google.visualization.LineChart(document.getElementById('chart_flow'));
               chart.draw(data, {width: 1200, height: 300, lineWidth: 1, pointSize: 1.3, pointWidth: 3});
              <div id="chart_flow"></div>
  3. FETCHJSON file contents

          //Fill the ‘string’ variable with JSON data from file we used as json container populated by php //code: ‘flow.json’
          $string = file_get_contents("flow.json");
          //push JSON data out
          echo $string;
  4. And this is cropped flow.json example

    {"cols":[{"id":"","label":"Time","pattern":"","type":"string"},{"id":"","label":"Cache Hits","pattern":"","type":"number"},{"id":"","label":"Non-Cache Hits","pattern":"","type":"number"}],"rows":[{"c":[{"v":"2014-01-21 00:00:00"},{"v":2},{"v":23}]},{"c":[{"v":"2014-01-21 01:00:00"},{"v":2},{"v":52}]},
          ,{"c":[{"v":"2014-01-23 01:00:00"},{"v":0},{"v":34}]},]}
  5. Resulting chart should look like:
  6. To expand the chart a bit more, we can include piece of code to generate HIT/MISS rate and populate another chart (you may want to use PieChart for sake of clarity):

     //Define variable to hold cache hits and cache misses and fill those from previoiusly generated //JSON
           $cachehits = $data['data']['summary']['cache_hit'];
           $noncachehits = $data['data']['summary']['noncache_hit'];
           //Create data holder
           $ratio = "{\"c\":[{\"v\":\"Cache Hits\"},{\"v\":" . $cachehits . "}]},{\"c\":[{\"v\":\"Non-Cache Hits\"},{\"v\":" . $noncachehits . "}]}";
           //Concatenate data holder with column definitions
           $ratiosum = "{\"cols\":[{\"id\":\"\",\"label\":\"Cache Hit State\",\"pattern\":\"\",\"type\":\"string\"},{\"id\":\"\",\"label\":\"Number\",\"pattern\":\"\",\"type\":\"number\"}],\"rows\":[" . $ratio . "]}";
           //Save resulting JSON data in file
           file_put_contents('ratio.json', $ratiosum)
           Append following code that will create a PieChart from JSON file generate above:
           function drawChart2() {
           var jsonData = $.ajax({
           url: "fetchjson2.php",
           async: false
           var data = new google.visualization.DataTable(jsonData);
           var chart = new google.visualization.PieChart(document.getElementById('chart_hitmiss'));
           chart.draw(data, {width: 600, height: 400, is3D: 'false', title: 'Hit - Miss Ratio', pieHole: 0.0, slices: { 1: {offset: 0.2}}});
  7. Add DIV holder of piechart data:

     <div id="chart_hitmiss"></div>
  8. Of course, php script (fetchjson2.php) that will load JSON data from file:

          //Fill the ‘string’ variable with JSON data from file we used as json container populated by php //code: ‘ratio.json’
          $string = file_get_contents("ratio.json");
          //push JSON data out
          echo $string;
  9. Finally, reports page should display our PieChart in following form: