×
Ruby on Rails: постинг твитов через Twitter API (04 нояб 2017)

Практикуемся в Ruby on Rails.

Идея JSON Visualization. Ruby on Rails

Больше
4 мес. 1 нед. назад - 4 мес. 1 нед. назад #1 от Aleksej
Aleksej создал эту тему: JSON Visualization. Ruby on Rails
В этом топике - о двух способах средствами Ruby on Rails визуализировать на вашей веб-страничке JSON, получаемый из того или иного API. Говорю "из того или иного", но показанные примеры в данном случае выполнены применительно к погодному информеру, работающему на основе WorldWeatherOnline, и кратко описанному в статье блога Ruby on Rails - это просто? Впрочем, JSON он и в африке JSON.

Первая визуализация выполнена на основе Google Chart; вы можете использовать, разумеется, любой приглянувшийся на github-e гем, ну а я по старинке сделал вручную, и вот что получилось:

<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):

<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

<body <%= yield(:body_attributes) %>>

then in your view.html.erb add this in first line
<%= content_for(:body_attributes, 'data-no-turbolink') %>

you can also disable turbolink with link_to
<%= 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).


Правда, я сделал все-таки вот так:
<%= link_to 'link_name', your_link_path, data:{turbolinks: 'false'} %>
Последнее редактирование: 4 мес. 1 нед. назад от p.rishard.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
4 мес. 1 нед. назад - 4 мес. 1 нед. назад #2 от evgenij
evgenij ответил в теме JSON Visualization. Ruby on Rails
Можно полностью удалить turbolinks:
  1. Удаляем gem 'turbolinks' из Gemfile.
  2. Удаляем //= require turbolinks из app/assets/javascripts/application.js.
  3. Дважды удаляем "data-turbolinks-track" => true из app/views/layouts/application.html.erb.

Можно выключить turbolinks не удаляя его, удалив строчку из app/assets/javascripts/application.js или закоментировав ее:
//= xxxrequire turbolinks

Дождались! Fedora 27.
Последнее редактирование: 4 мес. 1 нед. назад от evgenij.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.