create highcharts using data from table - ruby-on-rails-4

Question

I am trying to use data from the table to create a bar graph using high-charts in rails.I have a table named school and it contains two columns i.e,name and attendance.I want to show student name on x-axis and attendance on y-axis.My JavaScript code is:
$(function () {
// Create the chart
$('#student')high-charts({
chart: {
type: 'column'
},
title: {
text: 'student details'
},
x Axis: {
type: 'category'
},
y Axis: {
title: {
text: 'Total attendance'
}
},
legend: {
enabled: false
},
plot-options: {
series: {
border-width: 0,
data-labels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tool-tip: {
header-format: '<span style="font-size:11px">{series.name}</span> <Br>',
point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
},
series: [ {
name: 'Stu',
id: 'Stu',
data: [
[<%= #students.each do |s|%>
'<%= s.name %>',
<%= s.attendance%>
<%end%>
]
]
}
in my HTML i have :
<div class="col-md-8">
<div class="x_panel">
<div id="student" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</div>
</div>
I was unable to load the bar graph.Please help

Answer 1

try this
$(function () {
// Create the chart
new Highcharts.Chart({
chart: { renderTo: 'student' },
title: {
text: 'student details'
},
x Axis: {
type: 'category'
},
y Axis: {
title: {
text: 'Total attendance'
}
},
legend: {
enabled: false
},
plot-options: {
series: {
border-width: 0,
data-labels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tool-tip: {
header-format: '<span style="font-size:11px">{series.name}</span> <
Br>',
point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
},
series: [ {
name: 'Stu',
id: 'Stu',
data: [
[<%= #students.each do |s|%>
'<%= s.name %>',
<%= s.attendance%>
<%end%>
]
]
}
Create a new highchart and render div in chart