Share Your Code

Charts

Posted by GrahamRanson, Posted on February 20, 2011, Last updated January 13, 2012

GitHub URL: 
https://github.com/GrahamRanson/Charts

Charts is a really simple module that wraps up the Google Charts API, currently only Pie charts and QR codes are supported however I can and will add more. It just takes time.

Creating the charts is simple, a QR code can be generated like this:

1
2
3
4
5
6
7
8
9
10
11
local qrCode = charts.newChart
{ 
        type = "qr",
        data = "Corona Rocks!",
        width = 100,
        margin = 1,
        background = "bg,s,FFFF00",
        errorCorrectionLevel = "L",
        x = 20,
        y = 20
}

And a Pie Chart like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
local pie = charts.newChart
{
        type = "pie",
        title = "Android Distribution - Percent",
        legend = "3.9|6.3|31.4|57.6|0.8",
        legendPosition = "r",
        width = 320,
        height = 200,
        labels = "Android 1.5|Android 1.6|Android 2.1|Android 2.2|Android 2.3",
        data = "t:3.9,6.3,31.4,57.6,0.8",
        mode = "2d",
        dataColours = "C4DF9B|AFD377|9AC653|84BA2F|6FAD0C",
        scale = {0, 100},
        margins = {20, 0, 0, 20},
        x = 0,
        y = 130
}

The hardest part is understanding all the various parameters, it's worth looking through the API docs for those - http://code.google.com/apis/chart/docs/gallery/chart_gall.html

More info and the download can be found on my site http://grahamranson.co.uk/lib.php?id=4


Replies

BeyondtheTech
User offline. Last seen 4 weeks 2 days ago. Offline
Joined: 14 Apr 2010

Great stuff. Now, I gotta find some fun uses of it!

If only we could combine some fun uses of QR codes, like taking the result of media.Camera and send up an image of a captured QR code to translate back to text to parse...

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

Hopefully there are a few, and if you find one and need a specific chart type implemented give me a shout and I will add it for you. (time permitting naturally :-) )

I made it as I wanted the QR stuff and then thought that I really had to add at least one other chart type, if we could read QR codes that would be fantastic.

Thinking about it, there probably is a webservice somewhere that allows the posting of a QR image that will translate it and return the result.

benny.gortez
User offline. Last seen 2 years 9 weeks ago. Offline
Joined: 13 Mar 2011

This is awesome! What's the best way to pass a local variable into the data, label, and legend sections?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

Assuming the variable is a string or number then you should be fine with doing something like this:

1
legend = variable1 .. "|" .. variable2 .. "|" .. variable3 ,

benny.gortez
User offline. Last seen 2 years 9 weeks ago. Offline
Joined: 13 Mar 2011

Yep. Easy enough. I was trying to enclose the data line with {}'s, but it was simpler than that -
"t:" .. variable1 .. "," .. variable2 ,

I keep being surprised by how simple Lua is!

Have you thought about adding support for line charts? I've been looking through the Google API, and it's amazing all the options they have! In your charts.lua file you're passing the information through to google in the format it wants and then downloading the chart right. The function newPie(params) seems generic enough to work with other types but in my main.lua when I changed type = "lc" I get nothing. How much needs to be done to accept new chart types?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

I would need to write a new function for line charts to properly format the data, I will give it a go now and get back to you.

benny.gortez
User offline. Last seen 2 years 9 weeks ago. Offline
Joined: 13 Mar 2011

Wow! Thanks for the quick response Graham! Do you have a virtual tip jar or anything? This charts module is going to be a huge help.

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

Done :-) Version 0.2 now allows for Line charts, there may be some teething issues with some of the paramaters so if you run into any issues just give me a shout.

http://grahamranson.co.uk/downloads/charts/Charts0.2.zip

If you do feel like donating anything, which would be awesome but by no means necessary, feel free to do so here - http://monkeydeadstudios.com/donate.php

jamesguitar3
User offline. Last seen 3 years 10 weeks ago. Offline
Joined: 20 Jan 2011

Hi GrahamRanson,

Great work!

I am trying to use your Chart, but don't know how can I remove the displayed charts from the screen later.

