PullMonkey Blog

05 Aug

Open Flash Chart II – X Axis Label rotations

Got another comment asking about diagonal x axis labels. This example is based on teethgrinder's line graph example and the new portions are based on teethgrinder's x-axis rotation example.

Here is the graph we are after in this example:

More Open Flash Chart II examples.

And here is the code (the controller):


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/data-lines-2.php
    # and parts from this example - http://teethgrinder.co.uk/open-flash-chart-2/x-axis-labels-3.php
    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.width = 4
    line_dot.colour = '#DFC329'
    line_dot.dot_size = 5
    line_dot.values = data1

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

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

    # Added these lines since the previous tutorial
    tmp = []
    x_labels = XAxisLabels.new
    x_labels.set_vertical()

    %w(one two three four five six seven eight nine ten).each do |text|
      tmp << XAxisLabel.new(text, '#0000ff', 20, 'diagonal')
    end

    x_labels.labels = tmp

    x = XAxis.new
    x.set_labels(x_labels)
    # new up to here ...

    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.x_axis = x # Added this line since the previous tutorial
    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):

1234	<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: charts, flash, graphs, open flash chart, rails, ruby, ruby on rails

27 Responses to “Open Flash Chart II – X Axis Label rotations”

By Mike Nicholaides on Aug 5, 2008 | Reply

I copied and pasted this example, and it looks like this:
http://tinypic.com/view.php?pic=2pskn6s&s=4
Note the X Axis Labels don’t show.
By charlie on Aug 5, 2008 | Reply

@Mike – do you have the latest version of the plugin?
If so, can you post the JSON that is being produced?
By Mike Nicholaides on Aug 5, 2008 | Reply

Hey charlie,
I think I forgot to restart my server after updating to the latest plugin. Sorry for the false alarm!

Thanks for the awesome plugin!
By Arj on Aug 5, 2008 | Reply

Man these charts are the grooviest thing I have seen in a while. Spent a few hours putting some in my app and they are delicious.

One thing though, they are all fixed size. Is there any plan on changing it so that instead of specifying a size you just use percentages of the parent div?

This will allow the charts to resize with the screen. Or am I missing something
By charlie on Aug 5, 2008 | Reply

@Arj – Look into this for right now – http://teethgrinder.co.uk/open-flash-chart/gallery-js-moo.php
By Jaikishan Jalan on Aug 5, 2008 | Reply

Hello,

This is little bit offtrack but I am trying to get extra tool tip information in OFC 2 with help from how it was done in version 1. Here is my sample piece of code:

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

overallPerformanceGraph = OpenFlashChart.new

label= []
value=[]

// Value and label get popluated

line_hollow = LineHollow.new
line_hollow.width = 1
line_hollow.colour = ‘#6363AC’
line_hollow.dot_size = 4
line_hollow.values=value

(0..12).each do |i|
line_hollow.add_data_tip(rand(5) + 14, "(Extra: #{i})")
end

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

