Using Chartkick in Rails 4.0

Question

How can i use Chartkick in rails 4.0.

in Gem I added:

gem "chartkick"

and in my view for example i added this:

<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>

but the page only show Loading... generated Html:

<div id="chart-1" style="height: 300px; text-align: center; color:
#999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">   Loading... </div> <script type="text/javascript">   new Chartkick.PieChart("chart-1", {"Football":10,"Basketball":5}, {}); </script>

score 21 · Answer 1 · edited May 20 '16 at 18:23

21

To get chartkick working in Rails 4, I did the following:

1. Added chartkick gem to my Gemfile (bundle install)

gem 'chartkick'

2. Downloaded Google jsapi file into my vendor directory

/railsapp/vendor/assets/javascripts/jsapi.js

3. Added chartkick and jsapi to my application.js

//= require jsapi
//= require chartkick

After that, charts showed up on a consistent basis.

edited May 20 '16 at 18:23

Nick

9,493
8
43
66

answered Oct 15 '13 at 20:28

Jeffrey Harrington

1,797
1
15
24

score 18 · Accepted Answer · edited Jan 18 '17 at 11:12

18

Be sure to include the JavaScript files before the charts.

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

edited Jan 18 '17 at 11:12

Hizqeel

947
3
20
23

answered Oct 03 '13 at 06:44

Andrew Kane

3,200
19
40

In rails 4 application.js i added //= require chartkick and //= require jsapi. but the problem was not solved – Abolfazl Mahmoodi Oct 03 '13 at 07:07
1

I found the solution. I must add //= require jsapi and //= require chartkick on top of application.js. – Abolfazl Mahmoodi Oct 03 '13 at 07:19

score 5 · Answer 3 · answered May 11 '15 at 17:09

Loading your charts superfast

i am using highcharts here as it do not require you to connect each time to google server

add this gem

gem "chartkick"

then download highchart.js from here http://www.highcharts.com/download

paste the file in your app/vendor/assets/javascript/highchart.js

open your application.js and require these two files

//= require highcharts.js
//= require chartkick

after this you are good to go and your charts will load within a blink

score 4 · Answer 4 · edited Mar 11 '15 at 09:50

There are actually 2 ways to solve this, refer to the "Installation" guidelines: http://ankane.github.io/chartkick/

For Google Charts, use:

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

If you prefer Highcharts, use:

<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

For those who are thinking of using jsapi offline, you cant really, even if you have downloaded jsapi.js, it still does a further load to google. You are just breaking the terms:

Extract from: Google Charts FAQ

Can I use charts offline?

No; your computer must have live access to http://www.google.com/jsapi in order to use charts. This is because the visualization libraries that your page requires are loaded dynamically before you use them. The code for loading the appropriate library is part of the included jsapi script, and is called when you invoke the google.load() method. Our terms of service do not allow you to download the google.load or google.visualization code to use offline.

Can I download and host the chart code locally, or on an intranet?

Sorry; our terms of service do not allow you to download and save or host the google.load or google.visualization code.

score 0 · Answer 5 · answered Sep 12 '19 at 13:10

somehow I needed to add these three lines to get things working...but still I get a few warnings... In v3.0 they say they have some breaking changes in regards to jsapi... confusing.

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

Using Chartkick in Rails 4.0

5 Answers5

Linked