amcharts integration with Ruby on Rails: Using data from the database to populate the graph

Question

I am a novice at RoR and I am looking to use amcharts to create a graph in my Ruby on Rails application (I am using rails -v 3.2.2 and amcharts JavaScript Charts -v 2.6.5) that graphs data from my database. Amcharts no longer uses flash (now they use only Javascript/HTML5) so the integration tutorials that I have found are for the older version of amcharts.

My first question is (high-level understanding question) - do I need to use an XML or .CSV file to load the data from my database into the chart, or can I just use embedded ruby in the javascript?

My second question - does anyone know of any tutorials or example code of how to implement an amchart chart in Ruby on Rails that is pulling its data from the database?

For example:

If I want a pie chart with a country and a value. Example database table:

create_table "countries", :force => true do |t|
t.string   "name"
t.integer  "litres"
t.datetime "created_at", :null => false
t.datetime "updated_at", :null => false
end

Here is a hardcoded graph. Can I use embedded ruby to make the code pull the data from the database instead of being hardcoded? Or do I need to make an XML file? Any insight into how to integrate pulling the data from the database into the amcharts javascript code would be much appreciated.

<script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Lithuania",
            value: 260
        }, {
            country: "Ireland",
            value: 201
        }, {
            country: "Germany",
            value: 65
        }, {
            country: "Australia",
            value: 39
        }, {
            country: "UK",
            value: 19
        }, {
            country: "Latvia",
            value: 10
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "value";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;
            // this makes the chart 3D
            chart.depth3D = 15;
            chart.angle = 30;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Answer 1

You can quite easily just use Ruby code to pull the data and output the necessary Javascript inside your view, tho this can be painful to build especially with complex data structures.

I would recommend using a separate JSON partial view to output data for the graph using JBuilder. Once you have built up your JSON response, you can just output it inside your graph.

# controller
@data = Country.all

# partial  "_data.json.erb"
<%=
  Jbuilder.encode do |json|
      json.countries @data do |json, country|
        json.country country.name
        json.value country.litres
      end 
  end
%>

# view
var chartData = <%= render :partial => "data", :format => :json, :locals => @data %>

Also there is an amchart gem I found that might help you, tho looks like it hasn't been touched in more than 3 years https://github.com/ahobson/ambling

Answer 2

I would personally recommend using Highcharts Highcahrts. It has a full api documentation giving you the ability to load data into highcharts. Here's an example of a pie chart that you may well be looking for http://www.highcharts.com/demo/pie-basic. You could try doing something like the following:

Controller

def index
 @title = "Country" 
 @country = Country.all 
 @data = []

 Country.all.each do |country| 
   countryData = { :CountryName => country.country.to_s, 

   :values => [] } 

 ['England', 'France', 'Italy', 'Spain','Germany'].each do |NameOfCountry|
  end 

  @data.push(countryData) #Push this data back to the variable countryData.
end 

end

View

If you use highcharts you probably will have something basic which is similar to this:

  series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],

However the above is just raw static data. Taking some of what I have provided you could well do something like this:

name: '<%= data[ :CountryName] %>',
data: [<% data[ :values ].each do |value| %>
        <%= value %>,
    <% end %>]

What you can do here is parse in the data of the CountryName as well as the values that you feed in. Hope this helps.

In response to your question you don't necessarily have to use XML or CSV data. What you will usually use is JSON or XML to load your data.

Answer 3

Here is Ruby wrapper for V3 of amCharts: http://rubygems.org/gems/amcharts.rb