first of all, please excuse my english.
I'm a junior developer on Ruby on Rails and I developed an user management application, among other things. I'm working on the last feature that is generating statistics in a PDF using Chartkick and WickedPDF.
But, I have a problem because the generated JS has a very tiny font size. I tried everything, but nothing to do, I can not enlarge this font.
Here is the line that generates one of my graphs :
<%= pie_chart Infosheet.group(:gender).count, library: {FontSize: 90} %>
This generate this code :
<script type="text/javascript">
new Chartkick.PieChart("chart-1", {"man":4}, {"library":{"FontSize":90}});
</script>
But nothing change. I tried lots of other things that I do not have in mind anymore... In my PDF, the graph has a gigantic margin and a tiny font. :/
I despair because I have to return the project next week.
Can someone help me?
thank you very much
EDIT :
This is my statistics in my PDF :
https://i.gyazo.com/c86a39b2a9e529b7551f8654bee838b4.mp4
The font is... really tiny. my statistics have a size of 5000px x 5000px.
Also, nothing changes if I increase the dpi of PDF
RESOLVED :
Finally, I forked chartkick to change the font-size directly into it, as no option was passed.
There you are
<%= pie_chart counters, library: { legend: { position: "left", labels: { fontSize: 26 } } } %>
I think you're passing the attribute with wrong case. Should probably be snakeCase and also try using a pixel size like so:
<%= pie_chart Infosheet.group(:gender).count, library: {fontSize: "50px"} %>
<script type="text/javascript">
new Chartkick.PieChart("chart-1", {"man":4}, {"library":{"fontSize":"50px"}});
</script>
Use this code
<%= pie_chart Infosheet.group(:gender).count, library: {fontSize: 90} %>
Related
My wkhtmltopdf PDF output of a page with several Highcharts charts on it is missing some elements of the charts, primarily all of the simple straight lines, including tick marks, grid lines, column borders, legend borders and the lines in my line/spline charts (data points display).
I have tried the tricks used to solve this issue from other stack questions, namely setting all of the following on the series:
enableMouseTracking: false,
shadow: false,
animation: false
...as well as setting those on the column/spline. No luck.
Here is a link to an image of the browser page.
Here is a link to an image of the pdf output.
Here is a link to a gist of my chart options for the first two charts.
This is all on Linux Ubuntu 12.04 installed in a VirtualBox guest, using the latest Highcharts download as of two days ago and wkhtmltopdf version 0.10.0_rc2. The calls to wkhtmltopdf are primarily going through the PDFKIT gem in a Rails 3 application, but I have made direct calls to wkhtmltopdf on the command line with the same results.
TIA for any help!
UPDATE:
I have isolated the problem down to a particular snippet of HTML that comes before the charts. I am using the Twitter Bootstrap css/javascript framework, this code produces a set of buttons:
<div class='btn-group' data-toggle='buttons-radio'>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
<button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>
Specifically, it is the presence of the .btn-group tag that is causing the issue - take that away, leave everything else as is, and the PDF generates identical to the page display without the noted issues. Also, if you move this snippet to anywhere on the page after the charts, everything works correctly.
I have further isolated the problem down to the actual html/css, as the issue still exists when I completely disable the Bootstrap javascript functions.
There is reported an issue on wkhtmltopdf which is very similar to your case. See issue 689. Wkhtmltopdf doesn't handle transparency/shadows properly and can result in unpredictable results.
Remove all stroke-opacity attributes in the svg and replace them with the opacity attribute, before you send it to wkhtmltopdf. This piece of code will do the trick.
nodes = document.querySelectorAll('*[stroke-opacity]');
for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) {
elem = nodes[nodeIter];
opacity = elem.getAttribute('stroke-opacity');
elem.removeAttribute('stroke-opacity');
elem.setAttribute('opacity', opacity);
}
try passing option javascript-dealy
wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - -
or if you are using pdfkit gem/library try adding below line in html code
<meta content="5000" name="pdfkit-javascript-delay"/>
I'm trying to use JW-Player in my application. Researching the issue a bit, there seems to be several abandoned efforts to produce a gem, and the latest is undocumented. So, here's how I'm going about it:
I downloaded the JW-Player version 6, unzipped and copied the files in my /app/assets/javascripts directory as follows:
app/assets/javascripts/jwplayer/jwplayer.js
app/assets/javascripts/jwplayer.html5.js
app/assets/javascripts/jwplayer.flash.swf
In my app/views/layouts/application.html.erb, I have the following:
<head>
<%= javascript_include_tag "/assets/javascripts/jwplayer/" %>
</head>
and in app/views/pages/about.html.erb, I have the following:
<%= jw_player("http://xxxxx/video.mp4",
:width => 200, :height => 110) %>
Here's what happens when I click on the About page link:
Showing xxxxxxxx/app/views/pages/about.html.erb where line #10 raised:
undefined method `jw_player' for #<#<Class:0x007fe77e37c018>:0x007fe780c1f678>
First time user of JW-Player.
When implementing JWPlayer 6.6, we stood before the choice of putting the jwplayer.flash.swf file into the public folder, to make the flash mode work, but it seemed very messy to have the files separated like that. What I did in the end to make it work both on development and production was:
Put all 3 files to vendor/assets/javascripts/jwplayer
Rename jwplayer.js to jwplayer.js.erb
Inside jwplayer.js.erb, update the flash file path config like this (the 1st line with the html5 file path config is just for reference)
j={type:"html5",src:e.base+"jwplayer.html5.js"},
b={type:"flash",src:"<%= asset_path('jwplayer/jwplayer.flash.swf') %>"};
(note that the "e.base+" before the path was removed for the flash file path - that's the trick that allowed working relative paths in the development environemtn)
In my understanding, the JWPlayer license allows modifications like this:
"Adaptations
Publisher shall be permitted to make Adaptations reasonably necessary for the purpose of exercising its rights under these Terms of Service, such as Adaptations to integrate the Products into Publisher’s websites or other properties. All Adaptations created by Publisher are strictly for its own Use and Publisher is prohibited from Distributing any Adaptation it creates. The Company reserves the right to prohibit the Use of any Adaptation in its sole discretion."
I have just finished working on a gem started by choix and improved by mattherick called jwplayer-rails that probably worked in older version of rails. It wasn't working with the assets pipeline but mattherick did a great job at fixing that up and I went on to update JWPlayer to the newest version.
You can see the repository here.
The following instructions are right out of the repo above.
To add this gem to your rails app just add this line to your application's Gemfile:
gem 'jwplayer-rails', :git => 'git://github.com/dutgriff/jwplayer-rails.git'
To use it first include assets on the page
<%= jwplayer_assets %>
Then place a div with JW Player
<%= jwplayer %>
You can pass options to jwplayer helper to customize it:
<%= jwplayer({width: 500, height: 200}) %>
More information for customization could be found here.
It works great for me so far but if you find an issue let me know on here or github.
I've found a solution to this.
The main issue you need to work-around is that jwplayer.js wants to fetch jwplayer.flash.swf and jwplayer.html5.js based on the path of jwplayer.js.
You can see that in Chrome Developer Toolbar for jwplayer.js (with pretty print):
(h.embed.config = function(b) {
var e = {fallback: !0,height: 270,primary: "html5",width: 480,base: b.base ? b.base : j.getScriptPath("jwplayer.js"),aspectratio: ""};
b = j.extend(e, h.defaults, b);
var e = {type: "html5",src: b.base + "jwplayer.html5.js"},
g = {type: "flash",src: b.base + "jwplayer.flash.swf"};
You can use that base property as an undocumented api to tell jwplayer where the jwplayer.flash.swf and jwplayer.html5.js can be found.
Example:
jwplayer("player-id").setup({
width: 640,
height: 480,
file: "www.w3schools.com/html/movie.mp4",
base: "http://cloudfront.net/assets/vendor/jwplayer/"
};
Then it will look for http://cloudfront.net/assets/vendor/jwplayer/jwplayer.flash.swf. Note: jwplayer has no notion of the asset pipeline fingerprint filenames, so make sure you sync both the file with md5 and without.
This worked for me:
Place jwplayer folder in public (Downloaded from longtail video)
Include it like an external script, without using asset pipeline (HAML).
%script{:src => '/jwplayer/jwplayer.js'}
In your video partial (ERB)
<script type="text/javascript">
jwplayer.key="Your key here";
$(document).ready(function(){
jwplayer("video").setup({
height: 360,
width: 640,
playlist: [
<% videos.each do |v| %>
{
image: "<%= v.poster %>",
sources: [
{ file: "<%= v.url %>" },
]
},
<% end %>
]
});
})
</script>
<video id="video">Video Loading... Ensure JavaScript is enabled...</video>
Did you restart the server after downloading the player and including it in your layouts. This could be one reason of failure.
Download jwplayer from http://www.longtailvideo.com/jw-player/download/
Put these files to the particular directory:-
app/assets/jwplayer/jwplayer.flash.swf
vendor/assets/javascripts/jwplayer.js
vendor/assets/javascripts/jwplayer.html5.js
Then add these line in application.js
//= require jwplayer
//= require jwplayer.html5
On the page where you are playing video, add these lines
<script type="text/javascript">jwplayer.key="YOUR_JWPLAYER_KEY";</script>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
file: "<%= file_path %>",
height: 360,
width: 640,
analytics: {
enabled: false,
cookies: false
}
});
http://account.longtailvideo.com/#/home from where you can get your free self hosted key in signing up from Get Your License Key portion.
I also chose JWplayer.
Here are my steps.
I'm using https://github.com/choix/jwplayer-rails gem.
Added
gem 'jwplayer-rails', '1.0.1'
to my Gemfile.
Did all things from above page; in a show.html.slim view file included these lines:
= jwplayer_assets
br
br
= jwplayer({file:#lesson.media_file})
lesson.media_file attribute contains file location. For a video file project/public/videos/videoclip.webm, media_file contains string "/videos/videoclip.webm".
Hope this will be useful.
I'm writing a website using Rails 3.2.6 and it needs to be able to display maths formatting on the website. To do this job I am using the mathjax-rails gem which works perfectly rendering the maths on, for example, questions/1. However, I would like the user to be able to download the question containing the maths content as a PDF. I have done a lot of searching and fiddling with my app and the closest I have come to a solution is wkhtmltopdf and the wicked_pdf gem. This works, in that a PDF is created which is saved to the user's computer. However, the maths is not rendered properly because, I presume, mathjax is not actually processing it.
Having done a bit of reading, I thought I found the answer elsewhere where it said to add a delay to the controller to give mathjax a chance to do its magic:
format.pdf do
render :pdf => 'filename',
:javascript_delay=>5000
end
However this doesn't work either and I end up with a PDF covered in things like:
[itex]3H_{2~(g)} + 2N_{2~(g)} ⇌ NH_{3~(g)}[/itex]
Rather than formatted maths. Has anyone got any clues on how I can get this to work?
Thanks in advance.
This is even a bit silly, but have you tried a longer delay?
With wkhtmltopdf this works:
wkhtmltopdf.exe --javascript-delay 15000 http://www.mathjax.org/demos/mathml-samples/ MML.pdf && MML.pdf
This does not work
wkhtmltopdf.exe --javascript-delay 5000 http://www.mathjax.org/demos/mathml-samples/ MML.pdf && MML.pdf
It's the same for the TeX samples as well
I finally solved it like this, the only thing is that I used the cdn instead of the gem:
This is my show action in the controller:
def show
#example = Exam.find(params[:id])
respond_to do |format|
format.html
format.pdf do
render pdf: #exam.name,
template: "exams/show.pdf.erb", // The template that you want to convert to pdf
:javascript_delay=>5000,
locals: {:exam => #exam},
layout: "application-pdf.html.erb"
end
end
end
And inside app/views/layouts/application-pdf.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>MathTest</title>
<meta charset='utf-8' />
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
<%= yield %>
</body>
</html>
The key is to wrap your pdf template, in my case "exams/show.pdf.erb" in an application layout designed for your pdf, the cdn is loaded in the layout and you just have to give wickedpdf the option to delay the javascript processing so mathjax has enough time to process the page.
Hope it helps.
UPDATE
As Peter Krautzberger mentioned, cdn.mathjax.org is shutting down due to budget issues. The solution would stay the same, you just have to load the mathjax from your project internally or use another cdn. You can fiend some cdn alternatives here: https://www.mathjax.org/cdn-shutting-down/
Currently I have four .json feeds that can be switched between by clicking corresponding button to replaceMarkers based on the gmaps4rails wiki instructions.
Only, that worked fine with the testing/development environment, and now that we are populating real data on the production server, it is not allowing the replaceMarker code to display any info. We have over 50 listings and will be adding well over 1000 soon.
Is there a cap on markers that can be displayed? If so, how do we go around this for gmaps4rails?
<% content_for :scripts do %>
<script type="text/javascript" charset="utf-8">
$(function(){
$("#controller1_markers").click(function(){
$.getJSON('/controller1.json', function(data){
Gmaps.map.replaceMarkers(data);
});
});
And referencing the feed has worked fine until we started adding in new locations.
Any ideas?
EDIT 1
So I looked at the code and wiki a bit deeper and figured that perhaps in this instance I am not calling the callback properly, as the:
$.getJSON('/controller1.json', function(data) {
Gmaps.map.replaceMarkers(data);
});
function may be older code for this type of problem using a more 3.1 approach and #json instead of directly naming the location of '/controller1.json'?
Edit 2 (dec.14)
The (data) is the .json string- which looks like:
[{"description": "<a href='/controller1/example-location-1'>Example Location<br />Cafe</a>", "title": "Example Location", "picture": "/images/controller1.png", "width": "60", "height": "60", "lng": "-94.5857704", "lat": "39.0920075"}, ...}]
.. and so on for 64 entries, soon to be 1000+.
The response on the browser shows that there is an Object being passed for each click, however- there are FOUR replaceMarkers codes, for four different models, called the same way. Even weirder, no replaceMarkers functions work on IE, same problem as described above on Chrome and Firefox, and it ALL works on iPhone and iPad... Hence my confusion.
Solved in private chat.
The problem was due to gmaps4rails not escaping tabs in json, leading to issues in some browsers.
Can anyone help me out in implementing joehewitt's scrollability plugin.(https://github.com/joehewitt/scrollability.git)
I am trying to develop a mobile web app!
Thanks in advance!
Right so,
1)Include the javascript file and the css file (its in the static folder)
2) Head to http://scrollability.com/
and following the structure create the two divs:
<div id="overflow">
<div id="scrollysection">
</div>
</div>
With the following CSS
#overflow
overflow:hidden
position:absolute
top:0px
left:0px
width:100%
height:100%
#scrollysection
position:absolute
top:0px
left:0px
3)Then you need to apply the fix here: https://github.com/joehewitt/scrollability/issues/29
To get the code running just comment out or remove all of the exports
stuff (lines 77-84). Then on line 94 where require is mentioned, just
pull the two lines of code out of that ready function and comment the
ready function out.
Thats what I did and it worked.
Have a look at the source code of: http://www.uponahill.com/ It is done by Joe Hewitt and uses scrollability.