How to display a graph in Ruby on Rails (LazyHighChart)

I'm just starting to learn programming, so it may be a poor article, but I would like to write such an article as a memorandum and practice for myself. I look forward to working with you.

What is Lazy High Chart?

Simply put, it is a gem that displays a graph. It looks like a gem that makes it possible to use a JavaScript graph library called HighCharts in Ruby. I will write it early, but I am not sure yet how to change the display method of the graph itself, so this time I will write only the implementation.

Introducing Gem

gem 'lazy_high_charts'

First, write this in the Gemfile and bundle install

In addition to this in application.js

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

Let's add. Now you are ready.

Display graph in View

First is the description on the View side.

<%= high_chart('my-first-chart', @chart) %>

The graph will be drawn where this description is made.

Controller side settings

Here, I decide the type of graph (bar graph, pie graph, line graph, etc.), but as I mentioned earlier, I don't know the details yet, so I will write the description I implemented for the time being.

  def create
    @post = Post.new(post_params)

    if @post.save
-----------------------------------------------------#Description for displaying a graph
    @chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.title(text: @post.select.name)
      f.xAxis(categories: ["Soldier", "Wizard", "Monk", "Fighter", "Gunner"])
      f.series(name: "", yAxis: 1, data: [@post.vs_soldier_id,@post.vs_wizard_id,@post.vs_monk_id,@post.vs_fighter_id,@post.vs_gunner_id])
      f.yAxis [
        {title: {text: "", margin: 0} },
        {title: {text: ""}, opposite: true},
      ]
      f.legend(align: 'none')
      f.chart({defaultSeriesType: "column"})
    end
-------------------------------------------------------------------------

    else
      render "new"
    end
  end

It is a description when the value acquired by the strong parameter from the new action is displayed by the create action.

This time, a bar graph is displayed. f.yAxis f.legend f.series I'm not sure about these three because I didn't need them in this implementation (sorry)

f.title As written, the value you enter here will be the title of the graph.

f.xAxis The value on the horizontal axis of the graph. This time it was decided here, so I put a character string in it.

And in the f.series data: [] I will put the data here. (I did a lot of variables to put values here, but it was hard for beginners ...)

f.chart({defaultSeriesType: "column"}) It seems that the "column" here is the type of graph.

that's all.

There are still many things I don't understand and it has become a messy article, but I would like to do my best to write good things little by little. Then ~