CODEWITHSUNDEEP
ruby-on-railsgraphstatistics
user1480797
user1480797

Reputation: 185

How to create graphs in Rails?

Does anyone know how do I create graphs in Rails. This is because I need to read and present statistics in rails and the best way to present the statistics is in a graph. So can anyone tell me how do I do so? Thanks! :)

Upvotes: 5

Views: 11915

Answers (5)

jklina
jklina

Reputation: 3417

There's a lot of options here. To try and keep things within Ruby I'd recommend checking out the ruport gem. Note that the last release of Ruport was in 2007.

As Calvin mentioned the other options involve Javascript solutions. There are two libraries that I like. The first is D3.js and can be found here:

http://d3js.org/

D3 is pretty flexible and has some powerful data manipulation tools for working with your data, however it tends to take a bit more development time to get something nice.

The other option I'd recommend is highcharts:

http://www.highcharts.com/

This library isn't as flexible as D3, but its much easier to get a really pretty chart up and running fast. The other thing is that it doesn't really have the data manipulation tools that D3 has. If you're looking for something simple though, I'd recommend trying Highcharts first.

Upvotes: 5

Jason Kim
Jason Kim

Reputation: 19031

The best way to accomplish this is to use Google Chart Tool. They have a lot of common graph types ready to be used, so I'd take a look at that first.

Here's a quick example of what your code may look like

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChartRepublican);

function drawChartRepublican() {

    // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Newt Gingrich', <%= @gingrich_today %>],
    ['Mitt Romney', <%= @romney_today %>], 
    ['Ron Paul', <%= @paul_today %>],
    ['Rick Perry', <%= @perry_today %>],
    ['Michelle Bachmann', <%= @bachmann_today %>],
    ['Rick Santorum', <%= @santorum_today %>],
    ['John Huntsman', <%= @huntsman_today %>], 
    ['Buddy Roemer', <%= @roemer_today %>]
  ]);

  // Set chart options
  var options = {'title':'Scoreboard (<%= DateTime.now %>)', 'width':680, 'height':480};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div_republican'));
    chart.draw(data, options);
}

In the view, you add the graph this way.

<div id="chart_div_republican"></div>

Upvotes: 2

staxim
staxim

Reputation: 1467

I happened along your question while looking to do some charting in my own rails app.

I would suggest taking a look at Chartkick, here: http://ankane.github.io/chartkick/

It's relatively new, so was not available when you asked your original question. It wraps the Google charts API in a simple Rails gem (you can also point it to use the Highcharts core if you wish). I was able to get some basic charts together in a couple of hours... a huge plus is that I didn't have to write any JavaScript to get it working. I did have to write a bit of SQL to get the data labels to come out correctly, since the data that I'm pulling is spread across multiple tables.

Good luck!

Upvotes: 2

steakchaser
steakchaser

Reputation: 5239

I have been using a JavaScript library called jqPLot. It's pretty easy to pick up - basically, you initialize the chart through JS. But, in that JS you can use rails script tags <% %> to build the necessary arrays of data to feed the cart. There are obviously other ways to load the data as well.

As a quick example, this would be you html page (call it graph.html.erb). The controller that renders this page needs to set the @user_stats variable, so it can be used to build the data set for jqPlot. 

    <html>
        <head>
        <script type="text/javascript">
            $(document).ready(function() {
              var plot2 = $.jqplot('chartdiv',
                  <% 
                     last_one = @user_stats.pop
                  %>
                  [[
                  <% @user_stats.each { |user_stat| %>
                    [<%= user_stat[1] %>, '<%= user_stat[0].first_name %>'],
                  <% } %>
                    [<%= last_one[1] %>, '<%= last_one[0].first_name %>']
                  ]],
                  {
                seriesDefaults: {
                  renderer:$.jqplot.BarRenderer,
                  // Show point labels to the right ('e'ast) of each bar.
                  // edgeTolerance of -15 allows labels flow outside the grid
                  // up to 15 pixels.  If they flow out more than that, they
                  // will be hidden.
                  pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                  // Rotate the bar shadow as if bar is lit from top right.
                  shadowAngle: 135,
                  // Here's where we tell the chart it is oriented horizontally.
                  rendererOptions: {
                    barDirection: 'horizontal'
                  }
                },
                axes: {
                  yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                  }
                }
              });
    </script>
</head>
<body>

    <div id="chartdiv" style="height:400px;width:300px;"></div>

</body>
</html>

Upvotes: 3

Calvin
Calvin

Reputation: 8765

You should probably use Javascript for your charts. You can technically create them with Rails and some HTML/CSS, but your views will get a bit convoluted.

I think the best way is to use Rails to render JSON data, then import that JSON data into a JS library like Flot to render the actual graphs.

Upvotes: 1

Related Questions