Hi, I'd like to create a chart that breaks down my yearly transactions on a monthly basis and gives me the total sale per month. I have a table with every transaction and its date. I'd like to use jquery to do this. What is the best way to go about this?
+3
A:
Take a look at Flot, which is a JS plotting library for jQuery. http://code.google.com/p/flot/ Examples: http://people.iola.dk/olau/flot/examples/
simon
2009-09-25 12:18:47
A:
I think there are two problems here:
- generating the data for the chart from the data you have and
- selecting the chart tool itself.
It looks like you want data for a line chart or a column chart where x-values are months and y-values are aggregates of sales per month.
If the transaction data currently is printed to a HTML table, you'll need to scrape it and aggregate the monthly sales values in javascript to an array, [[x1, y1], [x2, y2], ...], and pass this new array to the jQuery chart plugin of your choice.
If the transaction data is in a database table, you should use SQL for aggregation and make the resultset accessible to the chart plugin. Easiest way to do this is to print the results server-side to a javascript variable value, using an inline expressions like:
var data = <%= SalesPerMonth() %>;
where SalesPerMonth() is a string-valued server-side function returning [[x1, y1], [x2, y2], ...]
On the jQuery chart plugins, I recently evaluated a bunch of chart controls, and really liked flot for time-series charts. Another option is jqPlot, it has nice looking charts with data point highlighting too. But in the end I didn't choose a jQuery plugin but FusionCharts Free, which is a Flash charting component.
If any javascript charting tool goes, not just jQuery plugins, you should check Emprise Javascript Charts and read the Steve Reynold's other article, 5 Javascript Chart Alternatives.
mika
2009-09-27 11:27:48