Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby

Rails and Chart.js - How to fill out the chart with values from database

Hey Guys,

I'm using the chart-js-rails gem for rails and want to fill it out with values from database instead of just to have the static values like this:

jQuery ->
  data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
      }
    ]
  }

  myNewChart = new Chart($("#canvas").get(0).getContext("2d")).Line(data)

Could you please point me to the right direction how to use values from database on X and Y axis?

For example I have database table named Orders with weekday column and total_orders column. And want to have weekday (Monday...Sunday) on X and total_orders on Y.

Thank you for help :)

3 Answers

Jason Seifer
STAFF
Jason Seifer
Treehouse Guest Teacher

Hey Mike S. I'd use something besides #each here. Try using #map to make a new array and then output that as json.

Jason !

<%=  raw @days.map.to_json %>

This did the trick. But am i doing it correctly ?

Brandon Barrette
Brandon Barrette
20,485 Points

You either are rendering the data on the page because you are displaying the data there, or doing and ajax call to render the data on another page (where it may not be called in your controller). I suggest looking into this :

http://railscasts.com/episodes/223-charts-graphs-revised

There is also the free non-revised version

http://railscasts.com/episodes/223-charts-graphs

But for $9, I think a subscription to railscasts is a steal. I've learned so much from there.

Jason Seifer
STAFF
Jason Seifer
Treehouse Guest Teacher

Hey Mike S. generally you'll need to figure out what data on you want in your chart and then display it in your view either via ajax or even sometimes in erb layouts. In your case, you could take the data key:

data: [65,59,90,81,56,55,40]

And replace it with an array of the orders:

data: <%= @orders.map(&:total_orders) %>.to_json

Hopefully that points you in the right direction!

Hi Jason ! Thank you very much for your answer :-) I have something like this. It returns a column from a db but it is not working. Where should i place the .to_json method call ? Should not it be in the <%= %> ?(somewhere :D)

labels :<%=   @days.each do |day| day end %>

Well i know it does not work because it gets translated as (labels :["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],

And that .to_json thing should fix it right ?