I used chartkick because I wanted to insert a graph with rails. Since the introduction itself is easy, we will describe the method of making the pie chart of the aggregated results.
- Chartkick Official Documentation
- Use chartkick rather than chart-js-rails when dealing with simple graphs in Rails
- Implement a pie chart at explosive speed [5 minutes]
ruby 2.5.1 Rails 184.108.40.206
Assumptions and goals
Create a pie chart from the opinion column (integer) of the votes table that summarizes user opinions. If the value of the opinion column is 1, it is agreed, and if it is 0, the opposite is counted, but it is created with other values and NULL values mixed.
- On the actual machine, if you move the mouse cursor to each element of the pie chart, the number of elements will be displayed.
Introduction of Chartkick
It is described on the reference page, but it will be described again.
gem "chartkick" # add
$ bundle install
//= require chartkick //= require Chart.bundle # add 2 lines
Reflect on view page
You can display the page anywhere, but this time I want to display the graph in index.html.erb of the posts controller.
<%= pie_chart Vote.group(:opinion).count%>
It is a graph that I do not know what it represents by itself. ..
So in the controller file define variables and methods for the graph.
def index @opinion = Vote.pluck(:opinion) @aggregate = aggregateOpinion(@opinion) @sum = sumOpinion(@opinion) end def aggregateOpinion(array) result = [["yes",0],["opposite",0],["neither",0],["no answer",0]] array.each do |i| if i == 1 result += 1 elsif i == 0 result += 1 elsif i == nil result += 1 else result += 1 end end return result end def sumOpinion(array) result = [["total votes",0],["valid votes",0],["invalid votes",0]] array.each do |i| if i == nil result += 1 else result += 1 end end result = array.length return result end
Only the target column is acquired as an array with the pluck method. After that, it is formatted into data for pie chart with the aggregateOpinion method.
Since the index of the result array is as it is in the pie chart display order, the parameter The null value is given last, and then the so-called “other” (in this case, the name “Neither”) comes.
The sumOpinion method is not directly related to the graph, but it is difficult to put information on the total number of votes on the graph, so it is created separately.
Based on the above contents, I would like to reflect it again on the view page.
<%= pie_chart @aggregate, width: "500px"%>
This is no problem, but at the end it is completed by displaying the layout and the contents acquired by the sumOpinion method with the table element.
<%= pie_chart @aggregate,colors: ["#3333cc","#cc3333","#339966","333"], donut: true ,width: "500px"%> <table border="1" width="500"> <tr> <th>Total votes</th> <th>Valid votes</th> <th>Invalid votes</th> </tr> <tr> <th><%[email protected]%></th> <th><%[email protected]%></th> <th><%[email protected]%></th> </tr> </table>
At the end
What did you think. I think I could apply the method to the method a little more. .. Of course, chartkick supports not only pie charts, so please check it out. Thank you for watching!