Simple data plotting, line/bar graph

Hi, I was wondering if anyone could share some code for plotting simple XY data points (line/bar graph) from a 2D array. Either with or without the canvas plugin is fine!

Thanks!

Here's a quick a dirty version.

I started making it hardcoded for a certain number of values but I think I made it flexible for any number of values, but I might have missed something.

Still it's a decent start I think.

I also used Rojo's Canvas plugin to draw the bar graph.

[attachment=0:jm3sg657][/attachment:jm3sg657]

Here's a slightly better version with a few more comments for newer users.

This version is expandable to any number of columns & the data. Within reason of course because the text that shows the values of the column won't display correctly

HTML5 Version

Hope it helps

[attachment=0:qn2ist45][/attachment:qn2ist45]

Thanks so much! Will be checking it out ASAP.

I'm doing a sport scoring app with a live 'worm' score by score display for each of 4 periods in a game. So each time there's a score, that period's graph will be updated (so I'll need to scale it).

Will let you know how it goes I hadn't used the Canvas plugin before.

Here's a a way to do a line graph, as well as putting it on a box. Didn't use canvas.

https://dl.dropboxusercontent.com/u/542 ... /plot.capx

Minor

I like how yours scales to the max value and labels the y axis. A very nice touch!

edit:

Just tried your latest one. Looks pro.

Here's a a way to do a line graph, as well as putting it on a box. Didn't use canvas.

https://dl.dropboxusercontent.com/u/542 ... /plot.capx

Minor

I like how yours scales to the max value and labels the y axis. A very nice touch!

Thanks both of you, you guys rock. Might not be able to integrate this for a few hours unfortunately!

Thanks guy's I have learnt something new from these capx. thanks again

Here's a a way to do a line graph, as well as putting it on a box. Didn't use canvas.

https://dl.dropboxusercontent.com/u/542 ... /plot.capx

Minor

I like how yours scales to the max value and labels the y axis. A very nice touch!

edit:

Just tried your latest one. Looks pro.

Thanks although your excellent canvas plugin does all the hard work <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

For completeness I've updated my version to have a line graph too. Now we have a barchart/linegraph without using the Canvas using R0J0hound capx and with the Canvas using my capx.

HTML5 Demo

And the updated capx.

[attachment=0:37d6wgmu][/attachment:37d6wgmu]

Sorry for the double post but I didn't want the new example and capx to get lost in earlier edited posts.

After tossing a coin I'm going with Minor 's solution. I just have to adjust it to allow for negative values (positive values mean the Home team is in front, negative means the Away team is in front). The values I'm plotting are HomeScore - AwayScore at each scoring event during a period. Or I could just shift them all into the positive.

something like this

http://mugpunteraustralia.files.wordpress.com/2013/04/showdown.jpg

Currently I have a separate canvas per period but they look continuous.

Edit: looking good. I decided to shift my negative data into the positive, worked well. At the moment I have a different array per period/canvas so I'm getting different scaling between graphs, so I might either switch to a single canvas or just scale the same across my arrays.

here's a WIP

[attachment=0:lmnigper][/attachment:lmnigper]