CODEWITHSUNDEEP
javascriptjqueryruby-on-railsrubymorris.js
BrennerSpear
BrennerSpear

Reputation: 29

Morris chart won't accept my json data but accepts hardcoded example data

dashboard_test.html.erb file:

<div class="panel-body">
  <%= content_tag(:div, "", id: "shoppers_chart", data: {shoppers_data: @test}) %>
</div>

brands_controller.rb file:

def dashboard_test

    @test = [
        {period: '2010 Q1',
        iphone: 2666,
        ipad: 542,
        itouch: 2647},
        {period: '2010 Q2',
        iphone: 2778,
        ipad: 2294,
        itouch: 2441} ]
end

shoppers.js file with hardcoded data:

$(function() {

    Morris.Area({
        element: 'shoppers_chart',
        data: [
             {period: '2010 Q1',
             iphone: 2666,
             ipad: null,
             itouch: 2647},
             {period: '2010 Q2',
             iphone: 2778,
             ipad: 2294,
             itouch: 2441} ],
        xkey: 'period',
        ykeys: ['ipad', 'iphone', 'itouch'],
        labels: ['ipad', 'iphone', 'itouch'],

        pointSize: 2,
        hideHover: 'auto',
        resize: true

    });

});

This code ^^ works fine. the chart is displayed.

shopper.js with data being pulled from the dashboard_test.html.erb file:

$(function() {

    Morris.Area({
        element: 'shoppers_chart',
        data: $('#shoppers_chart').data('shoppers_data'),

        xkey: 'period',
        ykeys: ['ipad', 'iphone', 'itouch'],
        labels: ['ipad', 'iphone', 'itouch'],

        pointSize: 2,
        hideHover: 'auto',
        resize: true

    });

});

This code ^^ does not work. The chart is completely blank - no x or y axis markers or anything at all.

in my chrome dev tool, both times, this is the output for the correlated div:

<div id="shoppers_chart" 
     data-shoppers-data="[
       {"period":"2010 Q1","iphone":2666,"ipad":542,"itouch":2647},
       {"period":"2010 Q2","iphone":2778,"ipad":2294,"itouch":2441}]"   
     style="position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

I've tried adding html_safe to my content_tag, I've tried switching it over to coffeescript.

Why isn't it working?

Upvotes: 0

Views: 93

Answers (1)

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 121000

The content of data is a string:

//                         ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ STRING
data: $('#shoppers_chart').data('shoppers_data')

while your charts expect an object:

data: JSON.parse($('#shoppers_chart').data('shoppers_data'))

Hope it helps.

Upvotes: 2

Related Questions