Open Flash Chart II - multi-bar graph with tooltips

July 28th, 2008 by charlie

Just got a comment that says tooltips are not working properly, so I decided to do an example for you guys (and gals). This example is based on teethgrinder's tooltip example.
Here is the graph we are after in this example:


More Open Flash Chart II examples.

And here is the code (the controller):
NOTE: You will need the latest plugin and open-flash-chart.swf (as of this article) for the tooltips to register properly. 
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


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/tooltip.php
    title = Title.new("MultiBar Tooltip")

    bar = Bar.new
    bar.values  = [9,8,7,6,5,4,3,2,1]
    bar.tooltip = "Title Bar l<br>val = #val#"
    bar.colour  = '#47092E'

    # NOTE: you can use obj.variable=() or obj.set_variable() interchangeably

    bar2 = Bar.new
    bar2.set_tooltip("Spoon {#val#}<br>Title Bar 2")
    bar2.set_colour('#CC2A43')

    vals = [1,2,3,4]

    tmp = BarValue.new(5)
    tmp.set_colour('#000000')
    tmp.set_tooltip("Spoon {#val#}<br>Title Bar 2<br>Override bar 2 tooltip<br>Special data point")
    vals << tmp
    vals << [6,7,8,9]
    vals = vals.flatten

    bar2.values = vals

    t = Tooltip.new
    t.set_shadow(false)
    t.stroke = 5
    t.colour = '#6E604F'
    t.set_background_colour("#BDB396")
    t.set_title_style("{font-size: 14px; color: #CC2A43;}")
    t.set_body_style("{font-size: 10px; font-weight: bold; color: #000000;}")

    chart = OpenFlashChart.new
    chart.title = title
    chart.add_element(bar)
    chart.add_element(bar2)
    chart.set_tooltip(t)

    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

