I have a Rails 3.2.14 app where I'm using the chartkick and groupdate gem to try to generate some basic charts.
When I load my view I get the error:
Error Loading Chart: No adapter found
Here's what my view code looks like:
index.html.erb
<%= line_chart Call.group_by_week(:created_at).count %>
Here's my application layout including chartkick and yielding chart_js
application.html.erb (layout)
<%= javascript_include_tag "application", "chartkick" %>
<%= yield :charts_js %>
Can anyone tell me why I'm getting this error and how to fix it? I'd really like to start using Chartkick to generate some simple charts.
Probably you missed loading Google Charts or Highcharts (the adapters).
Try adding this line <%= javascript_include_tag "//www.google.com/jsapi" %> before <%= javascript_include_tag "application", "chartkick" %>. Also check the Installation section in gem's home page (scroll down :)).
To View:
Google Charts
In your layout or views, add:
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
link: https://chartkick.com/#google-charts
I had a similar issue as well when I first tried out ChartKick. The error message that I got is Error Loading Chart: No charting libraries found - be sure to include one before your charts
Here's how I fixed it.
I simply added the following line of code below to the application.js file in the assets > javascript folder.
//= require Chart.bundle
//= require chartkick
Save and refresh, that should fix it.
That's all
I hope this helps.
Another cause of error can be the protocol you use in the javascript_include_tag.
For instance you will get the error Error Loading Chart: No adapter found
if you for instance use protocol https for your website: https://www.example.com
and http in the javascript_include_tag in your code:
<%= javascript_include_tag "http://www.google.com/jsapi", "chartkick" %>
If above doesn't solve for someone, one additional possibility is a mixed content issue.
You can check this by opening the JS console.
Mixed Content: The page at
'https://site.io/' was loaded over HTTPS,
but requested an insecure script 'http://www.google.com/jsapi'. This
request has been blocked; the content must be served over HTTPS.
Solution:
Just change this
http://www.google.com/jsapi
To this (add s to http)
https://www.google.com/jsapi
Related
My problem is with the inspinia.js file in rails 6.
I have the file inspinia.js and application.js in :-
app / javascript / pack
Try to integrate it in the following ways:
import 'inspinia'
require ("inspinia")
and in some other ways that didn't help me either.
If someone has already done it or knows how to do it, I would appreciate your help.
Well, you said that you've put it in the app/javascript/packs directory.
All you have to do is require it in application.js like:
require ("packs/inspinia");
You can also include it in the the index.html.erb like:
<%= javascript_pack_tag 'inspinia', 'data-turbolinks-track': 'reload' %>
I'm working on a older rails system which is using an older version of bootstrap. I want to start moving things to bootstrap 4 and would like to start with the header and footer. The header and footer are being rendered as partials in the application view file.
application.html.erb
<head>
<%= stylesheet_link_tag "application", media: "all" %>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body
Lets just say the stylesheet link tag needs to be inside the application.html file there is other things in the application.html file that need it.
Application.css
*= require bootstrap_and_overrides
*= require cosmo/loader
*= require cosmo/bootswatch
*= require cosmo/font-awesome
I can't remove any of the required files because it will effect the rest of my pages.
I want to use the bootstrap cdn for my header and footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
How can I achieve using only the bootstrap cdn for the header and footer and exclude the required css files for these two partials?
It is good that you're upgrading to the newer version of bootstrap but I would recommend you to not try to use separate bootstrap for different partials.
There will be no straight and clean to do so I believe so you'll be wasting your time and effort.
It will increase the loading time of your view
Alone Bootstrap CSS may not work for many components you'll also need latest jQuery/Javascript to make it work.
I'll suggest you to create a new branch (hopefully you'll be using Git) and take your time to upgrade Bootstrap in that and merge whenever you feel you're ready.
I have a really weird bug. I have a very simple Rails 4.2 app, and I was just starting to add some JavaScript functionality. I've started by adding a remote: true option to a form, but after that more than one resource are created in the database. It seems to have a criteria, though, and it is that the number of resources created equals the total amount of pages visited since the server started. So:
rails s and refresh the /new page, will create 1 resource.
Now visit page 1, page 2, page 3, and go back to /new and submit, and 4 resources are created.
Now visit page 5, page 6, go back to /new and submit and 7 resources are created.
As I have mentioned, I was just starting with JS, and only had another script that is not related with this in anyway (bug still happens if I remove this file and restart the server).
Just for reference, I've created a new Rails app and put remote: true to the form and, obviously, this is not happening, so something there is messing up my app.
I don't even know how to research this. Any clue on where should I start looking at?
EDIT: I've tried to reproduce the same situation in tests, using Capybara and doing several page visits before filling up a form, and I couldn't.
application.js
//= require jquery2
//= require jquery_ujs
//= require turbolinks
//= require_tree .
layouts/application.html.erb
Moved it to the end of file and added cache: true
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, cache: true %>
</body>
</html>
Again: there was only one script in the app, and I've removed it. There are no more JS thing anywhere. None, at all.
I think the relevant question here is: how on earth can the number of page visits since the server was started be related to the number of resources created?
Thanks!
I can't yet believe it. It all was because of this:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, cache: true %>
</body>
</html>
I had to place the javascript tag back to its original place, within the <head> tag.
<head>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, cache: true %>
</head>
Don't ask me why, but placing the javascript file at the bottom of the file caused all this mess.
EDIT:
Turns out this is something related with Turbolinks. Removing Turbolinks fixes the issue, and I can load all JS at the end of the document, again. See this issue on Turbolinks, and also this on someone's project.
I have the following in a view:
<%= javascript_include_tag 'scrollable/jquery.tools.min.js' %>
<%= stylesheet_link_tag 'scrollable/scrollable-buttons' %>
<%= stylesheet_link_tag 'scrollable/scrollable-horizontal' %>
Because I have this plugin located in /vendor/assets/javascripts/scrollable/ and /vendor/assets/stylesheets/scrollable/
I don't have any problems in development, but when trying to get into that page in production mode, the JS is not loading. I get this error:
NetworkError: 404 Not Found - https://mysite/assets/scrollable/jquery.tools.min-707bfab8972e8e363a009148db789121.js"
Any thoughts please?
Notice that if I go to: https://mysite/assets/scrollable/jquery.tools.min.js - I can see the code. So I am guessing is some problem with the md5 fingerprint?
sounds like they're not getting precompiled? you can tell by checking if they're listed in public/assets/manifest.yml on production.
if that's the case, and you want to access them via the asset pipeline
did you run rake assets:precompile on production?
did you add the files to the config.assets.precompile array (in config/environments/production.rb)? eg, 'scrollable/jquery.tools.min.js', ditto for css files.
if you don't want to use the asset pipeline, use your own include tags instead of the javascript_include_tag/stylesheet_link_tags, ie <script src="/scrollable/jquery.tools.min.js" type="text/javascript"></script> for the js
I omitted the line <%= javascript_include_tag "application" %> from application.html.erb, so at this time, no javascript whatsoever, but what if i want to have jQuery included after that? And have to do it in the View.
download the jquery file from
http://code.jquery.com/jquery-1.7.2.js
add it to the folder your_app/app/assets/javascripts/
then add the following line to your application.html.erb
You have jquery enabled for the app.
If it's for only one page, then add it to the respective view, in the tag