PullMonkey Blog

23 Sep

Open Flash Chart II – Javascript (Part 3)


This article is a follow on to Part 1 and Part 2. In this article, I will discuss how we can change between various charts on the fly - meaning, changing the SWFObject without rerendering the page but this time we can do it without storing everything in javascript variables initially. We will use an Ajax request to grab our data off the server.
As promised there are still more topics to come on OFC and Javascript:

Here is the graph and interface we are after in this example:

Load Original Chart (Bar Graph)||Load Chart from server data (Line Graph)

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

class TestItController < ApplicationController
  def index
    title = Title.new("MY TITLE - original")
    bar = BarGlass.new
    bar.set_values([1,2,3,4,5,6,7,8,9])
    @chart = OpenFlashChart.new
    @chart.set_title(title)
    @chart.add_element(bar)
  end

  def some_server_data
     title = Title.new("Multiple Lines")

    data1 = []
    data2 = []
    data3 = []

    10.times do |x|
      data1 << rand(5) + 1
      data2 << rand(6) + 7
      data3 << rand(5) + 14
    end

    line_dot = LineDot.new
    line_dot.text = "Line Dot"
    line_dot.width = 4
    line_dot.colour = '#DFC329'
    line_dot.dot_size = 5
    line_dot.values = data1

    line_hollow = LineHollow.new
    line_hollow.text = "Line Hollow"
    line_hollow.width = 1
    line_hollow.colour = '#6363AC'
    line_hollow.dot_size = 5
    line_hollow.values = data2

    line = Line.new
    line.text = "Line"
    line.width = 1
    line.colour = '#5E4725'
    line.dot_size = 5
    line.values = data3

    y = YAxis.new
    y.set_range(0,20,5)

    x_legend = XLegend.new("MY X Legend")
    x_legend.set_style('{font-size: 20px; color: #778877}')

    y_legend = YLegend.new("MY Y Legend")
    y_legend.set_style('{font-size: 20px; color: #770077}')

    chart =OpenFlashChart.new
    chart.set_title(title)
    chart.set_x_legend(x_legend)
    chart.set_y_legend(y_legend)
    chart.y_axis = y

    chart.add_element(line_dot)
    chart.add_element(line_hollow)
    chart.add_element(line)

    render :text => chart.to_s
  end
end

And in your view (index.html.erb):

1
2
3
4
5
6
7
8
9
10
11
12

<html>
  <head>
    <%= javascript_include_tag :defaults, 'swfobject' %>
  </head>
  <body>
    <%= @chart.js_open_flash_chart_object("my_chart_js_1", 550,300) %>
    <br/><br/>
    <%= @chart.link_to_ofc_load("Load Original Chart", "my_chart_js_1") %> ||
    <%= @chart.link_to_remote_ofc_load("Load Chart from server data", "my_chart_js_1", "/test_it/some_server_data") %>
  </body>
</html>

In this example, we make use of the link_to_remote_ofc_load method that basically creates a link_to_remote along with the function that we call to load the chart data into the swfobject chart from the server. It takes three arguments, the link text, the id of the div whose swf we will load new data into and the url from which to fetch the data.

For more information on the javascript callbacks that I setup here, you will want to view the page source and read about it further over at teethgrinder's tutorial.

Good Luck!



63 Responses to “Open Flash Chart II – Javascript (Part 3)”

  1. By Raphael on Sep 23, 2008 | Reply

    I’m providing them graphs for viewing their stats on a weekly and monthly basis.
    The monthly graph uses line charts (the swf file currently in your plugin), one value for each day.
    The weekly graph uses bar charts (the Ichor version of the swf file), one value for each hour.
    More graphs are likely to come.
    So the users use both graphs, and their browser has to download both swf files in order to view them…

  2. By charlie on Sep 23, 2008 | Reply

    @Raphael – so what you are saying is that there is not a single version of the swf file that can do everything you need. What can I do to help that? I thought you were suggesting that I package the plugin with the Ichor swf. But you say that you use the original swf for your line charts. I am not sure how you feel I can help … but am open for ideas. Just note that I don’t maintain the swf files, just the plugin.

  3. By Raphael on Sep 23, 2008 | Reply

    I’d simply like to use the new swf file for my line charts, so that users would have to download only one swf file, but the methods in the current version of your plugin doesn’t allow to use the line charts of the new swf file.

  4. By charlie on Sep 23, 2008 | Reply

    @Raphael – Ah, I see what is going on 🙂 I thought Ichor was some guy you got a swf file from, however it *IS* the currently official swf file – sorry about that – I have been out of the loop for quite some time. Thanks for being so patient! And now I understand perfectly 🙂

  5. By Albee on Sep 23, 2008 | Reply

    Sometimes I feel a little dense, so if the answer is trivial or obvious, please be patient. In my project I am submitting data to the server through the form_remote_tag and would like to have the response processed similar to the example above. My question is, how would I need to modify this example to fit those requirements? Why I am asking such a broad question is because, I am not sure what detail I am missing.

  6. By David on Sep 23, 2008 | Reply

    Hi Charlie, very good work you have here.
    I have a question and I hope you can help me.
    I’m kind of new to Rail, and in my project I wanna do something like:
    * Show the charts in the web page ( ok )
    * Create a PDF file with the chart. ( ? )

    I know that the chart is render/created at client-side. Is there any way or plugin to do this?

    Thank you.
    David

  7. By Brian Armstrong on May 3, 2010 | Reply

    I’m hitting a problem similar to the one Harry mentioned in the 4th comment.

    For some reason when I use the js_open_flash_chart_object method it tries to make a call to my app at this url: “/data-files/y-axis-auto-steps.txt”

    Which of course fails. Very strange.

    When I use the regular open_flash_chart_object method in the controller it works correctly.

  8. By charlie on May 5, 2010 | Reply

    Brian, that usually means you didn’t provide a data source for the chart? It’s the default location in the swf file.
    If you look at the swf file by itself, you will probably see the same problem – http://pullmonkey.com/projects/open-flash-chart.swf

    Also, just in case this could be the problem – as Harry found out, try using the swf file from here (that comes with the plugin) – http://pullmonkey.com/projects/open-flash-chart.swf, see if it makes a difference in your code.

  9. By Brian Armstrong on May 6, 2010 | Reply

    Great! Thanks for the response Charlie. Much appreciated.

  10. By badnaam on Jul 17, 2010 | Reply

    does link_to_remote_ofc_load need prototype? can jquery be used?

  11. By badnaam on Jul 26, 2010 | Reply

    has anyone noticed big cpu spikes from firefox when you load data using ofc_load? wondering if there is a problem with the swfobject

  1. 2 Trackback(s)

  2. PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 1)
  3. PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 2)

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