Open Flash Chart II - Line Graph

August 1st, 2008 by charlie

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!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials

12 Responses to “Open Flash Chart II - Line Graph”

  1. andrew Says:
    August 1st, 2008 at 03:30 PM 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. charlie Says:
    August 1st, 2008 at 03:58 PM
    @andrew - made changes to my example.
    Change one - create the legends:


    1
    2
    3
    4
    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}')

    Change two - apply the legends:


    1
    2
    		 
    chart.set_x_legend(x_legend)
    chart.set_y_legend(y_legend)

    Hope that helps.
  3. andrwe Says:
    August 5th, 2008 at 12:23 PM 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. andrew Says:
    August 5th, 2008 at 12:53 PM 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. charlie Says:
    August 5th, 2008 at 02:57 PM
    @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. Stuart Says:
    August 18th, 2008 at 12:11 AM 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. charlie Says:
    August 18th, 2008 at 11:23 AM
    @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. Stuart Says:
    August 18th, 2008 at 12:12 PM Charlie,

    Thanks for the explanation, exactly what I needed...

    Stuart
  9. Harry Seldon Says:
    September 15th, 2008 at 03:41 PM 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. Harry Seldon Says:
    September 16th, 2008 at 11:47 AM OK I've just had a look at this page : <http: /> and searching more in OFC2 plugin code I realized I just needed to add the following code :
    <filter:code>
    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 here.

    H



  11. Harry Seldon Says:
    September 16th, 2008 at 11:53 AM Looks like some links were escaped.
    First the page I am talking about is:
    http://teethgrinder.co.uk/open-flash-chart/gallery-data.php

    then the code is : 



    1
    2
    3
    4
    		 

    line.text = 'line'
    line_dot.text = 'line_dot'
    line_hollow.text = 'line_hollow'

  12. charlie Says:
    September 19th, 2008 at 09:27 AM
    @Harry Seldon - Thanks for the info - added it to the example.

Leave a Reply

Check here to see how to submit syntax highlighted code to the comments.