Rendering Rails json data in chartjs

Question

I have my canvas tag in my portfolio#show page:

<%= content_tag :canvas, "", id: "positions_chart", width: "300", height: "300", data: {positions: @positions } %>

In my portfolio.js file I have created a chartInstance object:

$(document).ready(function () {
  var context = document.getElementById('positions_chart');
  var ctx = context.getContext("2d");

  var pieData = {
    labels: $("#positions_chart").data(positions['name']),
    datasets: [
      {
        backgroundColor: "rgba(220,220,220,1)",
        borderColor: "rgba(220,220,220,1)",
        data: $("#positions_chart").data(positions['quantity'])
     }
   ]
 }

  var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: pieData,
    options: {
      responsive: true
    }
  });

console.log(chartInstance);

});

I'm loading the data I want in the DOM -- a collection of position data.

<canvas id="positions_chart" width="600" height="600" 
data-positions="[{"id":1,"ticker":"AAPL","name":"Apple Inc.",
                  "quantity":20,"portfolio_id":1,"created_at":"2016-10-22T18:19:36.255Z",
                  "updated_at":"2016-10-23T01:21:38.731Z","price":"116.6"},... 
style="width: 300px; height: 300px;"></canvas>

The examples I've seen online are how to handle preloaded data within the data and dataset attributes in the js file. I want to have a pie chart with labels corresponding to the ticker names and using data from my rails database. I grab the data in the canvas tag and have access to it in my js file. From what I understand, I'm passing the pieData object to the ctx object and whichever graph I chose (in this case pie) it should render the label and dataset to a graph. I'm not sure why the pie chart isn't showing up.

Sam Ch Sam Ch · Accepted Answer · 2016-11-17T08:52:49

Is this what you want?

You can pass data you get from rails database and insert it into your js code immediately (no need to put it to data attribute in canvas tag).

I see you are using chart js v2 so no need to get context I think.

Also I fixed your code a little bit.

in your js code

$(document).ready(function() {
  var positionsQuantity = <%= raw(@positions.map(&:quantity)) %>;
  var positionName = <%= raw(@positions.map(&:name)) %>;
  var ctx = $('#positions_chart');

  var pieData = {
    labels: positionName,
    datasets: [
    {
      label: "pie labels",
      data: positionsQuantity,
      backgroundColor: "rgba(220,220,220,1)",
      borderColor: "rgba(220,220,220,1)"
    }]
  }

  var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: pieData,
    options: {
      responsive: true
    }
  });
});

Hope it works!

Rendering Rails json data in chartjs

1 Answers