I'm using graphs created with Highcharts. They work fine on my local development environment, but on Heroku the graphs are not showing. The div is just empty:
<div id="dashboard_chart_75"></div>
I'm using the lazy_high_charts gem and this is my application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require general.js.erb
//= require_tree .
//= require turbolinks
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require social-share-button
//= require ckeditor-jquery
This is the code the generate the chart:
spider_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(polar: true, type: 'line', height: #height)
f.pane(size: #size)
f.colors(['#C41D21','#1c77bb'])
f.xAxis(
categories: categories.map{ |c| [#survey.id,c.id, c.name] },
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
style: {
fontSize: '12px',
weight: 'bold',
width: '100%'
},
formatter: %|function() {return '' + this.value[2] + '';}|.js_code }
)
f.yAxis(gridLineInterpolation: 'polygon', lineWidth: 0, min: 0, max: 10,tickInterval: 1, tickWidth: 20)
f.tooltip(enabled: false)
f.series(name: "Gemiddelde van gewenste score", data: norm_scores, pointPlacement: 'on')
f.series(name: "Gemiddelde van huidige score", data: current_scores, pointPlacement: 'on')
f.legend(enabled: #legend, align: 'center', verticalAlign: 'top', y: 10, layout: 'vertical')
end
On production I see this error in the console:
Uncaught ReferenceError: Highcharts is not defined at window.onload
Which refers to this line:
window.chart_spider_chart = new Highcharts.Chart(options);
What could be the cause of this?
You really seem to be having a simple asset versioning problem, no reason to highcharts to behave differently in production.
Try clearing your assets and forcing precompiling using:
$ bundle exec rake assets:clobber
$ RAILS_ENV=production bundle exec rake assets:precompile
Then, add and commit your public/assets folder to push into Heroku. I have ran into a lot of trouble trusting that deployment precompile would work as expected. Some times compiling assets gets bugged and you need to change the file before precompiling to perceive a change.
If that doesn't work
You may have a problem with the gem in production, maybe it is inside a development block in gemfile, or maybe even =// require_tree . or any other require that would possibly insert that code before highcharts lib initializing, messing around with the order of the scripts would help (even though your pasted code doesn't reflect that)
Try looking for a .sprockets-manifest file in the public directory and delete it if found (it's a hidden file). If you compiled the assets locally and accidentally committed that file it can prevent asset compilation on Heroku.
You can also try to force a Heroku asset recompile by bumping the asset version in config/production.rb. I.E changing config.assets.version = 1.0 to 1.1 and then push.
Related
For the javascripts translations in Rails 4 I used the following library.
I did:
Gemfile:
gem "i18n-js", ">= 3.0.0.rc11"
In assets/javascripts/application.rb:
//= require i18n/translations
and finally I worked on the config/locales/en.yml data
Example:
en:
save:
text1: value1
independency:
text2: value2
In the view I used this for the translations, as in Rails.
series: [{
name: '',
data: [
["<%=t 'independency.text1' %>", independency],
["<%=t 'save.text2' %>", 100-independency],
]
}]
The thing is that I have to run this command rake i18n:js:export after doing any change in the translation file that involved the javascript part.
Moreover, the next day after starting the PC and opening again my application (localhost:3000) the javascript translations did not work at all. I had to run again the command rake i18n:js:export.
Is there any option to avoid executing this command every time? For me is difficult to understand the documentation.
I have recently updated my Grails app to 2.4.4 and am now using the asset-pipeline plugin. I am also using the CKEditor text editor plugin.
CKEditor loads its configuration from a Javascript file, ckconfig.js, which I have stored in /assets/javascripts/ckconfig.js. Loading of this file is declared in Config.groovy:
// CKeditor basic configuration
ckeditor {
config = "ckconfig.js"
skipAllowedItemsCheck = false
defaultFileBrowser = "ofm"
}
Unfortunately, my configuration is not being loaded and I get a Javascript console error "TypeError: d is undefined".
How do I refer to a Javascript file in the asset pipeline from within Config.groovy?
config = "assets/javascripts/ckconfig.js"
does not work. Is there a fixed path or URL? Or something cleverer?
For reference, I'm using ckeditor 4.4.1.0 plugin and application.js contains:
//= require jquery
//= require js/jquery-ui-1.10.3.custom
//= require cinnabar.js
//= require ckeditor/ckeditor
//= require ckconfig.js
//= require_tree .
//= require_self
This works for me in same environment:
ckeditor {
config = "/assets/ckconfig.js"
...
I placed the file in grails-app\assets\javascripts\ckconfig.js
In my app I use letsrate gem, on development all work fine, but on production stars doesn't show why?
letsrate.js.erb file
$.fn.raty.defaults.path = "/assets";
$.fn.raty.defaults.half_show = true;
$(function(){
$(".star").raty({
score: function(){
return $(this).attr('data-rating')
},
number: function() {
return $(this).attr('data-star-count')
},
click: function(score, evt) {
$.post('<%= Rails.application.class.routes.url_helpers.rate_path %>',
{
score: score,
dimension: $(this).attr('data-dimension'),
id: $(this).attr('data-id'),
klass: $(this).attr('data-classname')
},
function(data) {
if(data) {
// success code goes here ...
}
});
}
});
});
$.fn.raty.defaults.path = "/assets";
It works on development but doesn't work on production, I think it doesn't work because in production after assets precompile all images move to the public/assets path
What do I need to do to show images?
mysite.com/assets/star-on-287807403acda8ff0b61388109ea5b6e.png
my images "stars" on this url
1 step: Please paste the following lines to application.js file:
//= require jquery.raty
//= require letsrate
2 step: Execute the following cmd line in your terminal:
rake assets:precompile RAILS_ENV=production
3 step: Copy .png files from /images folder into /public/assets directory
star-half.png
star-off.png
start-on.png
4 step: execute the following cmd line in your terminal:
rails s -e production
I am using NetBeans IDE environment, Rails 4.2 and letsrate gem 1.0.9
I installed textAngular with Bower. But I'm having a hard time getting it to work. Anyone tried to add it with Rails and Bower?
$ rake bower:install && find . -name "*textAngular*" -print
./lib/assets/bower_components/textAngular
./lib/assets/bower_components/textAngular/dist/textAngular-sanitize.min.js
./lib/assets/bower_components/textAngular/dist/textAngular.min.js
./lib/assets/bower_components/textAngular/src/textAngular-sanitize.js
./lib/assets/bower_components/textAngular/src/textAngular.js
./lib/assets/bower_components/textAngular/src/textAngularSetup.js
Adding textAngular to application.js works. But adding textAngular-sanitize failes. A bit weird as I can see the source file next to textAngular.
// [snipp...]
//= require textAngular => No complaining here.
//= require textAngular-sanitize => couldn't find file 'textAngular-sanitize'
//= require_tree .
And added to app.js
angular
.module('app', ['ngRoute', 'restangular', 'textAngular'])
.config(['$routeProvider', 'RestangularProvider', function($routeProvider, RestangularProvider) {
The important line is
./lib/assets/bower_components/textAngular/dist/textAngular-sanitize.min.js
Your require should look like:
//= require textAngular/dist/textAngular-sanitize
For some reason, after running rake assets:precompile, require statements in application.js are left untouched. Here is how compiled application.js looks like:
//
//= require jquery
//= require jquery_ujs
//= require_directory .
//= require twitter/bootstrap
//= require rails.validations
$(document).on("click", '.show', function(e) {
var value = $(this).attr('data-big-url');
$('.image_container img').attr('src', value);
return false;
});
That //= require statements should be substituted!
Any ideas?..
THanks!
EDIT: uncompiled application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_directory .
//= require twitter/bootstrap
//= require rails.validations
$(document).on("click", '.show', function(e) {
var value = $(this).attr('data-big-url');
$('.image_container img').attr('src', value);
return false;
});
// $(window).load(function() {
// $('#featured').orbit();
// // $('#featured-bg').orbit();
...
It looks exactly the same!
Here is my production.rb:
config.serve_static_assets = true
config.assets.compress = false
config.assets.compile = false
config.assets.digest = false
I may be wrong, but I don't believe you'd want require ____ in a precompiled JS file
The reason is the require lines are called directives which guide
the creation of a manifest.json file for your assets. The
manifest basically tells Rails which files make up your assets,
allowing it to compile them effectively
You can see the precompiling documenation from the Rails guide here - basically says that the files you get from precompilation are "standalone" files. They are meant to be loaded as static files, without any preprocessors or directives
I would try this:
$ rake assets:precompile RAILS_ENV=production
This will compile the files as if it were the production environment, and storing them in /public/assets as a naked JS / CSS file
Finally, I solve the issue:
I had to downgrade to Ruby 1.9.3.
Unfortunately, I still don't know what was the reason of the issue, but now I have my assets compiling correctly.