In the recent railscasts, Ryan Bates has shown us the usage of Highcharts and some other open-source client-side JavaScript libraries to generate beautiful charts with no load on the server. A beautiful alternative solution to Gruff, Flash chart and other plugins and gems that depend on Rmagick or Flash and are generated on the server. Also associating events with the charts is also easy. Some of the other features provided by Highcharts are explored here.
If you want to see the demo directly, please click http://hollow-day-51.heroku.com/
A very important facility in Highcharts is that a function can be called where a certain data-point on the Graph is clicked, or say simultaneously many points on the graph can be selected using the Ctrl key and then a function can be called on them.
Amongst many other options, we can chose to select points on the chart and then get their values. Later these values can be passed to a function for further processing. plotOptions option of the Chart allows us to specify if the point can be selected. Following is a small demo of the above mentioned facility of Highcharts to click on a specific point and perform some action. The demo developed here shows total score according to month and onclick on any month’s data it re-renders the graph to show score during that particular month.
So I create a graph with the month-wise total scores as follows
[source language=”javascript”]
var chart = new Highcharts.Chart({
chart: {
renderTo: ‘chart’
},
title: {
text: ‘Monthly Average Marks’
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function() {
show_month_data(this.category);
}
}
}
}
},
xAxis: {
categories: <%= month_names.inspect %>
},
series: [{
data: <%= sum_by_month.inspect %>
}]
});
[/source]
On-click of the points call a function which makes ajax call to find the particular months data and re-render the graph passing the specified month’s data for the newly generated month-specific graph.
[source language=”javascript”]
function show_month_data(month){
$.ajax({
type: ‘get’,
url: ‘/users/get_month_data’,
dataType: ‘script’,
data: ‘month=’ + month
});
}
[/source]
Hope you find this useful.
