PullMonkey Blog

28 Jul

Open Flash Chart II - multi-bar graph with tooltips


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!





Filed under: Home, Open Flash Chart Graphs, development, projects, rails, ruby, tutorials Tags: , , , , , , ,


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

  1. By stu on Jul 28, 2008 | Reply

    Thanks! Yep, I was doing it wrong :-)
    I really appreciate the detailed example.

  2. By monk.e.boy on Jul 28, 2008 | Reply

    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. By syl on Jul 28, 2008 | Reply

    I am sorry but for me the tooltips does not work…

  4. By charlie on Jul 28, 2008 | Reply

    @syl - make sure you have the latest plugin and the latest open_flash_chart.swf as of this article.

  5. By Nick on Jul 28, 2008 | Reply

    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:

    <filter:code attributes=lang=ruby>
    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=’
    </filter:code>

    The offending line seems to be:

    <filter:code attributes=lang=ruby>
    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
    </filter:code>

    Line 62 is "if tip.is_a?(Tooltip)". Not sure what is happening after this, however.

  6. By charlie on Jul 28, 2008 | Reply

    @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. By syl on Jul 28, 2008 | Reply

    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. By charlie on Jul 28, 2008 | Reply

    @syl - here are the instructions - http://pullmonkey.com/projects/open_flash_chart2, all the latest code is out on github.

  9. By syl on Jul 28, 2008 | Reply

    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. By Winston on Jul 28, 2008 | Reply

    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. By Syl on Jul 28, 2008 | Reply

    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. By Syl on Jul 28, 2008 | Reply

    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. By Syl on Jul 28, 2008 | Reply

    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. By charlie on Jul 28, 2008 | Reply

    @Syl - thank you very much for your troubleshooting. I have corrected this in the git hub release.

  15. By Mahmoud on Jul 28, 2008 | Reply

    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. By charlie on Jul 28, 2008 | Reply

    @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 <a href="http://openflashchart.com/forum/">OFC Forums</a> where is has been really quick to reply. If you find out, please drop us a line :)

  17. By Dalf on Jul 28, 2008 | Reply

    Hi,
    This example is exactly what I was looking for (thanks you), but it doesn’t work. My version of open flash chart is from 1 month ago.
    I have no error message, the chart doesn’t show up.
    Do you know why ?

    I call the action by using Ajax, and onSuccess :
    x = chart.load(transport.responseText);

    Thanks you in advance

  18. By Dalf on Jul 28, 2008 | Reply

    Ok I could resolve my problem.
    At first, I displayed an empty chart, and then the user can press "refresh" to refresh the chart (and show the one above). It was not working because my first chart had a problem.

    I like Open Flash Chart a lot, continue your very good work ;)

  19. By myrmidonguild on Sep 4, 2009 | Reply

    Thanks for the info

  20. By Helmut on Feb 4, 2010 | Reply

    Hello, i’ve found this really helpful! great plugin! but here is my problem… i have to elements in my chart, a bar and a line, so here is my code:

    def show
    @graph = open_flash_chart_object(520,300,”/dashboard/graph_code”)
    end

    def graph_code
    @bills = current_user.bills.all(:order => ‘previous_meter_reading_date DESC’, :limit => 12).reverse
    bar = BarGlass.new
    bar.values = current_user.consumption_per_day_history.map { |b| b[:value] }
    bar.set_key(’Consumption’,10)
    bar.tooltip = “[#x_label#] {#x#} #key#:#val# kWh/day”
    bar.colour = ‘#89C33E’

    vals = current_user.consumption_per_day_history.map { |b| b[:value] }.reverse

    # prepare tooltip for the line
    dot = HollowDot.new( ‘0×80a033′, ‘Bounces’)
    dot.size = 4
    dot.halo_size = 3
    dot.tooltip = “[#x_label#] {#x#} #key#:#val# kWh/day”

    #set the line for the chart
    line = Line.new
    line.text = “[Friend name]’s consumption”
    line.width = 2
    line.colour = ‘#5E4725′
    line.dot_size = 15
    line.values = vals
    line.default_dot_style = dot

    #set the chart style and chart settings
    title = Title.new(”Electricity consumption, kWh per day”)
    x_axis = XAxis.new
    x_axis.set_range(0, @bills.size, 1) # set the number o
    x_axis.colour = ‘#C0C0C0′
    x_axis.set_grid_colour(’#FFFFFF’)

    labels = XAxisLabels.new
    labels.labels = current_user.consumption_per_day_history.map { |b| “#{Date::ABBR_MONTHNAMES[b[:month]]} #{b[:year]}” }
    labels.rotate = 320
    x_axis.labels = labels

    max = 0
    @bills.each do |bill|
    max = bill.consumption_per_day if bill.consumption_per_day > max
    end

    y_axis = YAxis.new
    y_axis.set_inner_bg_colour( ‘#E3F0FD’, ‘#CBD7E6′, 90 )
    y_axis.set_range(0, max, 2)
    y_axis.colour = ‘#C0C0C0′
    y_axis.set_grid_colour(’#C0C0C0′)

    # x and y leyends
    x_legend = XLegend.new(’Month and year’)
    x_legend.set_style(’{font-size: 14px; color: #89C33E}’)
    y_legend = YLegend.new(”kWh/day”)
    y_legend.set_style(’{font-size: 20px; color: #89C33E}’)

    t = Tooltip.new
    t.set_shadow(true)
    t.stroke = 4
    t.colour = ‘#89c33e’
    t.set_background_colour(”#EEEEEE”)
    t.set_title_style(”{font-size: 13px; font-weight: bold; color: #89C33E;}”)
    t.set_body_style(”{font-size: 11px; color: #000000;}”)

    chart = OpenFlashChart.new
    chart.title = title
    chart.bg_colour = ‘#FFFFFF’
    chart.add_element(bar)
    chart.set_y_legend(y_legend)
    chart.add_element(line)
    chart.set_tooltip(t)
    chart.x_axis = x_axis
    chart.y_axis = y_axis

    render :text => chart.to_s
    end

    so the both of them look good i can also make difference between the tooltips but when hovering the chart, the line tooltip looks great it displays all the values (i mean #x_label# #x# and #val#) but for the bar i can only get the #val# so don’t know how to get this working… am i doing anything wrong? can you please help me?

  21. By charlie on Feb 4, 2010 | Reply

    Check the JSON output and see if you notice anything strange.
    It all looks good to me, but x_label may not be supported for bar graphs.
    Ask in the open flash chart forums for more information. This plugin makes use of the swf file monkeyboy created.
    Forum - http://forums.openflashchart.com/

  22. By Helmut on Feb 4, 2010 | Reply

    @charlie, hey thanks for your reply! i found a way to make the #x_label# magic value work! i downloaded this file ” OFC2Patches-DZ-Hyperion.zip” from http://www.ofc2dz.com/OFC2/downloads/ofc2Downloads.html and then replaced the open-flash-chart.swf file with the one in the .zip and reloaded my chart and x_label appeared on my tooltip!

    anyway thanks a lot and hope this could be useful for someone!

Post a Comment