PullMonkey Blog

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”

  1. By andrew on Aug 1, 2008 | Reply

    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?

  2. By charlie on Aug 1, 2008 | Reply

    @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.

  3. By andrwe on Aug 1, 2008 | Reply

    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.

  4. By andrew on Aug 1, 2008 | Reply

    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.

  5. By charlie on Aug 1, 2008 | Reply

    @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.

  6. By Stuart on Aug 1, 2008 | Reply

    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

  7. By charlie on Aug 1, 2008 | Reply

    @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.

  8. By Stuart on Aug 1, 2008 | Reply

    Charlie,

    Thanks for the explanation, exactly what I needed…

    Stuart

  9. By Harry Seldon on Aug 1, 2008 | Reply

    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".

  10. By Harry Seldon on Aug 1, 2008 | Reply

    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

  11. By Harry Seldon on Aug 1, 2008 | Reply

    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>

  12. By charlie on Aug 1, 2008 | Reply

    @Harry Seldon - Thanks for the info - added it to the example.

  13. By frank on Aug 1, 2008 | Reply

    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

  14. By Seven on Aug 1, 2008 | Reply

    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

  15. By Shweta Agrawal on Aug 1, 2008 | Reply

    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?

  16. By Eric on Mar 22, 2010 | Reply

    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

  17. By mike on May 5, 2010 | Reply

    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?

  18. By charlie on May 5, 2010 | Reply

    Hey Mike - do you have a page I can look at? Otherwise, post some code and I can probably help.

  19. By mike on May 5, 2010 | Reply

    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

  20. By Nitin on May 28, 2010 | Reply

    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″}}

  21. By Nitin on May 28, 2010 | Reply

    The code works fine if I use Line class but LineDot or LineHollow dont work, either in my code or the example.

  22. By Wiguel on Jun 6, 2010 | Reply

    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?

  23. By Madhusudhan on Aug 4, 2010 | Reply

    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.

  24. By Fluck on Aug 19, 2010 | Reply

    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 ?

  25. By Fluck on Aug 19, 2010 | Reply

    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

  26. By charlie on Aug 23, 2010 | Reply

    Thanks - update at will, it is open source after all :) With all the users, it would be nice to have some contributions.

  27. By Fluck on Aug 24, 2010 | Reply

    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)

  28. By luis on Aug 26, 2010 | Reply

    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 ?

  29. By charlie on Aug 29, 2010 | Reply

    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 :)

  30. By xinghu on Sep 7, 2010 | Reply

    Hi,charlie

    where can I get the new swf ?

  31. By charlie on Sep 7, 2010 | Reply

    All swfs are maintained and provided by teethgrinder here - http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

  32. By David on Aug 17, 2011 | Reply

    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”});

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