Question

I'm trying to make a donut chart using morris.js (http://www.oesmith.co.uk/morris.js/donuts.html) but am having some issues with getting the data to format correctly.

Currently this is how the data is formatted.

{"2D"=>"6768.96", "1DP"=>"293.63", "3D"=>"84.97", "1D"=>"361.83", "GR-RES"=>"19083.85", "GR-COM"=>"11254.69"}

Below is my current code

<%= content_tag :div, "", id: "shipments-by-service-type", data: {shipments: @details.group(:family).sum("base_charge + discount")} %>


jQuery ->
  Morris.Donut
    element: "shipments-by-service-type"
    data: $('#shipments-by-service-type').data('shipments')

This is my first experience passing data into js and parsing to make a graph any help would be appreciated.

Was it helpful?

Solution

So once you correct the quote issue I pointed out in the comments above, either escape or switch the outer quote to be single quotes, this javascript will parse your input and get it ready for the donut graph

var dataArr = [];
var obj = $("#shipments-by-service-type-simple").data('shipments');
for ( var prop in obj) {
  dataArr.push({"label": prop, "value": obj[prop]});
}

Morris.Donut({
  element: 'donut-example',
  data: dataArr
});

Here is the jsbin. It appears that raphael doesn't like the decimal values and is throwing errors. Might want to round your values

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top