anchor.diff:        <td>1個</td>
       </tr>
     </table>
  -  <script>
  -  var message = '使う予定の野菜: ';
  -  <% @vegetable_stocks.to_a.each do |vegetable_stock| %>
  +<script>
  +var ctx = document.getElementById("myChart");
  +var ctx = document.getElementById("myChart").getContext("2d");
  +var ctx = $("#myChart");
  +
  +var label_list = new Array();
  +var data_list = new Array();//手持ちの野菜
  +var will_list = new Array();//使う予定の野菜
  +
  +//手持ちの野菜
  +<% @vegetable_stocks.to_a.each do |vegetable_stock| %>
  +  label_list.push('<%= vegetable_stock[1] %>');
  +  data_list.push('<%= vegetable_stock[2] %>');
  +<% end %>
  +
  +//使う予定の野菜
  +//var message = '使う予定の野菜: ';
  +<% @vegetable_stocks.to_a.each do |vegetable_stock| %>
     {
       var vegs = document.querySelectorAll('[data-<%= vegetable_stock[0] %>]');
       var veg_count = 0;
       for (veg of vegs) {
          veg_count += parseFloat(veg.dataset.<%= vegetable_stock[0] %>);
       }
  -    message += '<%= vegetable_stock[1] %> : ' + veg_count + '個 '
  +
  +    will_list.push(veg_count);
  +    //message += '<%= vegetable_stock[1] %> : ' + veg_count + '個 '
     }
  -  <% end %>
  -  alert(message);
  -  </script>
  +<% end %>
  +var myChart = new Chart(ctx, {
  +    type: 'radar',
  +    data: {
  +        labels: label_list,
  +        datasets: [{
  +            label: '手持ちの野菜',
  +            backgroundColor: [
  +                'rgba(255, 99, 132, 0.2)',
  +                'rgba(54, 162, 235, 0.2)',
  +                'rgba(255, 206, 86, 0.2)',
  +                'rgba(75, 192, 192, 0.2)',
  +                'rgba(153, 102, 255, 0.2)',
  +            ],
  +            borderColor: [
  +                'rgba(255,99,132,1)',
  +                'rgba(54, 162, 235, 1)',
  +                'rgba(255, 206, 86, 1)',
  +                'rgba(75, 192, 192, 1)',
  +                'rgba(153, 102, 255, 1)',
  +            ],
  +            borderWidth: 1,
  +            data: data_list,
  +        },
  +                   {
  +            label: '使う予定の野菜',
  +            backgroundColor: [
  +                'rgba(153, 102, 255, 0.2)',
  +                'rgba(75, 192, 192, 0.2)',
  +                'rgba(255, 206, 86, 0.2)',
  +                'rgba(54, 162, 235, 0.2)',
  +                'rgba(255, 99, 132, 0.2)'
  +            ],
  +            borderColor: [
  +                'rgba(153, 102, 255, 1)',
  +                'rgba(75, 192, 192, 1)',
  +                'rgba(255, 206, 86, 1)',
  +                'rgba(54, 162, 235, 1)',
  +                'rgba(255,99,132,1)'
  +            ],
  +            borderWidth: 1,
  +            data: will_list,
  +        }
  +        ]
  +    },
  +    options: {
  +        scales: {
  +            yAxes: [{
  +                ticks: {
  +                    beginAtZero:true
  +                }
  +            }]
  +        }
  +    }
  +});
  +
  +
  +</script>
     <!-- /container -->
  
positive.code: 
    </div>
    <canvas id="myChart" width="400" height="400"></canvas>
  <script>
  var ctx = document.getElementById("myChart");
  var ctx = document.getElementById("myChart").getContext("2d");
  var ctx = $("#myChart");
  var label_list = new Array();
  var data_list = new Array();
  <% @vegetable_stocks.to_a.each do |vegetable_stock| %>
    label_list.push('<%= vegetable_stock[1] %>');
    data_list.push('<%= vegetable_stock[2] %>')
  <% end %>
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: label_list,
          datasets: [{
              label: '手持ちの野菜',
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
              ],
              borderWidth: 1,
              data: data_list,
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
  </script>
    <hr>
    <h3 class="recipe_title" style="background-image:url('http://image.space.rakuten.co.jp/d/strg/ctrl/3/07207b43cde4c6476cb8d00ca58f8b3e7be541a9.16.2.3.2.jpg')"><a href="http://recipe.rakuten.co.jp/recipe/1870012115/">★ラブリースパニッシュオムレツ★</a></h3>
    <table class="table">
  
negative.code: <div class="top_page">
      <ul class="nav nav-pills pull-right">
        <% if @veg_saved == true %>
          <li class="active" id="bought_button">
  