29 Jul
Open Flash Chart II – Pie Chart
Just got a comment asking for a pie chart example, so here is an example. This example is based on teethgrinder's pie chart example for php.
Here is the graph we are after in this example:
More Open Flash Chart II examples.
And here is the code (the controller):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class TestItController < ApplicationController def index @graph = open_flash_chart_object(600,300,"/test_it/graph_code") end def graph_code # based on this example - http://teethgrinder.co.uk/open-flash-chart-2/pie-chart.php title = Title.new("Pie Chart Example For Chipster") pie = Pie.new pie.start_angle = 35 pie.animate = true pie.tooltip = '#val# of #total#<br>#percent# of 100%' pie.colours = ["#d01f3c", "#356aa0", "#C79810"] pie.values = [2,3, PieValue.new(6.5,"Hello (6.5)")] chart = OpenFlashChart.new chart.title = title chart.add_element(pie) chart.x_axis = nil render :text => chart.to_s end end |
And in your view (index.html.erb):
1 2 3 4 |
<script type="text/javascript" src="/javascripts/swfobject.js"></script> <%= @graph %> |
Good Luck!
37 Responses
to “Open Flash Chart II – Pie Chart”
Sorry, comments for this entry are closed at this time.
Yeah :p Thanks a lot !
Yesterday evening I tried to figure out by my own, how to use the pie chart. And this morning all I had to do was to reload the webpage to get a clean example. Like you knew it 🙂 Thanks!
BTW, tooltip generate error for me ( #2032 ) on any of the example.
@Chipster – browse to the actual graph_code action to see the json that it is producing.
No json produced. I have a error ( only with the tooltip line ) :
" Plugins::Pullmonkey-openFlashChart…..::Lib" is no a valid constant name !
@Chipster – can I get the stack trace. I am not seeing this behavior.
@Charlie – How can I do to be able in an alone project, to work with several types of graphs?
I do two controllers, error message is displayed
"Open Flash Chart
IO ERROR
Loading test data
Error #2032"
@Cecci – you can use one controller to display multiple graphs on the same page. See this example – http://pullmonkey.com/2008/8/4/open-flash-chart-ii-multiple-graphs-on-the-same-page
Also, you usually get the 2032 error if the action you are calling has an error. So for example if you call this:
open_flash_chart_object(300, 300, "/controller/action")
Then you can actually navigate the browser to http://yourdomain.com/controller/action and see if the JSON you are expecting is making its way out. Otherwise, you will most likely be presented with an error. That should help with troubleshooting.
I set the background to black but the lables, as you might guess, are also black. How would I change that? There seems to be no documentation on this?
Please help
@Raj – Pie chart label colors … hmm, that does not actually seem possible right now – I would ask in the OFC forums – http://sourceforge.net/forum/?group_id=201148 and see if monk.e.boy has a solution.
Yes, it also seems alpha is not configurable either? Am I correct?
@Raj – pie.set_alpha(0.6) or pie.alpha = 0.6 or whatever is supposed to work. What have you tried?
Weird, I tried that:
pie = Pie.new
pie.alpha = 0.9
pie.start_angle = 35
pie.animate = true
It still appears faded. I am using a black bacground. Here is my entire code:
pie = Pie.new
pie.alpha = 0.9
pie.start_angle = 35
pie.animate = true
pie.tooltip = ‘#val# of #total#<br>#percent# of 100%’
pie.colours = ["#d01f3c", "#356aa0", "#C79810"]
pie.values = [2,3, poo]
chart = OpenFlashChart.new
chart.title = title
chart.add_element(pie)
chart.set_bg_colour(‘#000000’)
chart.x_axis = nil
render :text => chart.to_s
the pie label color change function made it in:
http://sourceforge.net/forum/forum.php?thread_id=2175765&forum_id=716572
It’s in svn now, would love to see that option documented in your framework.
Have a great weekend.
@Raj – will do, just have to wait for monk.e.boy to release the new swf file.
thanks for this great project.
did there any solution if two label are to close to overlap ?
thanks.
terry
@terry – not that I have found … I would ask in the OFC forums – http://sourceforge.net/forum/?group_id=201148 and see what monk.e.boy has for a solution.
thank charlie. and i find another problem that my project works on firefox but IE7 can’t. http://calculator.redirectme.net/genchart/play_topic/79091c5a880faf any suggestion if appreciative , thanks.
i found the problem that works on firefox but IE7 can’t. I recover an empty line on view (index.html.erb) before
[quote]
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph %> [/quote]
than everything is ok (althrough i even don’t know why ), thank anyway.
sorry for my bad post, (continued) below (quote)
script type="text/javascript" src="/javascripts/swfobject.js" /script
%= @graph %
(quote) (i remove these angle in post), then everything is works. Even i don’t know why. thanks anyway.
ok i know how to solve the problem. (not why). sometime when i refresh in IE7 , my pie chart may appear. why i change my controller name to test_it, then everything look fine. However, when i press refresh 7 time, there maybe be a time nothing appear.
@terry – next time you get the blank page in IE, post the HTML from that page (view source). Thanks.
How do you add custom tooltips to the pie chart?
for example:
pie.values = [PieValue.new(3, ‘test1’), PieValue.new(5, ‘test2’), PieValue.new(10, ‘test3’)]
now for the labels (the ones that are displayed outside the slice)… i just want to show the values (3, 5, 10).
For the tooltip, i want to show the label in addition to extra information (#val#, #percent#, and maybe some more custom info).
#x_label# shows up as "null" in the tooltip. and the label (not the number) shows up outside the slice (‘test1’, ‘test2’, etc…).
please help!
btw: if i use the previous version of OFC, i can get something close… but #percent# doesn’t work in the tooltip (just shows up as "#percent#")
thanks!
@Bob – Check here – http://teethgrinder.co.uk/open-flash-chart-2/pie-chart.php
There are 4 variables for the pie chart tooltips:
1) #val#
2) #total#
3) #percent#
4) #label#
Hope that helps.
Today, after downloading the latest version from github, my pie chart stops displaying. No error Nothing. Earlier it was working fine.
{"elements": [{"border": 2, "tip": "#percent#", "type": "pie", "colours": ["#d01f3c", "#356aa0", "#C79810"], "start-angle": 20, "values": [{"label": "Quarterly (20.0)", "value": 20.0}, {"label": "Half Yearly (20.0)", "value": 20.0}], "animate": true}], "bg_colour": "#FFFFFF", "tooltip": {"background": "#FFFFFF", "colour": "#000000", "body": "{font-size: 10px; color: #006666;}", "title": "{font-size: 10px; color: #006666;}", "stroke": 1, "shadow": true}, "x_axis": null, "title": {"text": ""}}
Any help will be greatly appreicated.
@Jaikishan – What version of flash player do you have on your linux box – http://www.adobe.com/products/flash/about/ ?
Also, can you see the chart on this page – http://teethgrinder.co.uk/open-flash-chart-2/adv-pie-chart.php
Or any of the charts listed under "Charts" here – http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php
At the top of each of those chart pages should display a flash chart.
Depending on the flash version you have, I would upgrade it. The latest release comes with a new version of the swf file, so that is most likely the problem.
Let me know how it goes.
@terry: I also had a similar problem where OFC2 would not display in IE7. Worked fine in Firefox 3. The problem appeared in production after I started using asset_packager Rails plugin. I removed swfobject.js from the assets_packages.yml and included swjobject.js using a normal HTML script tag. Things were fine after that.
Maybe it has something to do with swfobject.js already being minified. Or maybe the IE7 parser has a bug.
Hi to everyone,
for few days i am trying to show labels on my pie charts, but with no success at all.
I have really really tried everything possible and impossible :).
The only way to get my pie chart working is to have no labels at all, so, only the values.
When i add the labels, my chart doesn’t show. Can’t understand why as i think everything is just fine.
This is for example a repsonse:
{"title": {"text": "Currently defined alerts"}, "elements": [{"start-angle": 35, "type": "pie", "border"
: 0, "tip": "#val# of #total#<br>#percent# of 100% for #label#", "animate": true, "values": [{"value"
: 3, "label": "test1"}, {"value": 5, "label": "test2"}, {"value": 10, "label": "test3"}], "colours":
["#FA0081", "#E400000", "#FFA800", "#8000FF", "#9DFF00", "#00FFFF", "#0054FF", "#FF00FF", "#FF0070"
, "#000000", "#00A2FF"]}], "x_axis": null}
I am out of ideas an am left in the blank here. If anyone can help me, please….i really need this pie chart to be working.
Thanks!
I have always been trying to show my chart page in Chrome or FF etc….except IE. Just because of curiosity i have at last tried it in IE also. In all other browsers there is no errors shown, but in IE this is what i get:
TypeError: Error #2007: Parameter text must be non-null.
at flash.text::TextField/set text()
at ChartObjects.Elements::PieLabel()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\ChartObjects\Elements\PieLabel.as:12]
at ChartObjects.Elements::PieSliceContainer()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\ChartObjects\Elements\PieSliceContainer.as:14]
at ChartObjects::Pie/add_values()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\ChartObjects\Pie.as:107]
at ChartObjects::Pie()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\ChartObjects\Pie.as:59]
at ChartObjects::Factory$/MakeChart()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\ChartObjects\Factory.as:48]
at main/build_chart()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\main.as:463]
at main/parse_json()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\main.as:441]
at main/xmlLoaded()[C:\Users\John\Documents\flex\svn\version-2\open-flash-chart\main.as:412]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
@Mitja – looks like we have different JSON for specifying labels.
The line I use in the example above:
pie.values = [2,3, PieValue.new(6.5,"Hello (6.5)")]
produces the following JSON:
"values": [2, 3, {"text": "Hello (6.5)", "value": 6.5}
How are you getting this:
"values": [{"value": 3, "label": "test1"}, {"value": 5, "label": "test2"}, {"value": 10, "label": "test3"}
Should it not look like this:
"values": [{"value": 3, "text": "test1"}, {"value": 5, "text": "test2"}, {"value": 10, "text": "test3"}
Where "text" replaces "label".
Well, post the code that generates your JSON, so that I may take a look.
The IE error – is it the same code as above? Maybe fixing the first problem you mention with the labels will fix this IE error, so we will start there. So post the code.
Thanks for the reply Charlie.
After many hours of trying to figure out what the problem is, i than went to the basics and copied latest code from github, replaced the swf files and swfobject.js (so, everything), and form than on it just worked. I guess the problem was in swf file!
Of course other problems arrised (like vertical labels nsot working anymore), but i have found a workarround for all of them, so everything is just perfect now 🙂
I have a two questions though.
1. Is it possible to open urls in same window on on_click events? Currently i think it is possible only to do some JS alerts or open a link in a new window. If there is a possibility to do it in current window, i would really appreciate it.
2. This one is a little bit harder :).
I am extensively using OFC with JS calls, so the async way with link_to_remote_ofc_load … but i have come to an idea that user would fill in the form with desired parameters for the chart and this parameters would than be posted to the controller action – async. Currently i am trying to hard code the link in link_to_ofc_load, but would somehow like to be dynamically generated from the user input.
Is there any example with such a behaveour?
Maybe for starters a simple example without JS call would be a great way to see how it could be done, but i think the problem is not in passing the parameters and dynamically generate the chart, but to dynamically generate such a request for JS call.
Thanks for any hint, tip…
This looks great! Any chance you could advise me as to how to solve a small prbolem? I’m trying to label a pie chart (like your Hello 6.5 example), but when I use the PieValue.new syntax no chart is created. Here are my JSON outputs; the 2nd one doesn’t generate a graph.
Thanks!
{"title": {"text": "Performance: All Multiple Choice Questions"}, "elements": [{"start-angle": 35, "animate": true, "border": 2, "tip": "#val# (#percent#) of #total# questions", "colours": ["#d01f3c", "#356aa0", "#C79810"], "values": [9, 9, 702], "type": "pie"}], "x_axis": null}
{"title": {"text": "Performance: All Multiple Choice Questions"}, "elements": [{"start-angle": 35, "animate": true, "border": 2, "tip": "#val# (#percent#) of #total# questions", "colours": ["#d01f3c", "#356aa0", "#C79810"], "values": [{"label": "Correct Questions", "value": 9}, {"label": "Incorrect Questions", "value": 9}, {"label": "Unanswered Questions", "value": 702}], "type": "pie"}], "x_axis": null}
I read Mitja’s post and reloaded the .swf and .js files from a fresh download, but still not working. The code I use to generate the values/labels is:
pie.values = [PieValue.new(correct_questions.size, "Correct Questions"),
PieValue.new(incorrect_questions.size, "Incorrect Questions"),
PieValue.new(unanswered_questions.size,"Unanswered Questions")]
Thanks again!
@Frank – which swf file are you using? The one that came with the plugin or a newer/older one?
I have a vertical label problem.
i am using following values
pie.values = [2,3,4,5,6,7,8,9,10,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,11, PieValue.new(6.5,"Hello (6.5)"), PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)"),PieValue.new(1.5,"Hello (1.5)")]
i want something like in the following link ( i don’t know how to do it with Rails)
http://www.ofc2dz.com/OFC2/examples/Pies.html
Thanks
Salil
salil@cipher-tech.com
Hi All,
Also i would like to know how to set the radius of a pie chart.
Regards,
Salil
@Salil – which OFC swf version do you have?