01 Aug
Open Flash Chart II – Line Graph
Got another comment asking about creating a line graph. This example is based on teethgrinder's line graph example.
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
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/data-lines-2.php title = Title.new("Multiple Lines") data1 = [] data2 = [] data3 = [] 10.times do |x| data1 << rand(5) + 1 data2 << rand(6) + 7 data3 << rand(5) + 14 end line_dot = LineDot.new line_dot.text = "Line Dot" line_dot.width = 4 line_dot.colour = '#DFC329' line_dot.dot_size = 5 line_dot.values = data1 line_hollow = LineHollow.new line_hollow.text = "Line Hollow" line_hollow.width = 1 line_hollow.colour = '#6363AC' line_hollow.dot_size = 5 line_hollow.values = data2 line = Line.new line.text = "Line" line.width = 1 line.colour = '#5E4725' line.dot_size = 5 line.values = data3 y = YAxis.new y.set_range(0,20,5) x_legend = XLegend.new("MY X Legend") x_legend.set_style('{font-size: 20px; color: #778877}') y_legend = YLegend.new("MY Y Legend") y_legend.set_style('{font-size: 20px; color: #770077}') chart =OpenFlashChart.new chart.set_title(title) chart.set_x_legend(x_legend) chart.set_y_legend(y_legend) chart.y_axis = y chart.add_element(line_dot) chart.add_element(line_hollow) chart.add_element(line) 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 – Line Graph”
Sorry, comments for this entry are closed at this time.
Thanks for the example charlie.
I am trying to set the x an y legends as well.
I have tried to apply the same logic you used to compose teethgrinder’s example in your rails plugin.
chart.set_x_legend("days") does not yield a x legend
chart.set_y_legend("color") does not yield a Y legend
Am I trying to set an attribute for the wrong object?
@andrew – made changes to my example.
Change one – create the legends:<filter:code attributes=lang="ruby">x_legend = XLegend.new("MY X Legend")
x_legend.set_style(‘{font-size: 20px; color: #778877}’)
y_legend = YLegend.new("MY Y Legend")
y_legend.set_style(‘{font-size: 20px; color: #770077}’)
</filter:code>Change two – apply the legends:<filter:code attributes=lang="ruby">chart.set_x_legend(x_legend)
chart.set_y_legend(y_legend)</filter:code>Hope that helps.
Charlie, I’m trying to apply label styles to x_label.. diagonal does not seem to work…
my code:
x = XAxis.new
x.set_labels([‘Jan’, ‘feb’])
x.set_label_style(10, ‘#9933cc’, 2)
‘2’ is supposed to change the orientation of the label, and it just stays horizontal, not diagonal.
If anything I think it would be great to see the example http://pullmonkey.com/projects/open_flash_chart/view_source_code/null_data
done with version II.
@Andrew – See if this answers your x axis rotation – http://pullmonkey.com/2008/8/5/open-flash-chart-ii-x-axis-label-rotations
I will get a null data example up asap.
Charlie,
Great work, excellent and fun plugin. I am struggling to figure out how to create a data set with paired x, y values that are graphed on a grid with defined X and Y axis scales.
I’m graphing data that would look something like:
point_1 = (24,500, 4)
point_2, = (46,450, 6)
point_3 = (51,100, 7)
point_4 = (62,850, 14)
Can I define the X-axis scale as 0-65,000 with vertical lines every 10,000 and have the plugin render the data points where they fall?
Also (forgive me if this is a dumb question, I’ve looked but not digged for an answer to this): How do you change the X and Y axis colors and gridline colors?
Thanks again,
Stuart
@Stuart – I tried my best to answer all your questions with this article – http://pullmonkey.com/2008/8/18/open-flash-chart-ii-point-by-point-plotting
Let me know if I need to go in to more detail or not.
Charlie,
Thanks for the explanation, exactly what I needed…
Stuart
Thx a lot for your detailed example. In a few hours I was able to integrate OFC2 smoothly in a project also using Gruff.
You can see an example here :
http://www.thinkosphere.com/poll/mcq_txt/show_time_results/4
However, I have a question : how can we set a legend on a multi line graph ? In your exemple, a legend giving what each line means is lacking.
To be more precise on what I call the legend, if you follow the link given, the legend is "Boeing" or "Airbus".
OK I’ve just had a look at this page : <http://teethgrinder.co.uk/open-flash-chart/gallery-data.php> and searching more in OFC2 plugin code I realized I just needed to add the following code :
<filter:code attributes=lang="ruby">
line.text = ‘line’
line_dot.text = ‘line_dot’
line_hollow.text = ‘line_hollow’
< /filter:code>
I suggest you add it in your example 😉
A live example can still be seen <a href="http://www.thinkosphere.com/poll/mcq_txt/show_time_results/4">here</a>.
H
Looks like some links were escaped.
First the page I am talking about is:
<a href="http://teethgrinder.co.uk/open-flash-chart/gallery-data.php">http://teethgrinder.co.uk/open-flash-chart/gallery-data.php</a>
then the code is :
<filter:code attributes=lang="ruby">
line.text = ‘line’
line_dot.text = ‘line_dot’
line_hollow.text = ‘line_hollow’
</filter:code>
@Harry Seldon – Thanks for the info – added it to the example.
Thank you for the plugin.
I’d like to disable X- and Y-Axis and just display the line only. But how to do this?
Bye
How to attach a line_dot to YAsixRight in version II? I can only find example of version I, I tried this, it can show the right y axis, but the line_dot still based on the left axis
yr = YAxisRight.new
yr.set_range(0, weblogs[:y_right_max], weblogs[:y_right_max]/10)
line_dot.set_axis yr
line_dot.set_y_axis yr
line_dot.set_y_right axis yr
Can you give an example? thanks a lot
I am facing the same problem. I can get the "right y axis" in the chart, but there seems to be no function like attach_to_y_right_axis() in v2.0 of open-flash-chart. My data is always based onb left y axis. Can anybody suggest how to attach data (represented by a "Line", "Bar" etc to y right axis?
I am trying to create a line graph inside my chart that already contains a bar graph. Looking at the code it appears to me that for some reason the line graph @values is always set to empty no matter what you pass into the .new().
Here is my example
c < planned_durations )
When the chart is created I am given a legend that says Page Views and no line graph. When I stepped through the code I see two locations where @values = [], one inside line.rb on line 15 and then again in line_base.rb on line 9. Also in line_base.rb @text is set to “Page Views”.
In looking at the code for the bar graphs it doesn’t appear that the @values or the @text variables get set at all anywhere, so I am not sure why they are being set in the line graph.
I was able to make this work by commenting out everything inside the line_base.rb file except the def loop method. I also had to comment out the @values = [] on line 15 inside line.rb. I am not sure this is the correct fix, but it is currently working for me. Anyone seeing this issue?
-Eric
Hello,
This plugin looks great and I am attempting to give it a whirl, but I am running into a few problems. I have followed the directions here and on the previous page but I am only getting a blank page.
firebug is showing me “swfobject is not defined”
but I have inlcluded
in first the index.html.erb page and now in a simple layout file I have created.
no idea why it would be undefined…. does it matter what version of rails I use? I am using 2.3.2
Thanks
ps is there someplace where people post/discuss similar problems?
Hey Mike – do you have a page I can look at? Otherwise, post some code and I can probably help.
oh my…. swfobject.js was not in public/javascripts
i am an idiot, my posts should be deleted, no idea how I did not do that this time, I tried a couple of different instances of the test application and I guess I just did not put it in there this time.
On a separate note, when I created test apps before some charts would work and others would not, sometimes they would be blank, sometimes I would get a little data load error in place of the chart… ill keep plugin away and hopefully not do anything too stupid
I am replicating the example as follows but dont see any line at all, everythinh else shows up. If I copy paste the example code I onlly see the “line” not the other two.
data = []
@gcertificates.each do |x|
data << x.total_score
end
line_dot = LineDot.new
line_dot.text = “Eco score”
line_dot.width = 4
line_dot.colour = ‘#38E081’
line_dot.dot_size = 5
line_dot.values = data
title = Title.new(‘Eco points over 6 months’)
title.set_style(‘{font-size: 25px; color: #38E081;font-family: Molengo}’)
x_axis = XAxis.new
x_axis.set_colour(‘#000000’)
x_axis.set_grid_colour(‘#000000’)
tmp = []
@gcertificates.each do |ct|
tmp < graph.render, :layout => false
}
the json..
{“x_legend”:{“text”:”Date”,”style”:”{font-size: 20px; color: 38E081}”},”title”:{“text”:”Eco points over 6 months”,”style”:”{font-size: 25px; color: #38E081;font-family: Molengo}”},”elements”:[{“text”:”Eco score”,”dot-size”:5,”colour”:”#38E081″,”font-size”:10,”type”:”line_dot”,”values”:[32,22,34,31,39],”width”:4}],”y_axis”:{“steps”:100,”max”:500,”colour”:”#000000″,”min”:0,”grid-colour”:”#000000″},”y_legend”:{“text”:”Eco Score”,”style”:”{font-size: 20px; color: 38E081}”},”x_axis”:{“colour”:”#000000″,”labels”:{“labels”:[{“size”:18,”text”:”May 13″,”colour”:”#000000″,”rotate”:”0″},{“size”:18,”text”:”May 13″,”colour”:”#000000″,”rotate”:”0″},{“size”:18,”text”:”May 13″,”colour”:”#000000″,”rotate”:”0″},{“size”:18,”text”:”May 13″,”colour”:”#000000″,”rotate”:”0″},{“size”:18,”text”:”May 25″,”colour”:”#000000″,”rotate”:”0″}]},”grid-colour”:”#000000″}}
The code works fine if I use Line class but LineDot or LineHollow dont work, either in my code or the example.
Hi thanks for this great plugin.
when i try to do this example, i can only make it show 1 line. I’ve tried copying your code exactly and it still only shows one line. Any suggestions?
Can anyone help me if in adding the on_click event for line graph, which seem to be missing. I have added the on_click event for bar and pie graph but i dont see the option to do so.
Any help is appreciated.
Thanks,
Madhu.
I’m facing the same problem : I have juste 1 line rendering (the ‘Line’ class) and not the 2 others. Do I have to change something ?
The open-flash-chart.swf file seems to be different in the plugin : I downloaded the version used in this page and then the example works properly. I think the problem appeared when the plugin was “updated to Lug Wyrm Charmer version of Ruby” : http://github.com/pullmonkey/open_flash_chart/commit/2c6bfa376013233ab942222bc60a4ba03c8a8517
I think I’ll have either to use the old version of open-flash-chart.swf or update the entire plugin…
Sad, sad world
Thanks – update at will, it is open source after all 🙂 With all the users, it would be nice to have some contributions.
Thanks for your answer Charlie. Do you think the whole plugin needs to be updated to the latest version of OFC ?
You’right : I could, and I should, help you maintaining the plugin. Do you have an email address where I can contact you ? (you got mine now)
1) No, the whole plugin does not need updated, you can get the new swf and still use the existing plugin. If you find a class that is not implemented, that teethgrinder uses in his php examples, then that is something that would need to be added. Everything else is handled through method_missing. If you need a new class, you would just copy what I have in one of the other classes – class NewClass < OFC::Base. 2) You can contact me through github 🙂
To say it with the same words:
I’m facing the same problem : I have juste 1 line rendering (the ‘Line’ class) and not the 2 others (LineDot and LineHollow). Do I have to change something ?
Hi,charlie
where can I get the new swf ?
All swfs are maintained and provided by teethgrinder here – http://teethgrinder.co.uk/open-flash-chart-2/downloads.php
Hi I am trying to implement open flash into my rails 3 app. I’ve followed this tutorial and get the following error, why is this?
swfobject.embedSWF(“/open-flash-chart.swf”, “flash_content_N388l0nV”, “600”, “300”, “9.0.0”, “expressInstall.swf”,{“data-file”:”%2Ftest_it%2Fgraph_code”});