Open Flash Chart II - Point by Point plotting

August 18th, 2008 by charlie

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!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials

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

  1. Stuart Says:
    August 18th, 2008 at 09:51 PM 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. charlie Says:
    August 19th, 2008 at 12:12 AM
    @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. Nathan Leavitt Says:
    September 10th, 2008 at 03:24 PM 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. charlie Says:
    September 10th, 2008 at 10:44 PM
    @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. Mark Says:
    September 17th, 2008 at 04:45 PM 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. syl Says:
    September 18th, 2008 at 09:29 AM @charlie - Can I insert an image background to the graph? or is it not yet ported?
  7. charlie Says:
    September 18th, 2008 at 03:57 PM
    @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. charlie Says:
    September 19th, 2008 at 09:32 AM
    @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. syl Says:
    September 23rd, 2008 at 01:48 AM @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. charlie Says:
    September 23rd, 2008 at 08:13 AM
    @Syl - I agree, that would be nice to have. It has to come from teethgrinder, ask in the OFC Forums.
  11. Mark Says:
    September 24th, 2008 at 04:07 PM Charlie, just FYI - your suggestion to render with chart.to_json directly solved the weird problem. Thanks!

  12. charlie Says:
    September 24th, 2008 at 04:40 PM
    @Mark - not a problem, glad to help.
  13. Jaikishan Jalan Says:
    September 29th, 2008 at 08:30 AM Tooltips are not appearing my case. Am I doing something wrong?


    <filter:code>

    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. charlie Says:
    September 29th, 2008 at 04:33 PM
    @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 OFC Forums how this would be done or when this would be made available.
  15. syl Says:
    October 2nd, 2008 at 04:14 AM @Jaikishan Jalan - you have to add the following into the RAILS_ROOT/vendor/plugins/open_flash_chart.git/init.rb file:
    require 'tooltip'
  16. charlie Says:
    October 2nd, 2008 at 04:33 PM Ah - ok, or you can get the latest from github - http://github.com/pullmonkey/open_flash_chart/tree/master/init.rb
  17. Jaikishan Jalan Says:
    October 22nd, 2008 at 02:55 AM 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. Jaikishan Jalan Says:
    October 22nd, 2008 at 02:58 AM 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. charlie Says:
    October 22nd, 2008 at 12:12 PM
    @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. Rodney Says:
    October 24th, 2008 at 05:55 PM 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. charlie Says:
    October 24th, 2008 at 11:03 PM
    @Rodney - try chart.render instead, hope that helps.
  22. charlie Says:
    October 25th, 2008 at 01:29 AM 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 this file.
  23. David Lowenfels Says:
    October 27th, 2008 at 11:20 AM 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. charlie Says:
    October 27th, 2008 at 01:28 PM
    Pulled down the changes, thanks David.

    To see the changes - http://github.com/pullmonkey/open_flash_chart/commit/95983957d727486ee4d7463972202287cf31c730

Leave a Reply

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