PullMonkey Blog

18 Aug

Open Flash Chart II - Point by Point plotting


Got another comment, this time asking about all kinds of things:

  1. Plotting Points
  2. X Axis and Y Axis min and max ranges
  3. Coloring the X and Y Axis
  4. Coloring the X and Y gridlines

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

class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
  end

  def graph_code
    chart = OpenFlashChart.new

    title = Title.new("Scatter points")
    chart.set_title(title)

    scatter = Scatter.new('#FFD800', 10)  # color, dot size

    scatter.values = [
      ScatterValue.new(50,30),
      ScatterValue.new(305,400),
      ScatterValue.new(61,500,15),  # x, y, dot size
      ScatterValue.new(600,550),
      ScatterValue.new(459,300),
      ScatterValue.new(180,789)
    ]

    chart.add_element(scatter)

    x = XAxis.new
    x.set_range(0, 650, 100)  #min, max, steps
    # alternatively, you can use x.set_range(0,65000) and x.set_step(10000)
    x.colour = '#00FF00'
    # have to set the x axis labels because of scatter bug here - http://sourceforge.net/forum/message.php?msg_id=4812326
    x.set_grid_colour('#00F0FF')
    chart.set_x_axis(x)

    y = YAxis.new
    y.set_range(0,800,200)
    y.colour = '#FF0000'
    y.set_grid_colour('#FF00FF')
    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 %>





Note - The X Axis is not rendering properly, this is being discussed in the OFC Forums.


Good Luck!






