Open Flash Chart II - X Axis Label rotations

August 5th, 2008 by charlie

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!

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

10 Responses to “Open Flash Chart II - X Axis Label rotations”

Mike Nicholaides Says:
August 7th, 2008 at 05:54 PM 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.
charlie Says:
August 8th, 2008 at 11:12 AM
@Mike - do you have the latest version of the plugin?
If so, can you post the JSON that is being produced?
Mike Nicholaides Says:
August 8th, 2008 at 03:30 PM 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!
Arj Says:
August 12th, 2008 at 11:35 PM 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
charlie Says:
August 13th, 2008 at 07:28 AM
@Arj - Look into this for right now - http://teethgrinder.co.uk/open-flash-chart/gallery-js-moo.php

Jaikishan Jalan Says:
September 19th, 2008 at 08:47 AM 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:



    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

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.

charlie Says:
September 22nd, 2008 at 08:57 AM
@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
John Says:
December 3rd, 2008 at 05:35 PM 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).
charlie Says:
December 3rd, 2008 at 10:00 PM
@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.
John Says:
December 4th, 2008 at 06:22 AM 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.
charlie Says:
December 4th, 2008 at 10:08 AM
@John - There may be a conflict with one of the other js libraries that you have included. Find where addRule is being defined.