PullMonkey Blog

30 Jul

Open Flash Chart II - Horizontal Bar Graph


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!





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


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

  1. By Andrew Kaspick on Jul 30, 2008 | Reply

    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. By Andrew Kaspick on Jul 30, 2008 | Reply

    The month names on the x-axis also don’t seem to display. I tried a few things, but nothing seemed to work.

  3. By charlie on Jul 30, 2008 | Reply

    @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. By Cecci on Jul 30, 2008 | Reply

    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. By Cecci on Jul 30, 2008 | Reply

    Also might it do that they are read the months, activities and the points to create the bars of the database?

  6. By Elijah on Jul 30, 2008 | Reply

    Hello! Thank you for this. I was wondering if there’s a way to make HBar 3-D? Thanks!

    Elijah

  7. By charlie on Jul 30, 2008 | Reply

    @Elijah - not at the moment - <a href="http://teethgrinder.co.uk/open-flash-chart-2/horizontal-bar-chart.php">official site</a>.

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

  8. By Mikyl on Jul 30, 2008 | Reply

    Would there be any simple way to allow for stacked bars? I’m using this to graph a schedule; X-axis displays dates and y-axis displays names. Person A could be working from day1 to day3, AND day5 to day7. This would be two bars in the same row. Any tips would be great.

  9. By durike on Sep 21, 2009 | Reply

    Mikyl: you can add more HBars to one chart, just try it and I think you’ll get it.

  10. By jano on Sep 21, 2009 | Reply

    Horizontal stacked bar support is missing in official ofc2. For a patch, see
    http://ofc2dz.com/OFC2/examples/HorizontalStackedBars.html

Post a Comment