16 Responses to “Open Flash Chart II - multi-bar graph with tooltips”

  1. stu Says:
    July 28th, 2008 at 11:24 AM Thanks! Yep, I was doing it wrong :-)

    I really appreciate the detailed example.
  2. monk.e.boy Says:
    July 29th, 2008 at 09:42 AM Cool :-)

    I is gunna link to this from the tooltip demo page. I fink you is doing v.v.nice work :-)

    hats off.

    monk.e.boy
  3. syl Says:
    August 14th, 2008 at 08:11 AM I am sorry but for me the tooltips does not work...
  4. charlie Says:
    August 14th, 2008 at 11:01 AM
    @syl - make sure you have the latest plugin and the latest open_flash_chart.swf as of this article.
  5. Nick Says:
    August 14th, 2008 at 11:07 AM Actually, I have the same issue as well. I get an error #2032 with the code from your pie chart example.

    Further tracing gives me:


    You have a nil object when you didn't expect it!
    You might have expected an instance of Array.
    The error occurred while evaluating nil.empty?

    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:376:in `new_constants_in'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:202:in `load_file'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:94:in `require_or_load'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:248:in `load_missing_constant'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:453:in `const_missing'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:465:in `const_missing'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:471:in `send'
    D:/Ruby/lib/ruby/gems/1.8/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:471:in `const_missing'
    vendor/plugins/Open_Flash_Chart.git/lib/open_flash_chart.rb:62:in `tooltip='


    The offending line seems to be:


    def set_tooltip(tip)
        if tip.is_a?(Tooltip)
          #we have a style for our chart's tooltips
          @tooltip = tip
        else
          # the user could just use set_tip(tip) or tip=(tip) to just set the text of the tooltip
          @tip = tip
        end
      end
      alias_method "tooltip=", :set_tooltip


    Line 62 is "if tip.is_a?(Tooltip)". Not sure what is happening after this, however.
  6. charlie Says:
    August 15th, 2008 at 08:54 AM
    @Nick - I am unable to reproduce your problem. I used the pie chart code from here - http://pullmonkey.com/2008/7/29/open-flash-chart-ii-pie-chart and everything works fine. Would you mind posting your code, even though it should be identical to the pie chart code?
  7. syl Says:
    August 18th, 2008 at 02:10 AM It's still not working, where can I find the latest plugin for RoR because I took the swf and the javascript file from the official Open Flash Chart website.
  8. charlie Says:
    August 18th, 2008 at 09:05 AM
    @syl - here are the instructions - http://pullmonkey.com/projects/open_flash_chart2, all the latest code is out on github.
  9. syl Says:
    August 19th, 2008 at 09:31 AM Is anyone know something about a problem when IE6 load swfobject.js and bug because the file is too much heavy for him?

    When I load the html page IE6 use all the memory and don't display the page.
  10. Winston Says:
    August 21st, 2008 at 12:54 AM For the older version of OFC, I can see from http://teethgrinder.co.uk/open-flash-chart/gallery-area-2.php that it is able to display both x-axis and y-axis values in a tooltip for an Area chart

    May I know if this is doable in OFC2?

    What are the "magical values" which I can use?

    Thank you!
  11. Syl Says:
    August 21st, 2008 at 07:39 AM I am sorry but since 3 days I am searching why, when I am loading my Graph on IE6 it crash and my computer swap a lot and crash if I don't stop iexplore manualy.
    If anyone of you have an idea I am interrested...
    Thank you in advance...

    Syl
  12. Syl Says:
    August 26th, 2008 at 04:00 AM I finaly found why the tooltips doesn't work with the last "http://github.com/pullmonkey/open_flash_chart" version.

    The tooltip class isn't load at startup so to enable it you have to put the following line in the file :

    -> RAILS_ROOT/vendor/plugins/open_flash_chart.git/init.rb

    Add this line:

    ...
    require 'tooltip'
    ...

    Then restart your application:
    RAILS_ROOT/script/server -d webrick -p 3000

    Here is my init.rb file:

    # Include hook code here
    require 'open_flash_chart_object'
    require 'open_flash_chart'
    require 'bar_base'
    require 'bar'
    require 'bar_3d'
    require 'bar_glass'
    require 'bar_sketch'
    require 'bar_stack'
    require 'h_bar'
    require 'line_base'
    require 'line'
    require 'line_dot'
    require 'line_hollow'
    require 'pie'
    require 'scatter'
    require 'title'
    require 'tooltip'
    require 'x_axis_label'
    require 'x_axis_labels'
    require 'x_axis'
    require 'x_legend'
    require 'y_axis_base'
    require 'y_axis'
    require 'y_axis_right'
    require 'y_legend'

  13. Syl Says:
    August 26th, 2008 at 04:02 AM I finaly found why the tooltips doesn't work with the last "http://github.com/pullmonkey/open_flash_chart" version.

    The tooltip class isn't load at startup so to enable it you have to put the following line in the file :

    -> RAILS_ROOT/vendor/plugins/open_flash_chart.git/init.rb


    Add this line:

    ...
    require 'tooltip'
    ...

    Then restart your application:
    RAILS_ROOT/script/server -d webrick -p 3000

    Here is my init.rb file:

    # Include hook code here
    require 'open_flash_chart_object'
    require 'open_flash_chart'
    require 'bar_base'
    require 'bar'
    require 'bar_3d'
    require 'bar_glass'
    require 'bar_sketch'
    require 'bar_stack'
    require 'h_bar'
    require 'line_base'
    require 'line'
    require 'line_dot'
    require 'line_hollow'
    require 'pie'
    require 'scatter'
    require 'title'
    require 'tooltip'
    require 'x_axis_label'
    require 'x_axis_labels'
    require 'x_axis'
    require 'x_legend'
    require 'y_axis_base'
    require 'y_axis'
    require 'y_axis_right'
    require 'y_legend'

  14. charlie Says:
    August 26th, 2008 at 05:40 PM
    @Syl - thank you very much for your troubleshooting. I have corrected this in the git hub release.
  15. Mahmoud Says:
    September 28th, 2008 at 07:42 AM Greetings guys,

    I'd like to thank u for the wonderful plugin u worked on..
    I'd appreciate it if anyone can help me with this.

    what are the keys that can be used in the tooltip other than "#val#" in a Bar chart

    I found that the keys for the pie chart. (#val#, #total#, #percent#, #label#) http://teethgrinder.co.uk/open-flash-chart-2/pie-chart.php

    I need the x_label key to show up in the tooltip in a bar chart. but couldn't get that done yet..

    Thanks in Advance
  16. charlie Says:
    September 29th, 2008 at 02:10 PM
    @Mahmoud - good question. Those details are best left up to teethgrinder (aka Monk.e.boy) to answer. The one you pointed out "#val#" is the only one I recall using with regards to bar charts. I would pose your exact question to Monk.e.boy in his OFC Forums where is has been really quick to reply. If you find out, please drop us a line :)

Leave a Reply

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