CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
LxSwiss
LxSwiss

Reputation: 547

Import Chart(javascript) into Rails Application

I'm quite new to rails and Im trying to import a javascri Chart from Highcharts.com into my Rails Application. But for some Reason the view Container remains empty.

I have downloadet the package and addet it into vendor/assets/javascripts I have addet //= require highcharts to the application.js file. here's my users.js file

$(function () { 
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

and i've addet this to show.html.erb 

<div id="container" class="container" style="width:100%; height:400px;">

</div>

Does anybody know how I can show the chart on show.html.erb?

thanks in advance!

Upvotes: 0

Views: 131

Answers (1)

rderoldan1
rderoldan1

Reputation: 4078

This is how I use highcharts in my apps

Gemfile

gem "highcharts-rails", "~> 3.0.0"
aplication.js 
//= require highcharts
//= require highcharts/highcharts-more
show.html.erb 
<div id="monitor_chart" style="width: 90%; height: 600px;" class ="graph"></div>



<script type="text/javascript" charset="utf-8">
  $(function () {
    new Highcharts.Chart({
    chart: { renderTo: 'monitor_chart' },
    title: { text: 'Estado del Servidor' },
    xAxis: { type: 'datetime',
              formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
            }
          } ,
     yAxis: {
        title: { text: 'Porcentaje de utilización'}
     },
    series: [
    {
      pointInterval: <%= 1.minute * 1000 %>,
      pointStart: <%= 1.hour.ago.to_i  %>,
      data: <%= @agents.map { |data| [data.created_at.to_i, data.cpu_used]}.inspect %>,
      name: "CPU"
     },
      {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i%>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.mem_used]}.inspect %>,
      name: "Memoria"
      },
     {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i  %>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.disk_used]}.inspect %>,
        name: "Almacenamiento"
       }

   ]
  });    
  });
</script>

Upvotes: 1

Related Questions