I noticed you tried to return the display.loadRemoteImage to chart.image, but it doesn't seem to get the "display object" for some reason.

In the code below, the chart.image wil get nil.

1
chart.image = downloadChart(chart)

Any idea? Thank you.

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

I have just updated the code to use syncronous calls to download the images, it is a quick fix but will allow you to then remove the object just regular code like:

1
2
chart.image:removeSelf()
chart.image = nil

Version 0.3 is available here - http://grahamranson.co.uk/downloads/charts/Charts0.3.zip

This in only a quick fix though, async would be nicer.

jamesguitar3
User offline. Last seen 3 years 10 weeks ago. Offline
Joined: 20 Jan 2011

Cool! Thanks.

Agreed that the async will be even nicer.

jamesguitar3
User offline. Last seen 3 years 10 weeks ago. Offline
Joined: 20 Jan 2011

Hi GrahamRanson,

I have another question in using the Line chart.
How to show the y-axis label? ex :1 -1000
I used the labels for display the x-axis, but couldn't find a way to show the y-axis.
I found this on the Google API.

chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

And I try to replace your &chl with &chxl in the chart.url, and input the x,y axis stuff into the params.label by following the format above, but that didn't work.

Any idea? See below for what I am trying to do. Thank you~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
local line = charts.newChart
        {
                type = "line",
                mode = "standard",
                title = "Data amount per Month in 2011",
                legend = "Unit: bottle",
                legendPosition = "b",           
                labels = "Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec",
                dataColours = "FF0000",
                data = "t:"..tempData[1]..","..tempData[2]..","..tempData[3]..","..tempData[4]..","
                                ..tempData[5]..","..tempData[6]..","..tempData[7]..","..tempData[8]..","
                                ..tempData[9]..","..tempData[10]..","..tempData[11]..","..tempData[12],
                width = 320,
                height = 150,
                scale = {0, 100},
                margins = {20, 0, 0, 20},
                x = -10,
                y = 230
        }

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

I have just uploaded a new version - http://grahamranson.co.uk/downloads/charts/Charts0.4.zip - you should now be able to use the following paramaters:

1
2
3
axis = "x,y",
axisLabels = "0:|Jan|Feb|March|April|May|1:|Min|Mid|Max",
axisLabelPositions = "1,10,50,100",

ryan.d.tuck
User offline. Last seen 2 years 51 weeks ago. Offline
Joined: 9 Jun 2011

Mr. Ranson, you're site appears to be down. Is there any alternate sites to download?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

It should be back up again now. My provider had some issues with one of their name servers but apparently it is solved now.

Taruga
User offline. Last seen 9 weeks 5 days ago. Offline
Joined: 17 Oct 2010

GrahamRanson, the link is still not working. Anywhere else to download it ?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

You can get it from my GitHub account here - https://github.com/GrahamRanson/Charts - I will update the main post with the link too.

tech-staff
User offline. Last seen 2 years 6 weeks ago. Offline
Joined: 29 Dec 2011

I have a problem with displaying multiple charts on the same screen. Im using the director class to transition between screen. In the new() method of my display screen i'm calling two modules that contain my two graphs. 2 graphs are being displayed however they are always the same graph twice not each individual graph. I did notice that if i change one graph to be 3d and the other to 2d then it works just fine. Any ideas?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

It sounds like the chart image downloaded from Google is being overwritten by the second chart, try putting in a small delay between creation calls and see if that helps.

rauls4
User offline. Last seen 1 day 22 hours ago. Offline
Joined: 28 Apr 2010

This looks great but it seems to need a live connection to Google's servers. Is there any way to embed the Google chart generating code so it can work as a standalone function?

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

Not that I know of no.

staytoooned
User offline. Last seen 1 day 20 hours ago. Offline
Joined: 8 Sep 2010

Can your component chart points and show data trends? Thanks.

GrahamRanson
User offline. Last seen 23 weeks 6 days ago. Offline
Joined: 29 Mar 2010

All it really does is pass the data along to Google and then display the returned image. In theory it can do any chart that Google allows, it will just need them added in.