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!






32 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!

  23. By wadner on Apr 15, 2010 | Reply

    Hi,

    Can you provide an exposure of your JSON in your examples above? I’m porting this over and it would be very helpful for troubleshooting if you can expose the JSON that is being used by your examples.

    Thanks!

  24. By charlie on Apr 18, 2010 | Reply

    You can get to the JSON of any of my examples, just do a “view page source” and look for the “data-file”.
    So for this one it is here - http://pullmonkey.com/projects/open_flash_chart2/multi_bar_tooltip

  25. By vivi on Oct 27, 2010 | Reply

    Hi Charlie, could i use LineValue.new ? I tried to use it for tooltip (as you did in Bar) but got error. Need your help. Thanks

  26. By charlie on Oct 27, 2010 | Reply

    Hey vivi - what error are you getting?

  27. By vivi on Oct 28, 2010 | Reply

    Thanks for your reply. Finally i found the way to solve my problem.

    My error is: for big number such as: 15234123, it dispalys as 15.234,123 for German formatting. It must be 15.234.123.

    So, the solution is: downloaded ”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.

  28. By xinghu on Jan 10, 2011 | Reply

    Hi,Charlie

    I install the plugin from your github, but I can not display the tooltip box in my chart.

    After I change the open-flash-chart.swf(269.7kb) to http://pullmonkey.com/projects/open-flash-chart.swf(256.9kb) it works!

    But the new swf file can not display the xaxis labels’s visible_steps.

    Could you tell me what to do if I want to see the tooltip and the correct xaxis label ?

    many thanks!

    here is my json:

    {”elements”:[{"text":"","tip":"time:#x_label#
    index:#val#","colour":"#007cc8","values":[2829.833,2830.258,2831.312,2831.584,2832.758,2831.998,2831.599,2831.406,2831.101,2827.963,2824.592,2823.374,2823.078,2824.141,2825.889,2827.618,2828.199,2829.298,2830.373,2830.038,2831.312,2831.706,2832.64,2833.035,2833.566,2831.664,2831.031,2831.308,2830.218,2830.994,2834.123,2837.054,2841.406,2844.94,2847.149,2845.525,2845.55,2846.142,2846.136,2843.756,2842.929,2841.545,2840.982,2840.962,2841.275,2840.686,2840.99,2839.415,2838.567,2836.105,2835.154,2833.895,2835.294,2835.532,2835.041,2834.321,2835.096,2834.344,2833.861,2832.398,2831.919,2831.774,2833.071,2833.237,2831.653,2831.084,2829.229,2827.437,2827.502,2826.824,2827.983,2828.416,2827.954,2827.115,2826.375,2826.121,2825.004,2825.159,2825.761,2828.334,2829.97,2832.255,2831.886,2831.141,2831.482,2831.176,2830.187,2830.031,2830.7,2831.193,2833.168,2833.893,2830.981,2829.962,2829.336,2828.497,2828.645,2827.332,2827.716,2827.864,2829.714,2828.44,2828.365,2829.459,2832.113,2833.213,2833.206,2833.185,2833.883,2833.65,2834.023,2833.916,2832.076,2828.826,2827.395,2827.522,2827.408,2827.406,2827.064,2827.138,2826.62,2825.766,2825.12,2824.56,2824.098,2823.55,2822.61,2824.378,2823.523,2825.467,2823.947,2823.755,2822.931,2821.115,2819.29,2818.513,2816.215,2818.149,2817.907,2818.256,2816.888,2819.735,2819.51,2819.708,2819.593,2818.687,2818.362,2816.629,2819.641,2819.681,2819.004,2818.567,2818.843,2817.867,2818.009,2817.147,2816.66,2818.672,2820.84,2821.248,2822.563,2823.984,2825.813,2825.978,2825.247,2824.219,2823.807,2823.307,2822.554,2822.017,2821.282,2819.424,2817.658,2815.627,2813.511,2813.862,2813.292,2813.581,2814.132,2815.289,2820.388,2821.058,2820.33,2819.666,2819.2,2817.659,2815.781,2814.9,2814.228,2813.481,2817.568,2816.492,2816.685,2815.8,2814.246,2813.377,2813.868,2813.565,2811.275,2810.574,2807.945,2807.956,2809.724,2808.419,2807.817,2807.712,2805.833,2802.863,2801.33,2801.2,2800.618,2802.557,2801.956,2802.215,2801.253,2799.358,2796.496,2794.495,2791.221,2789.553,2788.104,2787.761,2787.41,2788.602,2788.785,2790.857,2791.892,2792.961,2793.476,2793.549,2792.832,2793.021,2792.588,2792.688,2792.497,2792.04,2791.385,2791.558,2791.683,2792.448,2792.377],”font-size”:10,”type”:”line”,”dot-style”:{”value”:{”size”:7,”halo-size”:1},”type”:”dot”},”halo-size”:2,”width”:1}],”tooltip”:{},”y_axis”:{”steps”:15,”max”:2857.149,”stroke”:1,”colour”:”#9b9b9b”,”min”:2777.41,”grid-colour”:”#9b9b9b”,”offset”:false},”x_axis”:{”steps”:60,”stroke”:2,”colour”:”#9b9b9b”,”labels”:{”steps”:60,”visible-steps”:120,”rotate”:0,”labels”:["09:30","09:31","09:32","09:33","09:34","09:35","09:36","09:37","09:38","09:39","09:40","09:41","09:42","09:43","09:44","09:45","09:46","09:47","09:48","09:49","09:50","09:51","09:52","09:53","09:54","09:55","09:56","09:57","09:58","09:59","10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49","10:50","10:51","10:52","10:53","10:54","10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09","11:10","11:11","11:12","11:13","11:14","11:15","11:16","11:17","11:18","11:19","11:20","11:21","11:22","11:23","11:24","11:25","11:26","11:27","11:28","11:29","11:30/13:00","13:01","13:02","13:03","13:04","13:05","13:06","13:07","13:08","13:09","13:10","13:11","13:12","13:13","13:14","13:15","13:16","13:17","13:18","13:19","13:20","13:21","13:22","13:23","13:24","13:25","13:26","13:27","13:28","13:29","13:30","13:31","13:32","13:33","13:34","13:35","13:36","13:37","13:38","13:39","13:40","13:41","13:42","13:43","13:44","13:45","13:46","13:47","13:48","13:49","13:50","13:51","13:52","13:53","13:54","13:55","13:56","13:57","13:58","13:59","14:00","14:01","14:02","14:03","14:04","14:05","14:06","14:07","14:08","14:09","14:10","14:11","14:12","14:13","14:14","14:15","14:16","14:17","14:18","14:19","14:20","14:21","14:22","14:23","14:24","14:25","14:26","14:27","14:28","14:29","14:30","14:31","14:32","14:33","14:34","14:35","14:36","14:37","14:38","14:39","14:40","14:41","14:42","14:43","14:44","14:45","14:46","14:47","14:48","14:49","14:50","14:51","14:52","14:53","14:54","14:55","14:56","14:57","14:58","14:59","15:00"]},”grid-colour”:”#9b9b9b”,”offset”:false},”bg_colour”:”#ffffff”}

  29. By res on Mar 1, 2011 | Reply

    Hi I m using ofc2 for my charts. and m havin issues wit tooltips.it continues to hover even wen pointer is not on line or points.please suggest

    Thanks n Regards
    Res

  30. By charlie on Mar 2, 2011 | Reply

    Hey Res,

    What swf file version are you using with the plugin? The one provided or a later version?

    - Charlie

  31. By michael on Aug 4, 2012 | Reply

    Started GET “/chars/graph_code” for 127.0.0.1 at 2012-08-04 11:03:43 +0800
    Processing by CharsController#graph_code as */*
    Completed 500 Internal Server Error in 16ms

    NoMethodError (undefined method `returning’ for #):
    lib/myplugin/open_flash_chart/lib/open_flash_chart/base.rb:118:in `method_missing’
    lib/myplugin/open_flash_chart/lib/open_flash_chart/base.rb:40:in `render’
    app/controllers/chars_controller.rb:60:in `graph_code’

    why render :text => chart.to_s go wrong?

  32. By charlie on Aug 4, 2012 | Reply

    Hey Michael - Can you post the code that you see having returning in it? Also, are you using the latest from github?

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