Интеграция amcharts с Ruby on Rails: использование данных из базы данных для заполнения графика - PullRequest
Новая
       16

Интеграция amcharts с Ruby on Rails: использование данных из базы данных для заполнения графика

1 голос
/ 29 марта 2012

Я новичок в RoR и хочу использовать amcharts для создания графика в моем приложении Ruby on Rails (я использую rails -v 3.2.2 и amcharts JavaScript Charts -v 2.6.5), который отображает данные из моя база данных Amcharts больше не использует flash (теперь они используют только Javascript / HTML5), поэтому обнаруженные мной руководства по интеграции предназначены для более старой версии amcharts.

Мой первый вопрос (вопрос высокого уровня понимания) - нужно ли использовать файл XML или .CSV для загрузки данных из моей базы данных в диаграмму или я могу просто использовать встроенный рубин в javascript?

Мой второй вопрос - кто-нибудь знает какие-либо учебные пособия или примеры кода о том, как реализовать диаграмму amchart в Ruby on Rails, которая извлекает свои данные из базы данных?

Например:

Если мне нужна круговая диаграмма со страной и значением. Пример таблицы базы данных: 

create_table "countries", :force => true do |t|
t.string   "name"
t.integer  "litres"
t.datetime "created_at", :null => false
t.datetime "updated_at", :null => false
end

Вот жестко закодированный график. Могу ли я использовать встроенный ruby, чтобы код извлекал данные из базы данных вместо жесткого кодирования? Или мне нужно сделать файл XML? Буду очень признателен за понимание того, как интегрировать извлечение данных из базы данных в код javascript amcharts. 

<script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Lithuania",
            value: 260
        }, {
            country: "Ireland",
            value: 201
        }, {
            country: "Germany",
            value: 65
        }, {
            country: "Australia",
            value: 39
        }, {
            country: "UK",
            value: 19
        }, {
            country: "Latvia",
            value: 10
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "value";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;
            // this makes the chart 3D
            chart.depth3D = 15;
            chart.angle = 30;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Ответы [ 3 ]

1 голос
/ 29 марта 2012

Я бы лично рекомендовал использовать Highcharts Highcahrts . Он имеет полную API-документацию, дающую вам возможность загружать данные в верхние диаграммы. Вот пример круговой диаграммы, которую вы вполне можете искать http://www.highcharts.com/demo/pie-basic. Вы можете попробовать сделать что-то вроде следующего:

Контроллер 

def index
 @title = "Country" 
 @country = Country.all 
 @data = []

 Country.all.each do |country| 
   countryData = { :CountryName => country.country.to_s, 

   :values => [] } 

 ['England', 'France', 'Italy', 'Spain','Germany'].each do |NameOfCountry|
  end 

  @data.push(countryData) #Push this data back to the variable countryData.
end

конец

View

Если вы используете высокие графики, у вас, вероятно, будет что-то базовое, похожее на это: 

  series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],

Однако вышесказанное является просто необработанными статическими данными. Взяв кое-что из того, что я вам предоставил, вы вполне могли бы сделать что-то вроде этого: 

name: '<%= data[ :CountryName] %>',
data: [<% data[ :values ].each do |value| %>
        <%= value %>,
    <% end %>]

Что вы можете сделать здесь - это проанализировать данные CountryName, а также значения, которые вы вводите. Надеюсь, это поможет.

В ответ на ваш вопрос вам не обязательно использовать данные XML или CSV. Обычно вы будете использовать JSON или XML для загрузки ваших данных.

1 голос
/ 14 октября 2013

Вот Ruby-оболочка для V3 от amCharts: http://rubygems.org/gems/amcharts.rb

1 голос
/ 29 марта 2012

Вы можете довольно легко просто использовать код Ruby для извлечения данных и вывода необходимого Javascript внутри вашего представления, хотя это может быть болезненным для построения, особенно со сложными структурами данных.частичное представление для вывода данных для графика с использованием JBuilder .После того, как вы создали свой ответ JSON, вы можете просто вывести его в свой график. 

# controller
@data = Country.all

# partial  "_data.json.erb"
<%=
  Jbuilder.encode do |json|
      json.countries @data do |json, country|
        json.country country.name
        json.value country.litres
      end 
  end
%>

# view
var chartData = <%= render :partial => "data", :format => :json, :locals => @data %>

Также есть найденный мной драгоценный камень amchart, который, похоже, не был затронутболее 3 лет https://github.com/ahobson/ambling

...