Flot chart - axis totals added to labels
Spent quite a bit of time figuring out how to add x-axis totals to each axis on the Flot chart - Flot calls these "ticks" - to display the total number of items for each year (along with the year number, which was already being displayed). Since I'm using the Flot stacks plugin to display multiple sets of data on each axis, it was a bit of a complex process.
The most time consuming part of the process was finding a "Flot-y" way to do it. The API documentation is OK, but a bit too informal for my tastes and glosses over a lot of things. After a lot of testing, debugging, and stepping through functions via the Chrome developer suite, I couldn't find anything suitable that could be achieved by native Flot functions dealing with the ticks. There are plenty of ways to format the data already in the tick (i.e. the year number in this case), but not to add data to the tick. So, I declared a global variable var yearTotals = [], and, in the success function that's triggered after the AJAX call that grabs the JSON data for the chart, I added a for loop to get the totals for each year and add them to the array:
function onDataReceived(series) {
$.each(series, function(index, value) {
var entry = new Array();
entry['label'] = index;
entry['data'] = value.data;
chartData.push(entry);
for (i = 0; i < value.data.length; i++) {
row = value.data[i];
if (!yearTotals[row[0]]) {
yearTotals[row[0]] = row[1];
} else {
yearTotals[row[0]] += row[1];
}
}
});
plotWithOptions(chartData);
}