x = XAxis.new
x.set_grid_colour(‘#d1d1d1’)
x.set_offset(true)
x.set_labels(label)

overallPerformanceGraph.data_sets << line_hollow
overallPerformanceGraph.set_tool_tip(‘Marks: #val#%<br>#tip#’)
overallPerformanceGraph.set_x_axis(x)
overallPerformanceGraph.set_y_axis(y)
overallPerformanceGraph.add_element(line_hollow)
render :text=> overallPerformanceGraph.to_s

</filter:code>
But I get an error:

ArgumentError (no id given):
/vendor/plugins/pullmonkey-open_flash_chart-72bea010d081117e7c60bd0c1517a21c9b202f7d/lib/open_flash_chart.rb:84:in `method_missing’
/app/controllers/dashboard_controller.rb:34:in `GenerateOverallPerformanceGraph’
.
.
.
.

I am clueless. Any help will be greatly appreciated. Note that to install OFC 2, I have downloaded the folder from github, unzipped it and then placed the necessary files to their relevant place. If I remove line_hollow.add_data_tip, the graphs render perfectly.
By charlie on Aug 5, 2008 | Reply

@Jaikishan Jalan – I checked for you and lines do not have the ability to have special tooltips – see this page: http://teethgrinder.co.uk/open-flash-chart-2/data-lines.php

It says "Draws a line. This does not have tool tips. This is a bug, and at the moment I’m not sure if it needs fixing."

The only charts that I know of to have tooltips are: Area*, Bar*, and Pie.

Sorry about that – you may want to ask if there is an ETA on the bug fix for Line* Tooltips in the OFC II Forums – http://sourceforge.net/forum/?group_id=201148
By John on Aug 5, 2008 | Reply

I am using this on Rails 2.2.2. It was all working after I walked through the basic setup (had to extract the components from the tar file). I then started playing with the charts — titles, layouts, etc. and it stopped working. I get a javascript error about a bad argument when the page loads.

After undoing all my changes, still no workey. So… created a new sample just like the first time in a new dir. Also doesn’t work. So what could I have done to bonk my environment to prevent this from working?

(I’m new to rails and I’m on Windows if that matters).
By charlie on Aug 5, 2008 | Reply

@John – That (bad argument) is too broad for me to tell too much. Can you post your layout or maybe the HTML (view source) that is produced in your example. swfobject.js is the only javascript file you need. So make sure that is included by your javascript_include_tag in your layout. It may be a JSON error, if so then you can check your development.log the graphing action may have failed.
By John on Aug 5, 2008 | Reply

I debugged inside VS2008 from IE. The error is here in the swfobject.js file:

if(typeof i.addRule==P){i.addRule(m,j)}}

the i.addRule call is failing. Looking at the definition for addRule (by inspecting in the debugger), it shows 3 parameters, not 2 (selector, style, index).

If I tell the debugger to eat the exception, then it runs.
By charlie on Aug 5, 2008 | Reply

@John – There may be a conflict with one of the other js libraries that you have included. Find where addRule is being defined.
By Paul on Aug 5, 2008 | Reply

Continuing the question about adding tooltips to line dots. According to this page: http://teethgrinder.co.uk/open-flash-chart-2/adv-line-dot.php, the following PHP code adds a custom tooltip to an OFC2 chart.
<filter:code attributes=lang="php">
$tmp = new dot_value( $val, ‘#D02020’ );
$tmp->set_tooltip(‘#val#<br>Your text here’);
$data[] = $tmp;
</filter:code>
Problem is, this doesn’t seem to be working in Rails, because the following line gives an error:
<filter:code attributes=lang="ruby">
tmp = DotValue.new(0,’#000000′)
</filter:code>
The error is:
wrong number of arguments (3 for 1)
and the trace shows:
vendor/plugins/open_flash_chart/lib/open_flash_chart/line_dot.rb:14:in `initialize’
vendor/plugins/open_flash_chart/lib/open_flash_chart/line_dot.rb:14:in `initialize’

Any ideas? Maybe a Rails version of the Advanced Line Chart would help!

Thanks!
By charlie on Aug 5, 2008 | Reply

@Paul – committed the fix. The call to super needed to only pass in args … super(args).

Diff is <a href="http://github.com/pullmonkey/open_flash_chart/commit/77e73682bce4a6868299e06b53e3d769e5d33230">here</a>.
By Paul on Aug 5, 2008 | Reply

@charlie — Thanks! I was actually just coming back here to mention that I had found that very issue. It’s all working now!
By Chris on Aug 5, 2008 | Reply

Hi,

when I copy and paste the above tutorial I get the following output:

{"y_axis": {"steps": 5, "max": 20, "min": 0}, "y_legend": {"text": "MY Y Legend", "style": "{font-size: 20px; color: #770077}"}, "x_legend": {"text": "MY X Legend", "style": "{font-size: 20px; color: #778877}"}, "title": {"text": "Multiple Lines"}, "elements": [{"text": "Page Views", "type": "line_dot", "dot-size": 5, "colour": "#DFC329", "font-size": 10, "values": [4, 5, 3, 2, 5, 3, 4, 1, 2, 4], "width": 4}, {"text": "Page Views", "type": "line_hollow", "dot-size": 5, "colour": "#6363AC", "font-size": 10, "values": [9, 7, 8, 10, 7, 7, 11, 10, 7, 10], "width": 1}, {"text": "Page Views", "type": "line", "dot-size": 5, "colour": "#5E4725", "font-size": 10, "values": [18, 18, 18, 18, 16, 16, 15, 17, 14, 15], "width": 1}], "x_axis": {"labels": {"labels": [{"bottom": null, "top": "one"}, {"bottom": null, "top": "two"}, {"bottom": null, "top": "three"}, {"bottom": null, "top": "four"}, {"bottom": null, "top": "five"}, {"bottom": null, "top": "six"}, {"bottom": null, "top": "seven"}, {"bottom": null, "top": "eight"}, {"bottom": null, "top": "nine"}, {"bottom": null, "top": "ten"}], "rotate": "vertical"}}}

but if I look at the code your example puts out on your site it should be:

{"y_axis": {"steps": 5, "max": 20, "min": 0}, "y_legend": {"text": "MY Y Legend", "style": "{font-size: 20px; color: #770077}"}, "title": {"text": "Multiple Lines"}, "x_legend": {"text": "MY X Legend", "style": "{font-size: 20px; color: #778877}"}, "elements": [{"type": "line_dot", "colour": "#DFC329", "dot-size": 5, "values": [1, 2, 1, 5, 2, 4, 1, 2, 3, 1], "width": 4}, {"type": "line_hollow", "colour": "#6363AC", "dot-size": 5, "values": [8, 12, 9, 9, 9, 9, 8, 10, 12, 8], "width": 1}, {"type": "line", "colour": "#5E4725", "dot-size": 5, "values": [17, 18, 14, 15, 14, 17, 14, 15, 16, 15], "width": 1}], "x_axis": {"labels": {"labels": [{"size": 20, "text": "one", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "two", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "three", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "four", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "five", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "six", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "seven", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "eight", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "nine", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "ten", "colour": "#0000ff", "rotate": "diagonal"}], "rotate": "vertical"}}}

I’ve tried reinstalling the plugin via git but it still is giving me this incorrect output. I’m trying to get vertical/diagonal labels but they came out all wrong.

Any idea why this is happening?

Regards,
Chris.
By charlie on Aug 5, 2008 | Reply

@Chris – just tried it on a different box … with Rails 2.2.2

Can you give me more details?

Here is my output again for comparison —

{"y_axis": {"steps": 5, "max": 20, "min": 0}, "y_legend": {"text": "MY Y Legend", "style": "{font-size: 20px; color: #770077}"}, "x_legend": {"text": "MY X Legend", "style": "{font-size: 20px; color: #778877}"}, "title": {"text": "Multiple Lines"}, "elements": [{"text": "Page Views", "type": "line_dot", "colour": "#DFC329", "dot-size": 5, "font-size": 10, "values": [3, 1, 3, 1, 2, 2, 1, 2, 2, 3], "width": 4}, {"text": "Page Views", "type": "line_hollow", "colour": "#6363AC", "dot-size": 5, "font-size": 10, "values": [12, 8, 12, 9, 8, 12, 12, 12, 9, 9], "width": 1}, {"text": "Page Views", "type": "line", "colour": "#5E4725", "dot-size": 5, "font-size": 10, "values": [16, 16, 18, 17, 14, 16, 17, 14, 14, 14], "width": 1}], "x_axis": {"labels": {"rotate": "vertical", "labels": [{"size": 20, "text": "one", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "two", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "three", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "four", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "five", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "six", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "seven", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "eight", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "nine", "colour": "#0000ff", "rotate": "diagonal"}, {"size": 20, "text": "ten", "colour": "#0000ff", "rotate": "diagonal"}]}}}
By Alex on Aug 5, 2008 | Reply

I’m trying to get this example running:
http://pullmonkey.com/2008/8/5/open-flash-chart-ii-x-axis-label-rotations

And I keep getting this error:
wrong number of arguments (4 for 3)

Which appears to be triggered by the line:
tmp << XAxisLabel.new(text, ‘#0000ff’, 20, ‘diagonal’)

Is there any kind of API documentation I can refer to? I would really like to use this in my app.

Thanks!
By charlie on Aug 5, 2008 | Reply

@Alex – All of the documentation is <a href="http://teethgrinder.co.uk/open-flash-chart-2/">here</a>. It is the PHP version and can easily be translated — see <a href="http://harryseldon.thinkosphere.com/2008/10/23/radar-chart-example-with-ofc2#comment-667">this post</a> for a nice example.
By Allen on Aug 5, 2008 | Reply

I can’t get the labels to be diagonal or vertical on x axis. No matter what I try it’s always horizontal. Any ideas?
By Mike on Aug 5, 2008 | Reply

I can’t get the labels to be diagonal or vertical on x axis too, please help
By Piyush on Sep 3, 2009 | Reply

I always run into trouble doing something which is not described in your examples. If there was a an api doc. it would have made all our lives very easy. Is there any chance of having an api doc here ?
By charlie on Sep 3, 2009 | Reply

@Piyush – Everything is based on the examples here – http://teethgrinder.co.uk/open-flash-chart-2/
The whole idea is to not have to duplicate documentation. Is there anything in particular you need help with?
By Leftblank on Sep 20, 2009 | Reply

Any chance the failing diagonal x-axis labels will be fixed? Even the example here fails sadly… 🙁
By Leftblank on Sep 20, 2009 | Reply

Doh, just use an integer (degrees) when making the XAxisLabel, like this;
tmp << XAxisLabel.new(text, ‘#808080’, 10, 270)

Just update your code and it *finally* works.
By The Ultimation on Dec 4, 2009 | Reply

yeahhh good call Leftblank
By Max on Feb 16, 2010 | Reply

Hi there, i run this example but… Values of dots can be integers only? i need to output the created_at date and usernames, all this stuff is in a model “price_dynamics”. Any tips? How to output strings instead of integers? Please…
By Max on Feb 16, 2010 | Reply

Ok, i’m done with labels

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

Open Flash Chart II – X Axis Label rotations

27 Responses to “Open Flash Chart II – X Axis Label rotations”

Topics

Recent Posts

Recent Comments

Archives