В этом топике - о двух способах средствами
Ruby on Rails визуализировать на вашей веб-страничке JSON, получаемый из того или иного API. Говорю "из того или иного", но показанные примеры в данном случае выполнены применительно к погодному информеру, работающему на основе
WorldWeatherOnline, и кратко описанному в статье блога
Ruby on Rails - это просто?
Впрочем, JSON он и в африке JSON.
Первая визуализация выполнена на основе
Google Chart; вы можете использовать, разумеется, любой приглянувшийся на github-e гем, ну а я по старинке сделал вручную, и вот что получилось:
Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'TempC'],
<% @data.css("hourly").each do |hrly| %>
['<%= hrly.css("time").text %>',<%= hrly.css("tempC").text %>],
<% end %>
]);
var options = {
title: 'Temperature forecast'
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 100%; height: auto;"></div>
Второй пример -
Highcharts (Highcharts: Interactive JavaScript charts for your webpage):
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Temperature conditions'
},
subtitle: {
text: 'Source: WorldWeatherOnline.com'
},
xAxis: {
categories: [<% @data.css("hourly").each do |hrly | %> <%= hrly.css("time").text %>, <% end %>]
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
tooltip: {
headerFormat: '<b>Temperature</b><br>',
pointFormat: 'TempC: {point.y:.f} C°'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Time',
data: [<% @data.css("hourly").each do |hrly | %> <%= hrly.css("tempC").text %>, <% end %>]
}]
});
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Будучи перенесенными на heroku, обе коллекции скриптов выказали некоторые тормоза, то и дело приходилось нажимать F5, дабы чарт все-таки загрузился. В качестве лекарства отключаем turbolinks:
If you use turbolinks, try to disable it in that page, because I have similar problems with google maps apis.
to disable turbolinks you can add this to your application.html.erb
Code:
<body <%= yield(:body_attributes) %>>
then in your view.html.erb add this in first line
Code:
<%= content_for(:body_attributes, 'data-no-turbolink') %>
you can also disable turbolink with link_to
Code:
<%= link_to 'link_name', your_link_path, 'data-no-turbolink' => true %>
if you use rails/turbolinks 5 change data-no-turbolink into data-turbolinks and switch the boolean value
also try to put your javascript in the bottom. to make it loaded after the html dom (try to put your script in bottom, and your div in top).
Правда, я сделал все-таки вот так:
Code:
<%= link_to 'link_name', your_link_path, data:{turbolinks: 'false'} %>
