PullMonkey Blog

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”

  1. By Chipster on Jul 29, 2008 | Reply

    Yeah :p Thanks a lot !

  2. By blindgaenger on Jul 29, 2008 | Reply

    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!

  3. By Chipster on Jul 29, 2008 | Reply

    BTW, tooltip generate error for me ( #2032 ) on any of the example.

  4. By charlie on Jul 29, 2008 | Reply

    @Chipster - browse to the actual graph_code action to see the json that it is producing.

  5. By Chipster on Jul 29, 2008 | Reply

    No json produced. I have a error ( only with the tooltip line ) :

    " Plugins::Pullmonkey-openFlashChart…..::Lib" is no a valid constant name !

  6. By charlie on Jul 29, 2008 | Reply

    @Chipster - can I get the stack trace. I am not seeing this behavior.

  7. By Cecci on Jul 29, 2008 | Reply

    @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"

  8. By charlie on Jul 29, 2008 | Reply

    @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.

  9. By Raj on Jul 29, 2008 | Reply

    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

  10. By charlie on Jul 29, 2008 | Reply

    @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.

  11. By Raj on Jul 29, 2008 | Reply

    Yes, it also seems alpha is not configurable either? Am I correct?

  12. By charlie on Jul 29, 2008 | Reply

    @Raj - pie.set_alpha(0.6) or pie.alpha = 0.6 or whatever is supposed to work. What have you tried?

  13. By Raj on Jul 29, 2008 | Reply

    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

  14. By Raj on Jul 29, 2008 | Reply

    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.

  15. By charlie on Jul 29, 2008 | Reply

    @Raj - will do, just have to wait for monk.e.boy to release the new swf file.

  16. By terry on Jul 29, 2008 | Reply

    thanks for this great project.

    did there any solution if two label are to close to overlap ?

    thanks.

    terry

  17. By charlie on Jul 29, 2008 | Reply

    @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.

  18. By terry on Jul 29, 2008 | Reply

    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.

  19. By terry on Jul 29, 2008 | Reply

    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.

  20. By terry on Jul 29, 2008 | Reply

    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.

  21. By terry on Jul 29, 2008 | Reply

    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.

  22. By charlie on Jul 29, 2008 | Reply

    @terry - next time you get the blank page in IE, post the HTML from that page (view source). Thanks.

  23. By Bob on Jul 29, 2008 | Reply

    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!

  24. By charlie on Jul 29, 2008 | Reply

    @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.

  25. By Jaikishan Jalan on Jul 29, 2008 | Reply

    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.

  26. By charlie on Jul 29, 2008 | Reply

    @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.

  27. By Adam on Jul 29, 2008 | Reply

    @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.

  28. By Mitja on Jul 29, 2008 | Reply

    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!

  29. By Mitja on Jul 29, 2008 | Reply

    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()

  30. By charlie on Jul 29, 2008 | Reply

    @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.

  31. By Mitja on Jul 29, 2008 | Reply

    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…

  32. By Frank on Jul 29, 2008 | Reply

    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}

  33. By Frank on Jul 29, 2008 | Reply

    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!

  34. By charlie on Jul 29, 2008 | Reply

    @Frank - which swf file are you using? The one that came with the plugin or a newer/older one?

  35. By salil on Jul 29, 2008 | Reply

    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

  36. By salil on Jul 29, 2008 | Reply

    Hi All,
    Also i would like to know how to set the radius of a pie chart.

    Regards,

    Salil

  37. By charlie on Jul 29, 2008 | Reply

    @Salil - which OFC swf version do you have?

Sorry, comments for this entry are closed at this time.