Creating an ‘offline’ page that can be used to monitor cache hit ratio without accessing the MaxCDN control panel can be a beneficial tool for many. This article will describe how to use a PHP library to perform this task, and in this example summary reports with hourly cache hit ratio as well as overall cache hit ratio are provided in the form of a Google PieChart.
Creating a page that monitors the cache hit ratio of a CDN site can be done with the existing JSAPI that google provides as it’s quite flexible and responsive.
PHP Reporting Setup
- Assuming that PHP library has been installed and the project directory has been created, we can proceed with composing the PHP script that will hit the MaxCDN 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); ?> - HTML page that will load chart using google JSAPI and populate DIV with data:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); 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", dataType:"json", async: false }).responseText; 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}); } </script> </head> <body> <div id="chart_flow"></div> </body> </html> -
fetchjson.phpfile contents:<?php //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; ?> - And this is cropped
flow.jsonexample:{"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}]},]} - Resulting chart should look like this:
- To expand the chart a bit more, we can include this piece of code to generate HIT/MISS rate and populate another chart (you may want to use a pie chart 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: google.setOnLoadCallback(drawChart2); function drawChart2() { var jsonData = $.ajax({ url: "fetchjson2.php", dataType:"json", async: false }).responseText; 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}}}); } -
Add DIV holder of pie chart data:
<div id="chart_hitmiss"></div> -
Create the php script (
fetchjson2.php) that will load JSON data from file:<?php //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; ?> - Finally, the reports page should display our PieChart in following form:
We hope this article was helpful and as always, If there are any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support - we are available 24/7 by chat or email!