[Personal application work memo] How to display a bar graph and a line graph in one graph

What I did this time

We have already created a bar graph with dates on the x-axis and calories on the Y-axis, and we will add a line graph of weight to the Y-axis.

Preparation before graph implementation

Added weight input form

python

.weight
body weight
  = f.number_field :weight, step: '0.1', placeholder: 'Example) 70'
  kg

Added column to store weight

https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a#%E3%82%AB%E3%83%A9%E3%83%A0%E8%BF%BD%E5%8A%A0 You can do it immediately by referring to this article.

Added weight column to strong parameters

posts_controller.rb

private
  def post_params
    params.require(:post).permit(:food, :calorie, :protein, :fat, :carbo, :text, :image, :weight).merge(user_id: current_user.id)
  end

Show weight

ruby:_post.html.haml

.weight
- if post.weight.present?
  = post.weight
  kg

Actual page (this is what it looks like when displayed)

Finally add weight to the graph !!

Now, how do you put this added weight on the graph from here?

What is the current graph like?

At present, only weight is horizontal and calories are vertical. I would like to add a line graph of weight to the vertical here so that I can see the correlation between calories and weight.

↓ A reference article was found rather quickly, and it was surprisingly completed in an hour.

Click here for the completed code

app/controllers/charts_controller.rb

class ChartsController < ApplicationController

  def index
    #calorie
    #Calculate total calories by date
    sum_calorie = current_user.posts.group("date(created_at)").sum(:calorie)
    #Since the total calories for each date is in the form of a hash, get the value, put it in an array and assign it to a variable
    array_calorie = sum_calorie.values

    #Pass data to js side using gon
    gon.data = []
    #Extract the total calories by date one by one with the map method
    #How to use map method → Array variable.map {|Variable name|Specific processing}
    gon.data = array_calorie.map{ |calorie| calorie}

    #Created by date_Get only at column. Stored in the form of an array
    dates_calorie = current_user.posts.group("date(created_at)").select(:created_at)

    gon.date = []
    @dates = dates_calorie.map{ |dates| dates.created_at}
    #Take out and change the date notation one by one in each statement
    @dates.each do |a|
      gon.date << a.strftime("%Y year%m month%d day")
    end


    #Weight ☆ This part was added this time ☆
    gon.weight = current_user.posts.group("date(created_at)").select(:weight).map{ |weight| weight[:weight]}
  end
end

ruby:app/view/charts/index.html.erb

<%#Draw a graph inside the canvas tag%>
<div class="chart-container" style="position: relative; height:50vh; width:50vw">
    <canvas id="myChart"width="400" height="400"></canvas>
</div>

<%#Write js in the html script tag%>
<script>
#Get the DOM of the graph part and draw the graph with the getContext method
var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    
    type: 'bar',
    data: {
        #Specify X axis with labels
        labels: gon.date,
        datasets: [{
            type: 'bar', #Calories are bar graph
            label: "Total daily calories",
            #Specify Y axis with data
            data: gon.data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        },
    #This time I added this part----------------------------
        {
            type: 'line', #Weight is a line graph
            label: "body weight",
            #Specify Y axis with data
            data: gon.weight,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 1.2,
            #If you do not write this, the lower part of the bar will be painted
            fill: false,
        }]
    #------------------------------------------------------
    },
    options: {
        title:  {
            display: true,
            text: "Calorie graph"
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                id: 'y left axis'
            }]
        }
    }
});

</script>

<div class="home">
    <%= link_to 'Return to home', root_path %>
</div>

Click here for the completed graph

Referenced articles and process to completion

http://www.dcom-web.co.jp/lab/javascript/draw_multi_axis_graph_using_chartjs This page was the first reference.

1. Instead of passing it with gon suddenly, at first I tried to see if it was displayed with an appropriate number such as [60, 70] referring to the above article.
2. After confirming that it worked and the graph was displayed safely, I wondered how to transfer the weight from the controller to the view.
3. I thought it would be difficult to get one weight in a day, but I found that Rails' group method would group them into the one with the lowest id for each group. If you use the group method for each date, you can get the weight with the smallest id among the posts posted that day. https://pikawaka.com/rails/group#group%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AE%E5%9F%BA% E6% 9C% AC% E7% 9A% 84% E3% 81% AA% E4% BD% BF% E3% 81% 84% E6% 96% B9
4. After that, substitute it for gon and pass it from gon to gon.
5. Finally, add fill: false, to make a line and finish.