@Naomi, glad you like it! (; And of course you can use any of our libs in free/commercial products, and even in open source projects (in this last case as long as credit is given and it’s not one of our templates (; )
Thank you, @hachisoft!
Now, here’s a problem with the pie chart, though. It doesn’t quite work when I change the data to the following:
[lua]
local data = {
radius = 90,
values = {
{percentage = 18, color = {0, 0, 1}},
{percentage = 12, color = {.5, 0, 0}},
{percentage = 67, color = {0, 1, 0}},
{percentage = 3, color = {1, 1, 0}},
},
name = “myFirstPieChart.png”
};
[/lua]
Or something like:
[lua]
local data = {
radius = 50,
values = {
{percentage = 10, color = {0, 0, 1}},
{percentage = 12, color = {.5, 0, 0}},
{percentage = 75, color = {0, 1, 0}},
{percentage = 3, color = {1, 1, 0}},
},
name = “myFirstPieChart.png”
};
[/lua]
Or something like:
[lua]
local data = {
radius = 50,
values = {
{percentage = 99, color = {0, 0, 1}},
{percentage = 1, color = {.5, 0, 0}},
},
name = “myFirstPieChart.png”
};
[/lua]
Any ideas how to deal with cases like these?
Naomi
@Naomi, Whoops! Didn’t took into account that 4 points aren’t enough to properly draw angles bigger than 180° (: Fixed that, and updated the link in the blog post (;
Another thing, if you need to do a pie of one big 100% slice, make the percentage 99.9 (:
My bad, uploaded another version d: The last one still had a couple issues in a few scenarios.
This time I made sure to test it throughly, putting into a timer going from 99 to 1 percentage, and all seems well (:
OMG, @hachisoft, this is awesomeness. Thank you for the update.
I’m now wondering if you can allow something like this:
[lua]
local data = {
radius = 80,
values = {
{percentage = 100, color = {0, 0, 1}},
{percentage = 0, color = {.5, 0, 0}},
{percentage = 0, color = {0, 1, 0}},
{percentage = 0, color = {1, 1, 0}},
{percentage = 0, color = {1, 0, 1}},
{percentage = 0, color = {0, 1, 1}},
},
name = “myFirstPieChart.png”
};
[/lua]
Meaning, sometimes, only one out of six may have value.
By the way, it seems like I can do something like the following:
[lua]
local data = {
radius = 80,
values = {
{percentage = 0, color = {0, 0, 1}},
{percentage = 90, color = {.5, 0, 0}},
{percentage = 0, color = {0, 1, 0}},
{percentage = 0, color = {1, 1, 0}},
{percentage = 10, color = {1, 0, 1}},
{percentage = 0, color = {0, 1, 1}},
},
name = “myFirstPieChart.png”
};
[/lua]
The two pieces of pies work, but I do see a tiny gap. I wonder if you could perfect these two cases too. Would be super nice.
Naomi
@Naomi, updated the blog post version to take those cases into account (:
Now if a percentage is 0, the slice will be skipped completely, and if it’s 100, it will be made as 99.9 so it draws it correctly (;
@hachisoft, it’s beautiful! This is great. Thank you so much for updating it.
Cheers,
Naomi
Hey, @hachisoft, there’s just one more thing to perfect your pie chart code. I think you’ve inadvertently made “slice” a global variable. It’s on line 122 of your library: strokesSlices[#strokesSlices+1] = slice ;
You might want to fix it?
Thanks again for putting the pie chart code together. This is really an awesome library.
Naomi
P.S. Commenting out the line 122 doesn’t seem to cause any issue (and I don’t find any mention of “slice” anywhere else in the library) – so I assume this line is a left over from previous iteration and no longer necessary?
@Naomi, update it in the blog post. Yup, it’s a bit of leftover from playing around with various solution 
I polished the code now a bit too (: I’m glad you like the library! (;
Great!
Naomi
Hey, @RagdogStudios, I came across a situation where the pie chart isn’t displaying the size I tell it to. This only happens when I want to display two different pie charts by toggling small to big (or big to small.) I made a simple test project, and I’m wondering if you can tell me what might be causing this to happen and how I may fix it.
The test folder has main.lua, config.lua, build.settings, ragdogLib.lua and png files. Here’s the copy of main.lua (and if you’d like me to email you the complete test project with png files, please let me know.)
[lua]
display.setStatusBar( display.HiddenStatusBar )
local ragdogLib = require( “ragdogLib” )
local widget = require( “widget” )
local showSmall
local showBig
local smallGroup
local bigGroup
local sheetOption = {
width = 180,
height = 52,
numFrames = 2,
sheetContentWidth = 180,
sheetContentHeight = 104
};
sheet = graphics.newImageSheet( “PNG/btn180x52.png”, sheetOption )
showSmall = function()
display.remove( bigGroup ); bigGroup = nil;
smallGroup = display.newGroup()
local data = {
radius = 50,
values = {
{percentage = 18, color = {0, 0, 1}},
{percentage = 12, color = {.5, 0, 0}},
{percentage = 25, color = {0, 1, 0}},
{percentage = 3, color = {1, 1, 0}},
{percentage = 42, color = {1, 0, 1}},
}
};
local pie = ragdogLib.createPieChart(data);
pie.x, pie.y = display.contentCenterX+100, display.contentCenterY;
smallGroup:insert(pie)
local switch = widget.newButton
{
sheet = sheet,
defaultFrame = 1,
overFrame = 2,
width = 180,
height = 52,
label = “Show Big”,
labelColor = { default={1.0}, over={1.0} },
fontSize = 18,
font = native.systemFontBold,
onRelease = showBig
}
switch.x = 100;
switch.y = display.contentCenterY;
smallGroup:insert(switch)
end
showBig = function()
display.remove( smallGroup ); smallGroup = nil;
bigGroup = display.newGroup()
local data = {
radius = 100,
values = {
{percentage = 10, color = {0, 0, 1}},
{percentage = 42, color = {.5, 0, 0}},
{percentage = 25, color = {0, 1, 0}},
{percentage = 3, color = {1, 1, 0}},
{percentage = 20, color = {1, 0, 1}},
}
};
local pie = ragdogLib.createPieChart(data);
pie.x, pie.y = display.contentCenterX+100, display.contentCenterY;
bigGroup:insert(pie)
local switch = widget.newButton
{
sheet = sheet,
defaultFrame = 1,
overFrame = 2,
width = 180,
height = 52,
label = “Show Small”,
labelColor = { default={1.0}, over={1.0} },
fontSize = 18,
font = native.systemFontBold,
onRelease = showSmall
}
switch.x = 100;
switch.y = display.contentCenterY;
bigGroup:insert(switch)
end
showSmall()
[/lua]
Naomi
Ah, I fixed the problem by adding 1 millisecond delay for piechart creation.
Cheers,
Naomi
Hey, @RagdogStudios, I’ve incorporated your pie chart in my project and came to a problem on iPad (both 1st gen and 3rd gen iPad).
The pie charts simply go wild and, in some cases, crash my app.
On simulator, the very same pie charts work perfectly fine. So far, these pie charts have not failed me on my iPod Touch 5.
So I went ahead and created a simple project with the following, and the pie chart looks quite strange on iPad 1G, iPad 3G and iPod Touch 5:
[lua]
– build.settings
settings =
{
orientation =
{
default = “landscapeRight”,
supported =
{
“landscapeRight”,“landscapeLeft”,
},
},
}
– config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
xAlign = “center”, – center is the default, so if center is desirable, this line can be removed
yAlign = “center”, – center is the default, so if center is desirable, this line can be removed
antialias = true,
imageSuffix =
{
["@2x"] = 1.6,
["@4x"] = 3.6,
},
},
}
– main.lua
display.setStatusBar( display.HiddenStatusBar )
local ragdogLib = require( “ragdogLib” )
local widget = require( “widget” )
local percent = {}
for i=1,6 do
percent[i] = 100/6
end
local data = {
radius = 90,
values = {
{percentage = percent[1], color = {0, 0, 1}},
{percentage = percent[2], color = {.5, 0, 0}},
{percentage = percent[3], color = {0, 1, 0}},
{percentage = percent[4], color = {1, 1, 0}},
{percentage = percent[5], color = {1, 0, 1}},
{percentage = percent[6], color = {0.5, 0, 1}},
}
};
local pie = ragdogLib.createPieChart(data);
pie.x, pie.y = display.contentCenterX, display.contentCenterY;
[/lua]
Any idea why this might be?
Naomi
Hey, @RagdogStudios, it looks like the issue boils down to some sort of mask issue – and it may have something to do with dynamic scaling of some sort (but looking at the code, I still don’t understand why it causes this odd problem.) Regardless, I still really like the createPieChart code you did. It works very nicely.
So, I’m modifying your library and adapting it to meet my needs. That is, removing the process of creating & applying mask – and instead, bundling my own mask files (including @2x and @4x versions) and applying it after the slices are created. I think it will do what I need for my project (and should work on all device resolutions that my app supports.)
Cheers,
Naomi
OMG, it does not like it when I apply @2x or @4x versions of the mask! It simply fails just like it did with the RagdogStudios library. Perhaps mask works so long as it uses the same mask file regardless of the screen resolution (meaning, @2x and @4x should not be used at all) – which explains why the dynamically created mask fails with the RagdogStudios library.
At this point, it seems as if I have no choice but to use a single mask file regardless of screen resolution and live with the fuzzy edges on devices that use @2x or @4x images. Ugh.
Naomi
P.S. I suppose I can add a ring (that has the color of the background) right on top of the pie chart to mask the fuzziness…
I am looking for the bar chart. Do we have any API for it? or any help would be highly appreciated
I am looking for the bar chart. Do we have any API for it? or any help would be highly appreciated