PullMonkey Blog

05 Jan

Open Flash Chart II – X Axis Date and Time


I was asked how to display date and time for the x axis as seen in this teethgrinder example - So here it goes.

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
44
45
46
47
48
49
50
51
52
53


class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(550,300,"/test_it/chart")
  end
  def chart
    data1 = []
    data2 = []
    year = Time.now.year

    31.times do |i|
      x = "#{year}-1-#{i+1}".to_time.to_i
      y = (Math.sin(i+1) * 2.5) + 10

      data1 << ScatterValue.new(x,y)
      data2 << (Math.cos(i+1) * 1.9) + 4
    end

    dot = HollowDot.new
    dot.size = 3
    dot.halo_size = 2
    dot.tooltip = "#date:d M y#<br>Value: #val#"

    line = ScatterLine.new("#DB1750", 3)
    line.values = data1
    line.default_dot_style = dot

    x = XAxis.new
    x.set_range("#{year}-1-1".to_time.to_i, "#{year}-1-31".to_time.to_i)
    x.steps = 86400

    labels = XAxisLabels.new
    labels.text = "#date: l jS, M Y#"
    labels.steps = 86400
    labels.visible_steps = 2
    labels.rotate = 90

    x.labels = labels

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

    chart = OpenFlashChart.new
    title = Title.new(data2.size)

    chart.title = title
    chart.add_element(line)
    chart.x_axis = x
    chart.y_axis = y

    render :text => chart, :layout => false
  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, Open Flash Chart Graphs, plugins, rails, ruby, tutorials Tags: , , , , , , , , , ,


6 Responses to “Open Flash Chart II – X Axis Date and Time”

  1. By Thomas Glasgow on Feb 12, 2010 | Reply

    Hi,

    I don’t understand how to define the x values as well. Currently the only examples I see have evenly separated x values, eg: [1,10], [2, 5], [3, 15], [4, 6], …

    But what to do if I want:

    [1,10], [2.7, 5], [3, 15], [3.2, 6], [3.8, 9], [4.1, 12], …

    Best regards,

  2. By Jeff Rossi on May 7, 2010 | Reply

    Sorry about being off topic but I was wondering if there is a clickable line graph available.

  3. By charlie on May 7, 2010 | Reply

    Jeff – I don’t have an example for you in RoR, but if you are up to it, you can follow the PHP example from the official site – http://teethgrinder.co.uk/open-flash-chart/gallery-line-click.php

    As a pointer – when you see something like this:
    $g->set_x_labels( $x_labels );
    You will do this:
    g.set_x_labels(x_labels)
    or this:
    g.x_labels = x_labels

  4. By Steve on Sep 8, 2010 | Reply

    Any idea how to get bars at the proper places when using a date range? I can’t seem to get them to show up on the chart. Do you know if there is a way to set the x value of a bar value?

    Thanks!
    Steve

  5. By Krish on Mar 29, 2011 | Reply

    Ok, I give up. How do I add Dynamic Text to the tool tip? For instance, for the first dot, I may want to say “vs Lakers : 28” then dot 2 “vs Celtics : 13”

    I understand doing this:

    dot.tooltip = “Points: #val#”

    But not making it dynamic. The PHP example uses a label set onto each line dot item – I just don’t see how to do that here.

    Thanks!

  1. 1 Trackback(s)

  2. Jan 6, 2010: PullMonkey Blog » Blog Archive » POST OFC Graph as Image

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