Open Flash Chart II - Horizontal Bar Graph

July 30th, 2008 by charlie

Just got another comment asking about making a horizontal bar chart. This example is based on teethgrinder's horizontal bar example. So you will need to get the latest plugin since this required that I add a few things as of this article.
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


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/horizontal-bar-chart.php
    title = Title.new("HBar Graph")

    hbar = HBar.new
    # could also do it one at a time with hbar.append_value(...) or
    # hbar.values << ...
    hbar.values = [HBarValue.new(0,4), HBarValue.new(4,8), HBarValue.new(8,11)]

    chart = OpenFlashChart.new
    chart.set_title(title)
    chart.add_element(hbar)

    x = XAxis.new
    x.set_offset(false)
    x.set_labels(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'])
    chart.set_x_axis(x)

    y = YAxis.new
    y.set_offset(true)
    y.set_labels(["Make garden look sexy","Paint house","Move into house"])
    chart.set_y_axis(y)

    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

7 Responses to “Open Flash Chart II - Horizontal Bar Graph”

  1. Andrew Kaspick Says:
    July 30th, 2008 at 11:29 PM This example wasn't working for me. I checked the output of your graph by viewing the returned json with what my version was returning and your copy differed in how the "labels" were output.

    I removed the set_labels and labels methods in the plugin and now I get the same results as your example.

    Any reason why the label code is needed as it seems to "not work"?

    Thanks
  2. Andrew Kaspick Says:
    July 31st, 2008 at 12:11 AM The month names on the x-axis also don't seem to display. I tried a few things, but nothing seemed to work.
  3. charlie Says:
    July 31st, 2008 at 09:58 AM
    @Andrew K. - Hey thanks .. the label code should not be at the open flash chart object level, I think those changes are only needed for XAxis. I fixed this in the most recent code and committed. Also, it should not be x.set_labels_from_array, it should have just be x.set_labels. So the month names should show up now.
  4. Cecci Says:
    August 2nd, 2008 at 10:06 AM In the graphs of horizontal bars can they add lines on every bar? To do graphs Gantt? Or already there exists inside the plugin a way of doing graphs Gantt?
  5. Cecci Says:
    August 2nd, 2008 at 10:21 AM Also might it do that they are read the months, activities and the points to create the bars of the database?
  6. Elijah Says:
    October 17th, 2008 at 07:12 PM Hello! Thank you for this. I was wondering if there's a way to make HBar 3-D? Thanks!

    Elijah
  7. charlie Says:
    October 17th, 2008 at 11:01 PM
    @Elijah - not at the moment - official site.

    I have started looking in to the AS behind OFCII a little more and I am going to start implementing some of these suggestions, but no promises :)

Leave a Reply

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