在Rails中获取Highcharts数据的正确方法是什么

Question

My Rails website display a simple table about name and age of students.

name  age
Lily  25
Tom   27
Chris 19
...

So I have @names = Student.pluck(:name) , @ages = Student.pluck(:age) . Now I would like to generate a line chart by using Highcharts:

HTML: <div id='students-chart'></div>

JavaScript:

$(function() {
  Highcharts.chart('students_chart', {
    ...
  };
};

Now I should provide the name and age to the chart as the xAxis and yAxis. The simplest way is to include the JavaScript in the html.erb file and provide the data by <%= @names %> and <%= @ages %> . However, it's not recommended, and I want to put the JavaScript code in the assets/javascripts/students.js file.

A very common way to fetch the data in the JavaScript file is using the Ajax, however, my data is already in the page so I don't want to add an extra action in the controller to send the data.

So what's the best practice to get the data for the Highcharts? data- attribute?

No front-end frameworks in the project, only jQuery . I know some gems could help me like Chartkick or LazyHighCharts , but I would like to know the basic strategy.

Answer 1

This is one way to show the chart, just jQuery getting data from the controller.

In controller fetch the data, adjust and convert to json . Customise respect to on your models. Here is an example with an array of hashes (data are passed as arrays):

@series = [ {name: 'Lily', data: [25]}, {name: 'Tom', data: [27]}, {name: 'Chris', data: [19]} ].to_json

For example, if your User model includes the age column, you can adjust like this:

@series = User.all.map{ |user| {name: user.name, data: [user.age]} }.to_json

In view (customise as you will), passing the variable here:

<div id='students_chart'></div>
<script>
  $(function () { 
    var myChart = Highcharts.chart('students_chart', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'User ages'
        },
        xAxis: {
            categories: ['Users']
        },
        yAxis: {
            title: {
                text: 'Age'
            }
        },
        series: <%= raw @series %>
    });
});
</script>

---

Edit - get data from server

Instead of sending data to view, render as json (no need to add e new action):

 respond_to do |format| format.html format.json { render json: @series } end 

Then place the javascript in a file and get json data using jQuery.getJSON() :

 $.getJSON(window.location.href, function(json) { var highChartData = json; console.log(json) var myChart = Highcharts.chart('students_chart', { chart: { type: 'column' }, title: { text: 'User ages' }, xAxis: { categories: ['Users'] }, yAxis: { title: { text: 'Age' } }, series: highChartData }); });