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="/chart.svg" />
</figure>
</body>
</html>Installation
- To begin, install the MaxCDN API client (assuming you already have python installed):
$ sudo pip install maxcdn - 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...
Configuration and Tests
-
Create test script:
~$ nano report.py - 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')
The example above will plot the LINE chart and show the flow for the 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')
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')
In the example above, we decided to run the status codeshare 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')
Happy Plotting!
If you have any questions about the content of this article, please feel free to reach out to the Support Team for assistance, we're available 24/7 for your convenience.