This tutorial shows you how to use PYGAL plotting charts to obtain interactive visualizations of MaxCDN account performance. Plot and graph requests, HITs, MISSes, transfer size and more.

In the past we’ve played with pygooglechart, a complete Python wrapper for the Google Chart API. It was amazingly easy to implement, interactive, and easy to configure as well. Due to its practicality and success, we started testing other Python libraries. And what we found was pygal, another high quality “importable” library.

With pygal, you can use the reporting data we provide through our API to create lightweight and insightful visualizations. What pygal does is take an array of data containing [‘axis’, value]. It then plots the resulting configuration into the SVG file format, which you can import with this embed tag:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <figure>
      <embed type="image/svg+xml" src="https://www.maxcdn.com/one/chart.svg" />
    </figure>
  </body>
</html>

Pygal Installation

  1. To begin, install the pygal (assuming you already have python installed) and the MaxCDN API client:

    $ sudo pip install maxcdn
    
  2. Then install pygal:
    
    $ pip install pygal
    Downloading/unpacking pygal
      Downloading pygal-1.6.1.tar.gz (736kB): 736kB downloaded
      Running setup.py (path:/tmp/pip_build_root/pygal/setup.py) egg_info for package pygal
        
    Installing collected packages: pygal
      Running setup.py install for pygal
        changing mode of build/scripts-2.7/pygal_gen.py from 644 to 755
        
        changing mode of /usr/local/bin/pygal_gen.py to 755
    Successfully installed pygal
    Cleaning up...
    

Pygal Configuartion and Tests

  1. Create test script:

    ~$ nano report.py
    
  2. Use the following in your test script to call API and parse data into pygal chart SVG file:

    import pygal      
    from maxcdn import MaxCDN
    api = MaxCDN("ALIAS", "KEY", "SECRET")
    out = api.get('/reports/123456/stats.json/daily’)
    #define counter through json response
    count = out['data']['current_page_size']
    #define arrays for x/y columns
    timestamps = []
    hits = []
    misses = []
    transfer = []
    #loop through json response
    for i in range(0, count):
            timestamps.append(str(out['data']['stats'][i]['timestamp']))
            hits.append(int(out['data']['stats'][i]['cache_hit']))
            misses.append(int(out['data']['stats'][i]['noncache_hit']))
            transfer.append((int(out['data']['stats'][i]['size'])/(1024)))
    #initialize chart
    line_chart = pygal.Line(width=1000, height=800)
    #define title
    line_chart.title = 'MaxCDN Reports'
    #populate timestamps into x data column
    line_chart.x_labels = timestamps
    #populate y column with data
    line_chart.add('HIT', hits)
    line_chart.add('MISSes', misses)
    line_chart.add('Transfer (KB)', transfer)
    #plot to file
    line_chart.render_to_file('chart.svg')
    

Line chart visualization of MaxCDN reports for HITs, MISSes, and transfer rate using pygal.

The example above will plot the LINE chart and show the flow for requested report stats. Another common chart form is the BAR chart which can show the ratio between different segments of reporting data, such as statistic per Edge Location as shown below …

import pygal                                                                                                                                                       
from maxcdn import MaxCDN                                                                                                                                               
api = MaxCDN("ALIAS", "KEY", "SECRET")
out = api.get('/reports/123456/nodes.json/stats')
#define counter through json response    
count = int(out['data']['total'])
#define arrays for labels and data
requests = []
transfer = []
labels = []
hits = []
misses = []
#initialize chart
bar_chart = pygal.Bar(width=1000, height=800)
#define title
bar_chart.title = 'MaxCDN Reports'
#loop through json response
for i in range(0, count):
     #Define labels
        bar_chart.x_labels = labels.append(str(out['data']['stats'][i]['pop_description']))
        requests.append(int(out['data']['stats'][i]['hit']))
        transfer.append((int(out['data']['stats'][i]['size'])/(1024)))
        hits.append(int(out['data']['stats'][i]['cache_hit']))
        misses.append(int(out['data']['stats'][i]['noncache_hit']))
#populate y column with data
bar_chart.add('Requests', requests)
bar_chart.add('Transfer (KB)', transfer)
bar_chart.add('HITs', hits)
bar_chart.add('MISSes', misses)
#plot to file
bar_chart.render_to_file('chart2.svg')

Bar chart visualization of MaxCDN reports for requests, HITs, MISSes, and transfer rate using pygal.

Another chart form that’s frequently is PIE:

import pygal
from maxcdn import MaxCDN    
api = MaxCDN("ALIAS", "KEY", "SECRET")
out = api.get('/reports/123456/statuscodes.json')
#define counter through json response
count = int(out['data']['total'])
#define arrays for x/y columns
requests = []
#initialize chart
pie_chart = pygal.Pie(width=1000, height=800)
#define title
pie_chart.title = 'MaxCDN Reports'
#loop through json response and append values
for i in range(0, count):
        scode = str(out['data']['statuscodes'][i]['status_code'])
        value = int(out['data']['statuscodes'][i]['hit'])
        pie_chart.add(scode, value)
#plot to file
pie_chart.render_to_file('chart3.svg')

Pie chart visualization of MaxCDN reports for requests, HITs, MISSes, and transfer rate using pygal.

In the example above, we decided to run the status code share for a certain time frame through charting presentation via PIE chart. This chart plainly presents the ratio for summaries of all kinds.

Led by the BAR chart, you can also easily switch to RADAR (one (weird looking chart indeed!:

import pygal
from maxcdn import MaxCDN
api = MaxCDN("ALIAS", "KEY", "SECRET")
out = api.get('/reports/123456/nodes.json/stats')
#define counter through json response    
count = int(out['data']['total'])
#define arrays for labels and data
requests = []
transfer = []
labels = []
hits = []
misses = []
#initialize chart
radar_chart = pygal.Radar(width=1000, height=800)
#define title
radar_chart.title = 'MaxCDN Reports'
#loop through json response
for i in range(0, count):
    #Define labels
        labels.append(str(out['data']['stats'][i]['pop_description']))
        requests.append(int(out['data']['stats'][i]['hit']))
        transfer.append((int(out['data']['stats'][i]['size'])/(1024)))
        hits.append(int(out['data']['stats'][i]['cache_hit']))
        misses.append(int(out['data']['stats'][i]['noncache_hit']))
#populate y column with data
radar_chart.x_labels = labels
radar_chart.add('Requests', requests)
radar_chart.add('Transfer (KB)', transfer)
radar_chart.add('HITs', hits)
radar_chart.add('MISSes', misses)
#plot to file
radar_chart.render_to_file('chart4.svg')

Radadr chart visualization of MaxCDN reports for requests, HITs, MISSes, and transfer rate using pygal.

Happy Plotting!