Simple data plotting, line/bar graph

Get help using Construct 2

Post » Mon Oct 27, 2014 10:10 pm

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!
B
24
S
9
G
4
Posts: 1,646
Reputation: 6,596

Post » Mon Oct 27, 2014 11:57 pm

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.

bargraph.capx
You do not have the required permissions to view the files attached to this post.
B
46
S
23
G
7
Posts: 459
Reputation: 6,763

Post » Tue Oct 28, 2014 12:56 am

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

bargraph-editable.capx
You do not have the required permissions to view the files attached to this post.
B
46
S
23
G
7
Posts: 459
Reputation: 6,763

Post » Tue Oct 28, 2014 1:30 am

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.
B
24
S
9
G
4
Posts: 1,646
Reputation: 6,596

Post » Tue Oct 28, 2014 1:33 am

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.
B
92
S
32
G
107
Posts: 5,274
Reputation: 69,959

Post » Tue Oct 28, 2014 1:35 am

R0J0hound wrote: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!
B
24
S
9
G
4
Posts: 1,646
Reputation: 6,596

Post » Tue Oct 28, 2014 7:02 am

Thanks guy's I have learnt something new from these capx. thanks again
B
250
S
39
G
15
Posts: 1,953
Reputation: 40,623

Post » Tue Oct 28, 2014 10:04 am

R0J0hound wrote: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 :)
B
46
S
23
G
7
Posts: 459
Reputation: 6,763

Post » Tue Oct 28, 2014 11:12 am

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.

bargraph-editable-linegraph.capx


Sorry for the double post but I didn't want the new example and capx to get lost in earlier edited posts.
You do not have the required permissions to view the files attached to this post.
B
46
S
23
G
7
Posts: 459
Reputation: 6,763

Post » Tue Oct 28, 2014 11:22 pm

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
scoring_worm_WIP.png
You do not have the required permissions to view the files attached to this post.
B
24
S
9
G
4
Posts: 1,646
Reputation: 6,596


Return to How do I....?

Who is online

Users browsing this forum: Fenix18 and 64 guests