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!





Filed under: Home, Open Flash Chart Graphs, development, projects, rails, ruby, tutorials Tags: , , , , , ,


15 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?

Post a Comment