How to set morris.js values from Rails controller

Question

I struggle with adding circle graph in my sport app. Is it possible to set morris.js value to variable from my controller? I have @diet_calories variable in controller and I want to display Carbs -> Protein -> Fat in 60% -> 20% -> 20% relation. If I set value of carbs in script tag ( value: @diet_calories * 0.6 ) it dosn't work. Do you have some suggestions to fix that?

application.html.erb :

<script>
    new Morris.Donut({
         element: 'diet-circle',
         data: [
           { label: "Carbs", value: @diet_calories * 0.6 },
           { label: "Protein", value: @diet_calories * 0.2 },
           { label: "Fat", value: @diet_calories * 0.2 }
         ]
    });
</script>

info_controller.rb :

def diet
    if current_user.activity == "Sedentary"
        if current_user.goals == "Lose Weight"
            @diet_calories = ((@bmr * 1.1) - 300).to_i
        elsif current_user.goals == "Maintain Weight"
            @diet_calories = (@bmr * 1.1).to_i
        elsif current_user.goals == "Add some weight"
            @diet_calories = ((@bmr * 1.1) + 300).to_i
        end
    elsif current_user.activity == "Low"
        if current_user.goals == "Lose Weight"
            @diet_calories = ((@bmr * 1.5) - 300).to_i
        elsif current_user.goals == "Maintain Weight"
            @diet_calories = (@bmr * 1.5).to_i
        elsif current_user.goals == "Add some weight"
            @diet_calories = ((@bmr * 1.5) + 300).to_i
        end
    elsif current_user.activity == "Medium"
        if current_user.goals == "Lose Weight"
            @diet_calories = ((@bmr * 1.7) - 300).to_i
        elsif current_user.goals == "Maintain Weight"
            @diet_calories = (@bmr * 1.7).to_i
        elsif current_user.goals == "Add some weight"
            @diet_calories = ((@bmr * 1.7) + 300).to_i
        end
    elsif current_user.activity == "High"
        if current_user.goals == "Lose Weight"
            @diet_calories = ((@bmr * 2.1) - 300).to_i
        elsif current_user.goals == "Maintain Weight"
            @diet_calories = (@bmr * 2.1).to_i
        elsif current_user.goals == "Add some weight"
            @diet_calories = ((@bmr * 2.1) + 300).to_i
        end
    end

diet.html.erb :

<div id="diet-circle"></div>

Answer 1

You can achieve this, by making this change in your application.html.erb

<script>
     var diet_calories = <%= @diet_calories %>
     new Morris.Donut({
     element: 'diet-circle',
     data: [
       { label: "Carbs", value: diet_calories * 0.6 },
       { label: "Protein", value: diet_calories * 0.2 },
       { label: "Fat", value: diet_calories * 0.2 }
     ]
  });
</script>

To further understand passing of variable from rails to javascript, have a look at this railscast.

Answer 2

Try with:

<script>
    new Morris.Donut({
         element: 'diet-circle',
         data: [
           { label: "Carbs", value: <%= @diet_calories %> * 0.6  },
           { label: "Protein", value: <%= @diet_calories %> * 0.2 },
           { label: "Fat", value: <%= @diet_calories %> * 0.2 }
         ]
    });
</script>

.erb stands for Embedded RuBy . In a .erb file to evaluate Ruby code (example use instance variables set in the controller) you need to use <%= ruby code %>

You can read an introduction to Erb templating here