CODEWITHSUNDEEP
javascriptjquerycharts
rashcroft1
rashcroft1

Reputation:

creating charts in jquery

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?

Upvotes: 1

Views: 3080

Answers (2)

mika
mika

Reputation: 6972

I think there are two problems here:

  1. generating the data for the chart from the data you have and
  2. 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.

Upvotes: 1

simon
simon

Reputation: 12922

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/

Upvotes: 4

Related Questions