Share Your Code
Browse Code
- All (907)
-
(94)
-
(85)
-
(44)
-
(4)
-
(42)
-
(137)
-
(21)
-
(41)
-
(13)
-
(65)
-
(151)
-
(210)
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
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.
This is awesome! What's the best way to pass a local variable into the data, label, and legend sections?
Assuming the variable is a string or number then you should be fine with doing something like this:
1 | legend = variable1 .. "|" .. variable2 .. "|" .. variable3 , |
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?
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.
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.
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
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.
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.
Cool! Thanks.
Agreed that the async will be even nicer.
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 } |
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", |
Mr. Ranson, you're site appears to be down. Is there any alternate sites to download?
It should be back up again now. My provider had some issues with one of their name servers but apparently it is solved now.
GrahamRanson, the link is still not working. Anywhere else to download it ?
You can get it from my GitHub account here - https://github.com/GrahamRanson/Charts - I will update the main post with the link too.
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?
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.
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?
Not that I know of no.
Can your component chart points and show data trends? Thanks.
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.
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...