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”
Sorry, comments for this entry are closed at this time.
Thanks! Yep, I was doing it wrong 🙂
I really appreciate the detailed example.
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
I am sorry but for me the tooltips does not work…
@syl – make sure you have the latest plugin and the latest open_flash_chart.swf as of this article.
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.
@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?
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.
@syl – here are the instructions – http://pullmonkey.com/projects/open_flash_chart2, all the latest code is out on github.
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.
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!
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
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’
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’
@Syl – thank you very much for your troubleshooting. I have corrected this in the git hub release.
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
@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 🙂
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
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 😉
Thanks for the info
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( ‘0x80a033’, ‘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?
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/
@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!
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!
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
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
Hey vivi – what error are you getting?
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.
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”}
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
Hey Res,
What swf file version are you using with the plugin? The one provided or a later version?
– Charlie
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?
Hey Michael – Can you post the code that you see having returning in it? Also, are you using the latest from github?