30 Responses to “Open Flash Chart II - Point by Point plotting”

  1. By Stuart on Aug 18, 2008 | Reply

    Charlie, I copied your example into my controller and created the class ScatterValue:

    class ScatterValue < OpenFlashChart
    def initialize(x_value, y_value, dot_size=10)
    @x = x_value
    @y = y_value
    @dot_size = dot_size
    end
    end

    And it all worked like a peach. Trying to apply the same to a line chart, though, and I can’t seem to get the same results. Any tips on an initialize method for a LineValue class (or something similar?) Thanks for your help.

    -Stuart

  2. By charlie on Aug 18, 2008 | Reply

    @Stuart - oh man! sorry about that, fixed it in my own code to get the scatter graphs working but completely forgot to commit it. Glad you were able to figure it out :)
    I will work out the LineValue stuff tomorrow morning and get back to you.

  3. By Nathan Leavitt on Aug 18, 2008 | Reply

    Hey.. Charlie,

    First off, great work on the plugin!

    I do have a question regarding the set_num_decimals. Is there a way that I can use that to set the number of decimals on each bar to 2. I’m using my bar chart to display money values and can’t figure out how to display with 2 decimals.

    Thanks!

  4. By charlie on Aug 18, 2008 | Reply

    @Nathan L. - I don’t see that it is part of OFC II. It was in OFC I.
    For now, you can at least round in ruby, check this out - http://www.hans-eric.com/code-samples/ruby-floating-point-round-off/

  5. By Mark on Aug 18, 2008 | Reply

    Charlie, thanks for all the cool work!

    Just started using openflashchart2 in a Rails 2.0.2 app, but ran into a weird infinite loop when preparing the chart data (page has a couple of your simple Bar chart samples). Eventually the stack blows:

    stack level too deep
    [RAILS_ROOT]/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb:23:in `to_s’
    [RAILS_ROOT]/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb:23:in `to_json’

    … hundreds more like this …

    [RAILS_ROOT]/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb:23:in `to_s’
    [RAILS_ROOT]/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb:23:in `to_json’
    [RAILS_ROOT]/vendor/plugins/open_flash_chart/lib/open_flash_chart.rb:23:in `to_s’
    [RAILS_ROOT]/app/controllers/test_it_controller.rb:37:in `graph_one’

    I happened to start using the built-in Ruby 1.8.6 csv library the same day this started cropping up, but that’s about the only coincidental change I can relate this to.

    I’m guessing some metaprogramming magic may be involved, but I have no clue how to debug it further.

    Thanks for any tips!

  6. By syl on Aug 18, 2008 | Reply

    @charlie - Can I insert an image background to the graph? or is it not yet ported?

  7. By charlie on Aug 18, 2008 | Reply

    @Mark -

    Instead of doing render :text => chart.to_s just do
    render :text => chart.to_json .. I guess it depends on your environment, never seen this problem before.

    @syl - I will take a look and post an example.

  8. By charlie on Aug 18, 2008 | Reply

    @syl - I see where it was implemented in OFC I - http://teethgrinder.co.uk/open-flash-chart/gallery-bg-image.php

    You mention that I should port it, maybe I missed it. Where did you see it for OFC II?

  9. By syl on Aug 18, 2008 | Reply

    @charlie - Exact!! it is not implemented in OFC II… I think that if it was in OFCI it will be enabled in OFCII.

    Sorry for that mistake. But do you think, I can ask to OFCII to implement that because I really need it..

  10. By charlie on Aug 18, 2008 | Reply

    @Syl - I agree, that would be nice to have. It has to come from teethgrinder, ask in the <a href="http://openflashchart.com/forum/index.php">OFC Forums</a>.

  11. By Mark on Aug 18, 2008 | Reply

    Charlie, just FYI - your suggestion to render with chart.to_json directly solved the weird problem. Thanks!

  12. By charlie on Aug 18, 2008 | Reply

    @Mark - not a problem, glad to help.

  13. By Jaikishan Jalan on Aug 18, 2008 | Reply

    Tooltips are not appearing my case. Am I doing something wrong?

    <filter:code attributes=lang="ruby">

    student_comparison_graph = OpenFlashChart.new

    # Set style of graph
    title = Title.new("")
    student_comparison_graph.title = title
    student_comparison_graph.bg_colour=’#FFFFFF’
    t = Tooltip.new
    t.set_shadow(true)
    t.stroke = 1
    t.colour = ‘#000000′
    t.set_background_colour("#FFFFFF")
    t.set_title_style("{font-size: 10px; color: #006666;}")
    t.set_body_style("{font-size: 10px; color: #006666;}")
    student_comparison_graph.set_tooltip(t)
    #Style set

    #…code to set value array

    scatter = Scatter.new(’#000000′, 5)
    scatter.values = value;
    scatter.set_tooltip(’#val#’)

    x= XAxis.new
    x.set_range(0,100,10)
    x.colour = ‘#d1d1d1′
    x.set_grid_colour(’#d1d1d1′)

    y=YAxis.new
    y.set_range(0,100,50)
    y.colour = ‘#FFFFFF’
    y.set_grid_colour(’#d1d1d1′)

    student_comparison_graph.set_y_axis(y)
    student_comparison_graph.set_x_axis(x)
    student_comparison_graph.add_element(scatter)
    render :text=> student_comparison_graph.to_s

    < /filter:code>

  14. By charlie on Aug 18, 2008 | Reply

    @Jaikishan Jalan - The way you are doing it looks like how I would accomplish it. I am not sure that setting tooltips are available for scatter charts. You should ask Monk.e.boy in the <a href="http://openflashchart.com/forum/">OFC Forums</a> how this would be done or when this would be made available.

  15. By syl on Aug 18, 2008 | Reply

    @Jaikishan Jalan - you have to add the following into the RAILS_ROOT/vendor/plugins/open_flash_chart.git/init.rb file:
    require ‘tooltip’

  16. By charlie on Aug 18, 2008 | Reply

    Ah - ok, or you can get the latest from github - <a href="http://github.com/pullmonkey/open_flash_chart/tree/master/init.rb">http://github.com/pullmonkey/open_flash_chart/tree/master/init.rb</a>

  17. By Jaikishan Jalan on Aug 18, 2008 | Reply

    I downloaded the latest version. But still the tool tip (only for scatter diagram) are not appearing. Is it a browser problem?I am using Firefox and I have not tried with IE as I am working with Linux. Any inputs?

  18. By Jaikishan Jalan on Aug 18, 2008 | Reply

    I downloaded the latest version. But still the tool tip (only for scatter diagram) are not appearing. Is it a browser problem?I am using Firefox and I have not tried with IE as I am working with Linux. Any inputs?

  19. By charlie on Aug 18, 2008 | Reply

    @Jaikishan Jalan - Tool tips work for me using this example in the new version:
    {"y_axis": {"steps": 200, "max": 800, "colour": "#FF0000", "min": 0, "grid-colour": "#FF00FF"}, "title": {"text": "Scatter points"}, "elements": [{"type": "scatter", "dot-size": 10, "colour": "#FFD800", "values": [{"x": 50, "y": 30}, {"x": 305, "y": 400}, {"x": 61, "y": 500, "dot-size": 15}, {"x": 600, "y": 550}, {"x": 459, "y": 300}, {"x": 180, "y": 789}]}], "x_axis": {"steps": 100, "max": 650, "colour": "#00FF00", "min": 0, "grid-colour": "#00F0FF"}}

    Are you doing anything special, like modifying the tool tips?

    Might have to do with your flash player version (see my other response to you).

    I use linux too and with FF.

  20. By Rodney on Aug 18, 2008 | Reply

    Charlie, I’m using OFC II in one of my projects successfully and then I have it installed in another project and am getting that darn stack overflow. Only, I tried switching to using chart.to_json, but that doens’t seem to help. I wish I could get a better trace, but mine looks just like the guys above as it keep references line 25 of open-flash-chart.rb. Any other ideas that I could try?

  21. By charlie on Aug 18, 2008 | Reply

    @Rodney - try chart.render instead, hope that helps.

  22. By charlie on Aug 18, 2008 | Reply

    I think I just figured out what might be happening. In some versions of the json implementation ( not sure which or why ) .to_json calls .to_s. So … I am aliasing .to_s to .render which calls .to_json which calls .to_s which calls render …… stack level too deep.

    So, use chart.render and take out the alias_method :to_s, :render … let me know if you figure out where .to_json is calling .to_s and if it is some plugin that you have or something.

    So remove line 32 of <a href="http://github.com/pullmonkey/open_flash_chart/tree/master/lib/open_flash_chart/base.rb">this file</a>.

  23. By David Lowenfels on Aug 18, 2008 | Reply

    This fixes the stack overflow issue:

    def to_json
    self.instance_values.to_json
    end

    see improvements at http://github.com/dfl/open_flash_chart/tree/master

  24. By charlie on Aug 18, 2008 | Reply

    Pulled down the changes, thanks David.

    To see the changes - <a href="http://github.com/pullmonkey/open_flash_chart/commit/95983957d727486ee4d7463972202287cf31c730">http://github.com/pullmonkey/open_flash_chart/commit/95983957d727486ee4d7463972202287cf31c730</a>

  25. By Jason Hamilton on Aug 18, 2008 | Reply

    I have created a scatter chart and would like to make each point a hyperlink. Do you know if this is possible? If so please advise on where I can find more info. Thanks, Jason

  26. By charlie on Aug 18, 2008 | Reply

    @Jason - look at <a href="http://teethgrinder.co.uk/open-flash-chart-2/line-on-click.php">this</a> for the onclick. It should be supported if you just say:<filter:code attributes=lang="ruby">scatter_point.set_on_click("<put some javascript here to redirect to another url>")</filter:code>

  27. By Jason Hamilton on Aug 18, 2008 | Reply

    @charlie,

    FYI, this feature in scatter charts is not supported in the current release of OFC but there is a workaround and will be fixed in the next release.

    http://forums.openflashchart.com/viewtopic.php?f=4&t=388

  28. By Chetan Thapliyal on Aug 18, 2008 | Reply

    Hi, I followed your above mentioned instructions and it worked flawlessly. But I am wondering about just one thing. Is it possible to draw the graph in four quadrants than just one?

  29. By charlie on Aug 18, 2008 | Reply

    @Chetan - sure, you can do four quadrants:
    Just set your range for x and y to include negative values, although, the x-axis and y-axis are still left and bottom respectively, instead of in the center.<filter:code attributes=lang="ruby">x.set_range(-325, 325, 100)</filter:code>

  30. By Gabriel Peplau Hahn on Sep 3, 2010 | Reply

    Hi there,

    I need to put the values at my chart as a static tooltip, directly on the chart without needing a hover action.
    Somebody knows how?

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