A short while into writing code for the Loggly interface we decided that we needed some eye candy. Given my background in visualization, I was keen on providing our users with an experience that helps them understand their data in an intuitive way.
Over the last few years I’ve been looking into a ton of visualization libraries for the Web. In the past, if you had asked me what library to use for generating charts on your Web site, I would have said, “Use Flash”. While there are a number of interesting Flash libraries out there, the landscape has shifted significantly in the last year. Everyone is moving to JavaScript. After some research, I opted to use a JavaScript charting library called HighCharts. I tried a bunch of other canvas-based libraries, but let me tell you without hesitation, HighCharts rocks.
I am going to show you how we are using HighCharts and how I implemented zooming to dynamically reload more event data on the fly. With any charting library, if you keep zooming in on a chart, it will not progressively load more detailed data. At detailed zoom levels you end up with a small range of data in your graph. Basically if you view a day’s data first, and then zoom into a specific minute, you would only see one data point.
To start, here’s the JavaScript I use to display a chart:
var parse_date = function(data) {
var result = [];
$.each(data, function(key, value) {
var re = new RegExp(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)(?:\.(\d+))?/);
var date = re.exec(key);
if (date[7] == undefined) {date[7]=0;}
var real_date = Date.UTC(date[1], parseInt(date[2])-1,date[3],date[4],date[5],date[6],date[7]);
result.push([real_date, value]);
});
return result;
}
chart = new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'activity',
defaultSeriesType: 'area',
margin: [10, 20, 40, 55],
zoomType: "x",
events: {
selection: function(event) {
// change the time frame to be searched
var start = Highcharts.dateFormat('%Y-%m-%dT%H:%M:%SZ', event.xAxis[0].min);
var end = Highcharts.dateFormat('%Y-%m-%dT%H:%M:%SZ', event.xAxis[0].max);
$.ajax({ type: "GET", url: "http://subdomain.loggly.com/api/search/?" \
+ "q=inputname:logglyapp&starttime="+start+"&endtime="+end \
+ "&facets=True&buckets=24",
success: function(data) {
chart.xAxis[0].setExtremes();
chart.series[0].setData(parse_date(data));
// fix the reset zoom button
$('.highcharts-toolbar').click(resetZoom);
},
error: function(req, text, error) {
$("#err").html("Reload error!");
}
});
}
}
},
xAxis: { title: { text: 'Time' }, type: 'datetime' },
yAxis: { title: { text: '# Events' }, min:0,
plotLines: [{ value: 0, width: 1, color: '#808080' }]
},
tooltip: { formatter: function() {
return Highcharts.dateFormat('%B %e %Y %H:%M:%S', this.x) + '
'+
''+this.y+' Events' }},
plotOptions: {
area: {
dataParser: parse_date,
}
},
series: [{ id: 1, name: 'search',
dataURL: 'http://subdomain.loggly.com/api/search/'
+ '?q=inputname:logglyapp&facets=True'}],
title: { text: 'traffic last 24 hours' }
});
var reset_zoom = function() {
// requery for the original data:
$.ajax({ type: "GET", url: "http://subdomain.loggly.com/api/search/"
+ "?q=inputname:logglyapp&facets=True",
success: function(data) {
chart.toolbar.remove('zoom');
chart.xAxis[0].setExtremes();
chart.get(1).setData(parse_date(data));
},
error: function(req, text, error) {
$("#err").html("Loading error!");
}
});
}
});
Let’s have a quick look at the code. There are two things I want to communicate here: 1. The code I used to display a HightChart graph and 2. The way I am using Loggly’s APIs to query the data.
I mentioned the special zooming that I implemented. Take a look at lines 20 to 39. This is the function that handles zooming, and it is where I am reloading the more detailed data. I set the new start and end dates (lines 23 and 24) and then I am querying the Loggly API with the new timeframe (lines 25 to 27). Upon success – this is important – I am using the chart.series[0].setData() method to set the new data for the chart. The next line overwrites the default button or a link that lets the user zoom out again (lines 32). Note: because you are implementing your own zoom, the default “reset zoom” button from HighCharts will not work anymore and you have to implement your overwrite it with your own function to reset the chart.
The function dealing with the reset functionality is on lines 59 to 72. It does nothing else than query the Loggly API for the original data (I am passing no time parameters) and setting the data just like the previous call. The other thing you have to do is in lines 64 where you need to remove the HighCharts default “reset zoom” link and reset the extremes (line 65).
Moving on, we’ll briefly discuss the way I’m using the Loggly API. If you’d like to use it, you need an account with us. We are currently in private beta, therefore you will need us to give you access to the beta program in order to do so. Email if you want an account to play around with! Back to the code. Make sure you replace the with your actual subdomain. Now that this is out of the way, you can query the API by simply making a GET request to: /api/search. You pass the q parameter with your query. In my example I am getting all the data from my input with the name logglyapp. To get timeline data, you’ll need to pass the parameter facets=True into the call. This will give you counts for time buckets.
To make everything work together, you need one more piece: the date_parse function. You need this part because the Loggly API returns the data with real human readable timestamps and HighCharts wants UTC encoded timestamps. The function on lines 1 to 11 takes care of converting the time for you. Just copy it.
I hope this was useful. Let us know if you are having trouble with any of this. We are looking forward hearing about your graphing endeavors.
If you look at my del.icio.us feed, you’ll find a bunch more visualization and charting links.
