Hello guys,
I need to build an application that have some charts. For the standard ones I can use display.newLine() well but my customer wants pizza style graph like this:
http://blogs.guardian.co.uk/technology/appleshare.001.jpg
Does anybody have any idea on how to do it? [import]uid: 8556 topic_id: 3332 reply_id: 303332[/import]
Well, here is a dirty but absolutely viable way to implement pie-charts in Corona:
Make a function that draws lines. As arguments you can have the dimensions for the center of the pie and the length of each line (the radius of the circle/pie). Also, an additional argument will be a table with the percentages for each item.
For each item calculate the arc you need (x=itemPercent*360 degrees). Begin drawing lines that start from the center and end at “length”. The first line will be a horizontal one (degrees=0). For the next lines, set centerleft reference point for each line and rotate it by 1 degree, after you draw it. Then check to see if rotationOfCurrentLine - rotationOfLastLineOfPreviousItem is greater than arcDegreesForThisItem. If yes, finish with this item and start drawing the next one.
For the lines of each item, use a different color (from a table with 10+ colors) or whatever. You can set alpha=0.5 for the lines and place an image of a textured pie bellow the lines-group to add the feeling of detail on the pie-segment. Also make the first line of each item dark-colored to visually emphasize the individuality of the items.
http://en.wikipedia.org/wiki/Circle
PS: don’t forget to remove all these (360) objects onNextScreen() [import]uid: 7356 topic_id: 3332 reply_id: 10003[/import]
pieChart=function(startAngle,finishAngle)
pie=display.newCircle(160,240,100)
pie:setFillColor(255,255,255)
startx = ((pie.stageWidth/2)+100*math.cos(startAngle*math.pi/180)
starty = ((pie.stageHeight/2)+100*-math.sin(startAngle*math.pi/180)
finishx = ((pie.stageWidth/2)+100*math.cos(finishAngle*math.pi/180)
finishy = ((pie.stageHeight/2)+100*-math.sin(finishAngle*math.pi/180)
startLine = display.newLine((pie.stageWidth/2), (pie.stageHeight/2), startx, starty)
startLine:setFillColor(0,0,0)
finishLine = display.newLine((pie.stageWidth/2), (pie.stageHeight/2), finishx, finishy)
finishLine:setFillColor(0,0,0)
return finishAngle
end
to calculate startAngle and finishAngle use (% of what you need to chart *360/100) ex.
you need to find for 35% use (35*360/100)=126 degrees this will be your finish angle
set startAngle and finishAngle to 0 at beginning or app then change finishAngle to the %
you need and call pieChart(startAngle,finishAngle) then when finishAngle is returned change
startAngle to finishAngle and finishAngle = finistAngle + startAngle
or something like that sorry im at work on pc and cant check code but it looks good [import]uid: 7911 topic_id: 3332 reply_id: 10009[/import]
i have put in a feature request for curveTo, but note there are some examples done in flash for drawing arcs just using just straight lines here:
http://www.pixelwit.com/blog/2007/07/draw-an-arc-with-actionscript/
http://www.emanueleferonato.com/2009/09/22/drawing-arcs-with-as3/
[import]uid: 6645 topic_id: 3332 reply_id: 10040[/import]
I made it! I will work on a class for charts of different kinds. It would be better if corona have that curveTo feature!
It’s very easy:
[code]
display.setStatusBar( display.HiddenStatusBar )
local barRadius = 150
local barWidth = 5
local barRotation = 0
local bars = {}
for i=1,359 do
bars[i] = display.newLine(display.contentWidth/2, display.contentHeight/2,
(display.contentWidth/2)-barRadius,display.contentHeight/2 )
bars[i]:setColor( 255, 255, 255 )
bars[i].width = barWidth
bars[i].rotation = barRotation
barRotation = barRotation + 1
end
for i=150,359 do
bars[i]:setColor( 0, 255, 0 )
end
[/code] [import]uid: 8556 topic_id: 3332 reply_id: 10049[/import]
Good to here
Code looks simple I was thinking something similar I was going tomtry when I got home
[import]uid: 7911 topic_id: 3332 reply_id: 10050[/import]
this is my first bit of Lua code so excuse me if my approach isn’t the best
http://www.mediafire.com/?cr8pddi14o6adwt
i don’t think you can really achieve fills this way, and I dont know if the lines will get antialiased on the device… (really we need beginFill, curveTo and beginBitmapFill etc) but anyway…
please let me know if my use of local functions/variables etc can be improved, as this is all new to me!
local RGB = require("RGB")
local MathFunc = require("MathFunc")
--
local deg2rad = MathFunc.deg2rad
local rad2deg = MathFunc.rad2deg
--
local function getArcEndPoints(centerX, centerY, radius, startAngle, arcAngle)
-- start 0 deg from 12 o'clock
local startAngle = startAngle - deg2rad(90)
local xx = centerX + math.cos(startAngle) \* radius
local yy = centerY + math.sin(startAngle) \* radius
local startPoint = {x=xx,y=yy}
xx = centerX + math.cos(startAngle+arcAngle) \* radius
yy = centerY + math.sin(startAngle+arcAngle) \* radius
local endPoint = {x=xx,y=yy}
return {startPoint = startPoint, endPoint = endPoint}
end
--
local function drawArc(segment, centerX, centerY, radius, startAngle, arcAngle, steps)
local startPoint
local endPoint
-- start 0 deg from 12 o'clock
local startAngle = startAngle - deg2rad(90)
local angleStep = arcAngle / steps
local xx = centerX + math.cos(startAngle) \* radius
local yy = centerY + math.sin(startAngle) \* radius
startPoint = {x=xx,y=yy}
local angle
for i=1, steps, 1 do
angle = startAngle + i \* angleStep
xx = centerX + math.cos(angle) \* radius
yy = centerY + math.sin(angle) \* radius
segment:append(xx,yy)
end
return coords
end
--
local function drawSegment(centerX, centerY, radius, startAngle, arcAngle, steps, lineColor)
local p = getArcEndPoints(centerX, centerY, radius, startAngle, arcAngle)
local startPoint=p.startPoint
local endPoint=p.endPoint
local segment = display.newLine(centerX, centerY, startPoint.x, startPoint.y)
drawArc(segment, centerX, centerY, radius, startAngle, arcAngle, steps)
segment:append(centerX,centerY)
segment:setColor(RGB.red(lineColor),RGB.green(lineColor),RGB.blue(lineColor),255)
segment.width=2
return segment
end
-- ### MAIN APP ###
local centerX, centerY, radius, steps
centerX=160
centerY=240
radius=120
steps = 100
local segments = {}
segments[1] = drawSegment(centerX,centerY,radius,0,deg2rad(90),steps,0xFF0000)
segments[2] = drawSegment(centerX,centerY,radius,deg2rad(90),deg2rad(90),steps,0x00FF00)
segments[3] = drawSegment(centerX,centerY,radius,deg2rad(180),deg2rad(30),steps,0x0000FF)
segments[4] = drawSegment(centerX,centerY,radius,deg2rad(210),deg2rad(70),steps,0xFFFF00)
segments[5] = drawSegment(centerX,centerY,radius,deg2rad(280),deg2rad(80),steps,0xFF00FF)
segments[1].xScale=0.8
segments[1].yScale=0.8
segments[4].xScale=1.1
segments[4].yScale=1.1
[import]uid: 6645 topic_id: 3332 reply_id: 10054[/import]
cool… 
I was searching for something like it. You made it simple. Thanks…
[import]uid: 137063 topic_id: 3332 reply_id: 144510[/import]
cool…
I was searching for something like it. You made it simple. Thanks…
[import]uid: 137063 topic_id: 3332 reply_id: 144510[/import]
cool…
I was searching for something like it. You made it simple. Thanks…
[import]uid: 137063 topic_id: 3332 reply_id: 144510[/import]
cool…
I was searching for something like it. You made it simple. Thanks…
[import]uid: 137063 topic_id: 3332 reply_id: 144510[/import]
dear ricardorauber i have question:
how i can yours pie chart move or rotate?
or when i am rotating the mobile device how then i can move it?
and how can i make a chart legend ?
thank you very much for help
greetings
dear ricardorauber i have question:
how i can yours pie chart move or rotate?
or when i am rotating the mobile device how then i can move it?
and how can i make a chart legend ?
thank you very much for help
greetings