Hi,
I want to do a business application using Graphics, like a Bar chart or Pie charts.
But I don`t see some references.
Can you help me about that?
Thanks
There is no specific API for doing charts. Bar charts would be pretty easy as Corona SDK supports rectangles as a graphic primitive type or you could do fancier ones using graphic slices and some image scaling techniques. We also supports lines and circles so you could do line charts pretty easily.
Pie charts are going to be a problem. We don’t have a flood-fill feature because we really don’t do pixel level graphics.
Hi Rob,
thanks for your return. It’s very simple create a rectangles, but I’m not certain if will be easy to adapt in the screen.
Are there samples to download or any application to see how i can do it?
Thanks
There is no specific API for doing charts. Bar charts would be pretty easy as Corona SDK supports rectangles as a graphic primitive type or you could do fancier ones using graphic slices and some image scaling techniques. We also supports lines and circles so you could do line charts pretty easily.
Pie charts are going to be a problem. We don’t have a flood-fill feature because we really don’t do pixel level graphics.
Hi Rob,
thanks for your return. It’s very simple create a rectangles, but I’m not certain if will be easy to adapt in the screen.
Are there samples to download or any application to see how i can do it?
Thanks
Hi Rob,
I have tried using Graham Ranson’s Chart.lua:
https://github.com/GrahamRanson/Charts
In the simulator I get white siluetes of the charts but not the actual chart and in his newer version:
https://github.com/GlitchGames/GGChart/tree/fd9105a5247fcd524348d59fd8d3c92d75470831
I get unexpected “End” error message.
Have you tried this? Am I doing something wrong?
There has to be a working examples of how to create charts.
Thank you
Regards
Ozan
I’ve not used Graham’s libraries myself, so I have no experience with them. You would have to ask him about your issues with this.
you should check out google’s api for charts.
you can use the HTML5 version with a webview or you can use it as a static images.
https://developers.google.com/chart/
https://developers.google.com/chart/image/docs/making_charts
Hi Rob,
I have tried using Graham Ranson’s Chart.lua:
https://github.com/GrahamRanson/Charts
In the simulator I get white siluetes of the charts but not the actual chart and in his newer version:
https://github.com/GlitchGames/GGChart/tree/fd9105a5247fcd524348d59fd8d3c92d75470831
I get unexpected “End” error message.
Have you tried this? Am I doing something wrong?
There has to be a working examples of how to create charts.
Thank you
Regards
Ozan
I’ve not used Graham’s libraries myself, so I have no experience with them. You would have to ask him about your issues with this.
you should check out google’s api for charts.
you can use the HTML5 version with a webview or you can use it as a static images.
https://developers.google.com/chart/
https://developers.google.com/chart/image/docs/making_charts
Now that Graphics 2.0 is out, I’m wondering if we can make a clean and good looking pie chart.
I tweaked the code that ricardorauber posted here: http://forums.coronalabs.com/topic/2318-graphs-charts-needed/
But it doesn’t look clean. I considered masking the whole circle after the pie chart is made (so that the curve of the circle will appear clean), but I can’t fix the jagged lines dividing the pie. Here’s what I’m seeing at the moment:
[lua]
local barRadius = 100
local barWidth = 2
local barRotation = 0
local bars = {}
for i=1,360 do
bars[i] = display.newLine(display.contentCenterX, display.contentCenterY, display.contentCenterX-barRadius, display.contentCenterY )
bars[i]:setColor( 1.0, 1.0, 1.0 )
bars[i].width = barWidth
bars[i].rotation = barRotation
barRotation = barRotation + 1
end
for i=1,59 do
bars[i]:setColor( 1.0, 0, 0 )
end
for i=60,119 do
bars[i]:setColor( 0, 1.0, 0 )
end
for i=120,179 do
bars[i]:setColor( 0, 0, 1.0 )
end
for i=180,239 do
bars[i]:setColor( 1.0, 1.0, 0)
end
for i=240,299 do
bars[i]:setColor( 1.0, 0, 1.0 )
end
for i=300,360 do
bars[i]:setColor( 0, 1.0, 1.0 )
end
[/lua]
I don’t want to use Google API for charts (assuming it requires internet connectivity to work.)
Bar charts (and probably line graphs too) are easy to make, but I don’t seem to be able to generate good pie chart.
Are there other ways to generate a clean, beautiful looking pie chart? I really don’t need anything special. Just a simple, 2D pie chart. Has anyone come up with code for creating a really nice pie chart? I’d so like to hear and learn about it.
Naomi
Actually, maybe I’ll create an image (a simple white line) that would be placed on top of where pies are divided, plus the circle mask thingy to smooth the pie chart. It’s a bit convoluted solution, but it may still do the job…
That said, if there are better ways to generate a good looking pie chart, without having to layer some helper png files on top of the chart to make it look better, I’d love to hear about it.
Naomi
This looks interesting.Tonight I’ll try giving it a go.
But basically what I have in mind would be to make the chart out of triangles (point at the center of our “circle”, and radius and color of it based on the % of that specific value), and then use our dynamic masking library to always get a smooth circle no matter the device resolution without directly preparing png and masks.
I got it to work tolerably, but there’s some sort of anti-aliasing issue.
I use simple white strip of image (90 pixels wide and 3 pixels high) to be applied as the divider, but some of them appear jagged, when the actually image does not have anything jagged about it.
I think it’s a Corona bug for rendering straight line when it is slightly angled. If this anti-aliasing issue is fixed, I should be able to have a usable pie chart. (In fact, if the anti-aliasing issue is not there, I probably don’t even need to apply image files to smooth out the lines and curves.)
I’m submitting it as a bug. Hopefully I’ll hear back from someone.
Naomi
Hey, @hachisoft, thanks for sharing your thoughts. I like your idea of putting together the pie chart with triangles and a mask, instead of doing the bazillions of lines with the mask. I might give it a go too.
That said, the dividing line with anti-aliasing issue would probably still exist. It is quite apparent when the pie is divided into 6 equal sizes. This needs to be fixed for the pie-chart to look acceptable.
Naomi
@Naomi, in that case maybe we can save a snapshot of the triangles before masking them, and apply a very slight blur effect on the resulting texture? It should alleviate the aliasing, and then the mask would do the rest.
@hachisoft, that’s an interesting idea. But… I’m not sure if I want to do the snapshot and apply some blur effect. It feels like a lot of process for something that should be simple. And I’m also not sure if blur effect would make difference. I suppose I could try applying some blur effects to the divider, which is a PNG file of white strip that sits on top of the pie chart, making it look like it’s dividing the pie, and see if it makes any difference.
Naomi
Okay so I gave it a go.
This is the function that integrates with our dynamic masks lib. (Get it and copy and paste this code into it).
ragdogLib.createPieChart = function(data) local group = display.newGroup(); local values = data.values; local mSin, mCos = math.sin, math.cos; local toRad = math.pi/180; local currAngle = -90; for i = 1, 3 do local newAngle = currAngle+values[i].percentage\*360\*0.01; local midAngle = currAngle+(newAngle-currAngle)\*.5; local shape = {0, 0, mCos(currAngle\*toRad)\*data.radius\*1.5, mSin(currAngle\*toRad)\*data.radius\*1.5, mCos(midAngle\*toRad)\*data.radius\*1.5, mSin(midAngle\*toRad)\*data.radius\*1.5, mCos(newAngle\*toRad)\*data.radius\*1.5, mSin(newAngle\*toRad)\*data.radius\*1.5}; currAngle = newAngle; local slice = display.newPolygon(group, 0, 0, shape); slice:setFillColor(unpack(values[i].color)); slice:setStrokeColor(1, 1, 1, .05); local lowerPointX, higherPointX, lowerPointY, higherPointY = 10000, -10000, 10000, -10000; for i = 1, #shape, 2 do if shape[i] \< lowerPointX then lowerPointX = shape[i]; end if shape[i] \> higherPointX then higherPointX = shape[i]; end if shape[i+1] \< lowerPointY then lowerPointY = shape[i+1]; end if shape[i+1] \> higherPointY then higherPointY = shape[i+1]; end end slice.x = lowerPointX+(higherPointX-lowerPointX)\*.5; slice.y = lowerPointY+(higherPointY-lowerPointY)\*.5; end group.x, group.y = display.contentCenterX, display.contentCenterY; display.save(group, data.name or "pie.png", true); local width, height = group.contentWidth, group.contentHeight; group:removeSelf(); group = display.newGroup(); local pie = display.newImageRect(group, data.name or "pie.png", system.DocumentsDirectory, width, height); local circle = display.newCircle(0, 0, data.radius) ragdogLib.applyMaskFromPolygon(group, circle); return group; end
Then to use it:
data = { radius = 50, name = "myPieChart.png" values = { {percentage = 30, color = {1, 1, 1}}, {percentage = 45, color = {1, 0, 0}}, {percentage = 25, color = {0, 1, 0}}, } }; --Put it in a timer ONLY if you want to do this at the very start of the app. In any other case, you can just call it without timer timer.performWithDelay(150, function() local pie = ragdogLib.createPieChart(data); pie.x, pie.y = display.contentCenterX, display.contentCenterY; end, 1);
It works as expected. Just make sure that all the percentages adds up to 100.
@Naomi, as you stated there’s aliasing. The aliasing around the circle is easily fixable, just use an image instead of our dynamic masks (the dynamic masking uses shapes, so it keeps their aliasing). For the lines, we tried with gaussian blur but the minimum setting is just too high for this purpose. Without using shapes but images at the moment nothing pops to mind, although that would surely fix the issue once and for all (:
Also in the function we’re saving the resulting shapes into a png, load it, and apply the mask on it. This last step was done to play around with the shapes as a single texture, but can be completely skipped (just remove from display.save to local circle).
Cool. @hachisoft, thanks for sharing!
About the anti-aliasing issue, even with an image file (I used PNG file), it still doesn’t work – meaning, slightly angled display object showing a PNG image of a thin rectangle ends up with jagged edges… And this happens even if we set antialias to true in config.lua
Naomi