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: development, Home, Open Flash Chart Graphs, projects, rails, ruby, tutorials Tags: , , , , , ,


13 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

  11. By Muni on Oct 28, 2010 | Reply

    This Example worked as it is intended. However there are couple of things I need to clarify.

    In the graph, I am getting the text like “Page Views”.. How to remove this?

    And also when I add another 5 elements to the Y.axis, the Graph is broken. How to add as many elements to the Y.axis? Any way that we can manage the Bar width and color?

    And also I am not getting the Tooltip! please help!

    Munendra Chevuru (Muni)

  12. By charlie on Oct 28, 2010 | Reply

    1) “Page Views” text – not sure what you mean exactly, where is it showing up? Does the example you are using show it as well? Is it something that can be taken out in the code?
    2) Adding 5 elements to Y Axis breaks Graph – do you have the same number of elements as you do labels? I’ve had thousands of entries, so we’d have to look at what you have.
    3) No tooltip – this might be related to #2 above. Post a snippet of your code to gist or pastie.

  13. By Jhony on Dec 17, 2010 | Reply

    Hi I need to plot horizontal groups as shown in this link
    http://ofc2dz.com/OFC2/examples/HorizontalBars.html
    but I see an improvement here to apply how to resolve this

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