Creating Visualizations

[obsolete]

Creating Visualizations with Loggly and Python/JS

In order to output Loggly’s data into visualization, we need Python and JavaScript to communicate with one another. For this specific tutorial, we will be taking advantage of Google Chart Tools and Hoover’s API. Please make sure that you have the latest Hoover library installed. The object of this tutorial is to obtain a JSON file from a local server and visualize that data in some form using Google Charts.

For this example, we will be taking all the events in the past 10 days and plotting them on a line chart using Google Charts.

Using Python, first we need to specify where we need to grab the JSON on the Loggly servers. So as a user, we need to authenticate our id and specify what we are searching for. Using the Hoover API:

import hoover
from hoover import LogglySession
def get_data():
hoover_info = hoover.LogglySession('servername', 'username', 'password')
geekceo = hoover_info.get_input_by_name('serveronnetwork')
response = geekceo.facets(q='filter', facetby = 'whatyoursearchinginJSON' starttime='startingtime', endtime='endingtime', buckets=numberofpartitions)

We would then need a handler to handle JQuery requests for the JSON file, presumably the GET request:

class api: #the class name needs to match the name in the HTTP request or else there will be no valid data
def GET(self):
stuff = simplejson.dumps( get_data() )
return stuff

if __name__ == "__main__": app.run()

From there, we then move on to our html file which in turn makes sure to communicate the URL that we specified in our Python code and extract the necessary data through the use of JQuery:

jQuery(document).ready(function(){ $.getJSON('http://house.geekceo.com:9001/api/', function(json){
#need to parse json
}
}

According to whatever graph or chart we want, we have to build our data in a way that allows Google Charts to plot for us. In this case, we were measuring all the events that occurred in the past 10 days and visualizing that data using a Pie Chart. So we parse our data into Google’s prebuilt structure and draw our chart:

jQuery(document).ready(function(){
$.getJSON('http://house.geekceo.com/api/', function(json){
var newjson = JSON.stringify(json);
var output = json.data;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Events');
data.addRows(10);
var j = 0;
for(var i in output){
if(j > 9){
break;
}
data.setValue(j, 0,i);
data.setValue(j, 1,output[i]);
j= j+1;
}
var chart = new google.visualization.PieChart( document.getElementById('chart_div') );
chart.draw(data, {width: 500, height: 300, is3D: true, title: 'All Events in the past 10 days'});
});
});

NOTE you will need to specify a <div> id = 'chart_div' </div> in the body below in the javascript in order to display your image to your specified URL

Create a server using Python and specify its port:

python yourcode.py 9000

Finally type the URL that is linked to your HTML file into the browser and run your HTML. 

Top