Open Flash Chart II - Pie Chart

July 29th, 2008 by charlie

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!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials

26 Responses to “Open Flash Chart II - Pie Chart”

  1. Chipster Says:
    July 29th, 2008 at 11:17 PM Yeah :p Thanks a lot !
  2. blindgaenger Says:
    July 30th, 2008 at 01:07 AM 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. Chipster Says:
    July 30th, 2008 at 10:47 AM BTW, tooltip generate error for me ( #2032 ) on any of the example.
  4. charlie Says:
    July 30th, 2008 at 11:09 AM
    @Chipster - browse to the actual graph_code action to see the json that it is producing.
  5. Chipster Says:
    July 30th, 2008 at 11:20 PM No json produced. I have a error ( only with the tooltip line ) :

    " Plugins::Pullmonkey-openFlashChart.....::Lib" is no a valid constant name !
  6. charlie Says:
    July 31st, 2008 at 10:13 AM
    @Chipster - can I get the stack trace. I am not seeing this behavior.
  7. Cecci Says:
    August 4th, 2008 at 08:03 AM @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. charlie Says:
    August 4th, 2008 at 11:10 AM
    @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. Raj Says:
    August 20th, 2008 at 09:27 AM 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. charlie Says:
    August 20th, 2008 at 10:16 AM
    @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. Raj Says:
    August 20th, 2008 at 02:52 PM Yes, it also seems alpha is not configurable either? Am I correct?
  12. charlie Says:
    August 20th, 2008 at 02:55 PM
    @Raj - pie.set_alpha(0.6) or pie.alpha = 0.6 or whatever is supposed to work. What have you tried?
  13. Raj Says:
    August 20th, 2008 at 03:19 PM 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#
    #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. Raj Says:
    August 22nd, 2008 at 11:36 AM 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. charlie Says:
    August 22nd, 2008 at 07:35 PM
    @Raj - will do, just have to wait for monk.e.boy to release the new swf file.
  16. terry Says:
    August 24th, 2008 at 01:15 AM thanks for this great project.

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

    thanks.

    terry
  17. charlie Says:
    August 24th, 2008 at 10:57 AM
    @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. terry Says:
    August 24th, 2008 at 02:53 PM 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. terry Says:
    August 25th, 2008 at 06:24 AM i found the problem that works on firefox but IE7 can't. I recover an empty line on view (index.html.erb) before
    [quote]

    <%= @graph %> [/quote]
    than everything is ok (althrough i even don't know why ), thank anyway.
  20. terry Says:
    August 25th, 2008 at 06:27 AM 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. terry Says:
    August 25th, 2008 at 07:47 AM 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. charlie Says:
    August 26th, 2008 at 05:42 PM
    @terry - next time you get the blank page in IE, post the HTML from that page (view source). Thanks.
  23. Bob Says:
    September 8th, 2008 at 11:18 PM 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. charlie Says:
    September 10th, 2008 at 10:31 PM
    @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. Jaikishan Jalan Says:
    October 22nd, 2008 at 03:04 AM 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. charlie Says:
    October 22nd, 2008 at 12:05 PM
    @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.

Leave a Reply

Check here to see how to submit syntax highlighted code to the comments.