Search code examples
javascriptruby-on-railsgoogle-visualizationchartkick

Rails chart results only in "Loading..." but never gets rendered

iam a beginner and iam trying to add a chart to my app but instead of the graph i can only see "Loading...". I tried it with chartkick, highcharts and google charts but something in my app seems to be wired the wrong way

application.js

//= require jsapi
//= require highcharts
//= require chartkick
//= require jquery3
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .

the view

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
    </script>
  </head>
  <body>
    <%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
  </body>
</html>

layoutfile

<!DOCTYPE html>
<html>
  <head>
   <%= csrf_meta_tags %>

   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

 </head>

 <body>
   <%= yield %>
 </body>
</html>

Id be very glad for any points. Also, I am not sure where all the js files that are required in the application.js need to go. vendor/assets/javascript or app/assets/javascript?

Cheers

Solution

  • Add chartkick to your application's gemfile

    gem 'chartkick'

    bundle install

    inside app/assets/javascripts/application.js, add the following lines

    //= require Chart.bundle
//= require chartkick

    In your views, before application.js, add:

    <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>

    Incase you want to use highcharts, save this code(https://code.highcharts.com/highcharts.js) in highcharts.js. Add the file under vendor/assets/javascripts

    In the application.js file, add

    //= require highcharts
//= require chartkick

    For further information, check this link https://github.com/ankane/chartkick