Ambling is a rails plugin makes it easy to generate XML needed by the wonderfully slick
Amcharts[http://www.amcharts.com/].
Amcharts has two kinds of XML: the data xml and the settings xml. Ambling can help with both.
To install, do the usual rails incancation:
ruby script/plugin install svn://rubyforge.org//var/svn/ambling/trunk
Ambling expects amcharts to be installed under public/amcharts. Put the
licence key (if any), swf files, fonts and plugins directories under here
Amcharts uses swfobject.js, so put that in public/javascripts and include it
in your layout. It does not work with swfobject version 2.x so you'll need
to find swfobject 1.x
Ambling uses expressinstall.swf by default, so put that in public/amcharts.
Ambling is also now on github: http://github.com/ahobson/ambling/tree/master
Examples:
In your controller, generate the data xml for a pie chart
def pie_data
chart = Ambling::Data::Pie.new
FavoriteColor.count(:color, :group => :color).each do |data|
chart.slices << Ambling::Data::Slice.new(data.last, :title => data.first,
:url => favorite_colors_path(:color => data.first))
end
render :xml => chart.to_xml
end
In your view, embed the flash and customize the settings
<%=
ambling_chart(:pie, :data_file => url_for(:action => 'pie_data', :escape => false),
:id => 'pie_data', :width => 290, :height => 200,
:chart_settings => Ambling::Pie::Settings.new({
:pie => {
:x => 110,
:y => 110,
:radius => 80,
:colors => '#B40000,#F7941D,#0265AC',
:outline_color => '#000000',
:outline_alpha => 50,
},
:animation => {
:pull_out_on_click => false,
},
:data_labels => {
:show => cdata_section("{value}"), :radius => -30,
},
:legend => {
:enabled => true, :x => 195, :y => 20, :width => 100, :text_color => '#000',
:max_columns => 1, :spacing => 2, :text_size => 10,
:key => {:size => 10}
},
:labels => {
:label =>
{:x => 40, :y => 5, :text => cdata_section("Favorite Colors"),
:text_size => 16, :text_color => '#0265AC'},
}
}).to_xml) do
content_tag('p', "To see this page properly, you need to upgrade your Flash Player")
end
%>
How about a combo bar and line graph?
In your controller:
def graph_data
avg_attendence = Movies.find_average_attendence_last_thirty_days
colors = %w{#B40000 #F7941D #0265AC #DF5858 #FFC580 #6FAFF3 #5AAB6D #E99393 #9DCFA9 #A4CBF3}
chart = Ambling::Data::ColumnChart.new
chart.graphs << Ambling::Data::LineGraph.new([], :title => "Average Attendence", :color => '#000000')
avg_attendence.each do |day,avg_attendence|
chart.series << Ambling::Data::Value.new(day.to_s(:pretty_day), :xid => day.to_i)
chart.graphs.last << Ambling::Data::Value.new(avg_attendence, :xid => day.to_i)
end
all_movie_names = Movies.find_movie_names
all_movie_names.each_with_index do |movie_name, i|
chart.graphs << Ambling::Data::ColumnGraph.new([], :title => movie_name, :color => colors[i])
movie_attendence = Movies.find_attendence_by_name(movie_name)
movie_attendence.each do |day, attendence|
chart.graphs.last << Ambling::Data::Value.new(attendence, :xid => day.to_i)
end
end
render :xml => chart.to_xml
end
In your view:
<%=
ambling_chart(:column, :data_file => url_for(:action => 'graph_data', :escape => false),
:id => "graph_data", :width => 900, :height => 250,
:chart_settings => Ambling::Column::Settings.new({
:column => {
:type => "stacked", :width => 90, :spacing => 5,
:balloon_text => "{value} people attended the movie {title} on {series}"
},
:grid => {
:category => {:alpha => 0}, :value => {:alpha => 10}
},
:values => {
:category => {:enabled => true, :frequency => 3}
},
:plot_area => {
:margins => {:left => 30, :top => 40, :right => 100, :bottom => 40}
},
:legend => {
:enabled => true, :x => 805, :y => 20, :width => 100, :text_color => '#000',
:max_columns => 1, :spacing => 2, :text_size => 10,
:key => {:size => 10}
},
:labels => {
:label => [
{:x => 350, :y => 5, :text => cdata_section("Movie Attendence"),
:text_size => 16, :text_color => '#0265AC'}
]
},
:graphs => {
:graph => [
{:type => 'line', :gid => 1, :width => 3}
]
}
}).to_xml) do
content_tag('p', "To see this page properly, you need to upgrade your Flash Player")
end
%>
Here's a column example.
In your controller:
def column_data
colors = %w{#B40000 #F7941D #0265AC}
chart = Ambling::Data::ColumnChart.new
chart.series << Ambling::Data::Value.new(1, :xid => 1)
[["Chocolate", 55], ["Ice Cream", 34], ["Cookies", 22]].each_with_index do |kv, i|
chart.graphs << Ambling::Data::ColumnGraph.new([], :gid => i, :title => kv.first, :color => color[i])
chart.graphs.last << Ambling::Data::Value.new(kv.last, {:xid => 1})
end
render :xml => chart.to_xml
end
In your view:
<%=
ambling_chart(:column, :data_file => url_for(:action => 'column_data', :escape => false),
:id => 'column_data', :width => 290, :height => 200,
:chart_settings => Ambling::Column::Settings.new({
:column => {
:type => "bar", :width => 97, :spacing => 0,
:balloon_text => cdata_section("{value} people bought {title}")
},
:grid => {
:category => {:alpha => 0}, :value => {:alpha => 10}
},
:values => {
:category => {:enabled => false}
},
:plot_area => {
:margins => {:left => 40, :top => 40, :right => 100, :bottom => 40}
},
:legend => {
:enabled => true, :x => 195, :y => 20, :width => 100, :text_color => '#000',
:max_columns => 1, :spacing => 1, :text_size => 10,
:key => {:size => 10}
},
:labels => {
:label => [
{:x => 20, :y => 5, :text => cdata_section("Dessert"),
:text_size => 16, :text_color => '#0265AC'},
{:x => 30, :y => 170, :text => "Sweet Sales", :align => "center", :width => 180,
:text_size => 12}
]
}
}).to_xml) do
content_tag('p', "To see this page properly, you need to upgrade your Flash Player")
end
%>
Thanks to the ziya plugin for inspiration