How to print flot graph - javascript

Can any body help me to find out, how to print dynamic graph as example generated by flot.
I tried this one but it's printing whole page, but I want only graph portion.
function printGraph(){
$('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {
//Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//canvas.toDataURL("image/png");
window.print('placeholder');
});
}

This article describes how to copy the canvas to a normal img which can then easily be printed or saved as an image.
The important part:
img.src = canvas.toDataURL();
See the great answer below from Ignacio Correia for more details.

Launch a new window with only the graph or with alternate css similar to what google maps does when you print.

Attention this post have been edited, please see all possible solutions
From what I have searched and found you have only 2 choices or try to print the CANVAS, or EXPORT as an image or my idea is to separate the image from the content and try to print only the graph. Here is a FAQ by Flot, how can you export the image: Question Number 3
Q: Can I export the graph?
A: You can grab the image rendered by the canvas element used by Flot
as a PNG or JPEG (remember to set a background). Note that it won't
include anything not drawn in the canvas (such as the legend). And it
doesn't work with excanvas which uses VML, but you could try
Flashcanvas.
SOLUTION 1 - Export image:
Export image to computer and then print it
SOLUTION 2 - FLOT to CANVAS:
Saving canvas as images - By Mozilla
Save as Image Flot Plugin
Related question - Problem printing in IE8
SOLUTION 3 - My own, Modal printing
This is not the best solution by far but it works, here is a demo:
JSFIDDLE Normal Demo
JSFIDDLE Fullscreen Demo
Steps
Load Fancybox
Open using INLINE FRAME the graph
PRINT on callback after show
Reload the page after print to redesign the page
Here is the necessary code:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterShow : function() {
alert('You are about to print the graph!');
window.print();
},
afterClose : function() {
alert('We need to refresh the page!');
window.location.reload(false);
}
});
});
Extra
This related question is about exporting Flot to PDF, don't know if you may be interested: Export Flot to PDF
EDIT - WORKING SOLUTION
Here is a working demo of how to export the image: FLOT to IMAGE

You could hide the parts of the page you don't wish to print by using a separate stylesheet that has media="print". This would also allow you to tweak the final printed output of the graph itself, for example making it larger.

Found a solution by using html2canvas. First assign the container div to have id like "theChart".
<div class="box" id="theChart">
<div id="placeholder"></div>
</div>
Now we can create an image:
html2canvas($('#theChart')).then(function(canvas) {
image = canvas.toDataURL("image/png");
document.location.href=image;
});
This will also solve the problem when canvas.toDataURL() does not render axis labels.

Related

Leaflet browser print plugin doesn't show scale on print

I'm using the plugin Leaflet browser print and have a problem, when I click to print, I I would like to show the scale in the print, but I can not do it at all. Even though you configured exactly as shown in the example (https://github.com/Igor-Vladyka/leaflet.browser.print), it does not appear.
My code is basic:
// PRINT
ctlPrint = L.browserPrint({
closePopupsOnPrint: false,
printModesNames: {Portrait:"Retrato", Landscape:"Paisagem", Auto:"Auto", Custom:"Selecione a área"}
}).addTo(map);
map.on("browser-print-start", function(e){
L.control.scale({
position: 'topleft',
imperial: false,
maxWidth: 200
}).addTo(e.printMap);
});
Just it! According to the code, the scale was to be shown at the top and left, and in the preview before printing it actually shows the scale, but when it is to print no. Somebody help me? Thanks! My code is here: https://github.com/eltonsantos/mapasFortaleza/blob/master/js/script.js
Try with "browser-pre-print" event.
When "browser-print-start" event is fired, overlay is yet created.
Look at _print function in
https://github.com/Igor-Vladyka/leaflet.browser.print/blob/master/src/leaflet.browser.print.js

Set different width and height to font in css/js

I'm looking for a way to set different width and height separately based on viewport width and height. Is it possible in css or js?
For a JS solution, you can use the FlowType.js library.
It will allow you to quickly and easily control the text elements on your page relative to the size of their containing div.
Your example could be setup like this:
$(document).ready(function(){
// customize the options you pass into the
// flowtype function in order to get the effects you want
$('.text_block').flowtype({
minimum : 500,
maximum : 1200,
minFont : 12,
maxFont : 40,
fontRatio : 30
});
});
This example uses jQuery to ensure that all assignments via flowtype are only assigned after the page has loaded.
To activate flowtype, you just need to put this call somewhere before your closing <body> tag:
<script> $('.text_block').flowtype(); </script>
See the flowtype.js website for more information on how to install flowtype, and how to configure it.
Here is a jsfiddle showing your example with the flowtype library assignments.
Hope this helps!

C3 chart sizing is too big when initially loaded

I am using the C3 JavaScript library for the display of graph data. When my page initially loads, the graphs are hidden. It isn't until a "tab" on the page is selected that the graphs display.
The trouble I am seeing is that my first graph doesn't fit its containing div tag when first loaded. I can change the date range I'm viewing data for by clicking a button, at which time the graphs will be correctly sized.
Here is the relevant HTML that I'm using for the graphs (notice that I am using AngularJS, in case that helps/hinders things at all):
<div class="chartgrouping">
<div ng-show="showGraphSection" class="graphA">
<h2 class="section-main-heading">Data A</h2>
<div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
<h2 class="section-main-heading">Data B</h2>
<div class="stats">
<div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
<div class="goals">GOAL: 20%</div>
</div>
<div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>
</div>
The initial, incorrect display (the first graph stretches the entire way across):
And the correct result after loading new data, after the first result (above) has been displayed:
Is there a good solution to this problem?
I have found the solution relates to how it determine the full width of the element when hidden (often the case when using bootstrap tabs etc and other hidden elements).
To get around this, you need to trigger the resize event on the window to make d3 (the underlying graphing library) work out the correct sizing.
jQuery(window).trigger('resize');
You can do this on bootstrap using something akin to
jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {
jQuery(window).trigger('resize');
});
In my case, #Flanamacca's answer only partially worked. Loading the chart data with a setTimeout with delay of 0 seems to fix it.
After trying a variety of possibilities, I finally found a solution. It's an Angular solution, so anyone else experiencing the problem and not using Angular will need to modify it appropriately.
How I solved it was, rather than using an ng-show on the parent div, I removed that one and added exact copies of it to each sub-tag (the h2 and the h2s' siblings). Simple solution, but such a pain to figure out.
The jQuery(window).trigger('resize'); stuff didn't work for me.
But using C3 resize ( ) function works like a boss :
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
});
$('.collapse').on('shown.bs.collapse', function() {//Your event listner
chart.resize();
});
If you are using Foundation with multiple tabs then the following worked for me,
$('#myPanelId' ).on('toggled', function(){
jQuery(window).trigger('resize');
})
Where myPanelId is the panel id which contains the charts.
#Flanamacca's answer didn't work for me, though it was a bootstrap tab-related problem so I did use the jQuery selector they suggested.
What worked for me was the c3 flush() method, which forces the chart to redraw (see http://c3js.org/reference.html#api-flush).
$('a[data-toggle=tab]').on('shown.bs.tab', function() {
my_c3_chart.flush();
});
Simply setting the CSS max-width of the div containing the chart worked for me.
Our situations might be different, but maybe someone with a more comprehensive understanding of how html is rendered can extrapolate from this.
my problem was that I was hiding the graph until my data was pulled in and the graph was generated with c3.generate. I was hiding the graph using css "display: none;". this was what caused the issue. once I changed my css to "opacity: 0," the issue went away.

Facebook custom stories with big Image - Open Graph with Javascript

I am trying to create a custom story that has a new image every time someone tries to post it. Now I have created an Object, and Action and a Story combining the two. What I would like to achieve is a story that looks like this https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2178-6/851562_1376970469205025_523101852_n.png , yet all i seem to be getting is https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2178-6/851560_389589627833470_1903099476_n.png
Lets say my Object is course and my action is run. Below is the code I have the does not return the correct results. The image I am including is 1200 x 630.
FB.api(
'me/namespace:run',
'post',
{
course : {
"og:type" : "namespace:course",
"og:url" : "http://example.com",
"og:title" : "Title",
"og:description": "Description",
"fb:app_id" : "####",
"og:image" : "http://example.com/chart.png"
},
distance : 25.5,
location : "Sample location: Longitude",
message : "Special Caption Message"
}
I also tried using the 'user_generated' image flag, it displayed the image at full story width however when you click on the image it does not link you back to the website but it opens up the image in the modal box ( like a gallery image ).
I am not sure if it's the code or not. Maybe some settings I am unaware of. Let me know if there is any more information I can provide to get a solution for this issue.
You need to specify a width and a height:
"og:image:width": 1200,
"og:image:height": 650
I haven't tried it with a 630px height, but it appears that it should work and may even be better with a value of 630. See Facebook content sharing best practices.
Try to use an image with 1200X650 as stated instead of 1200X630.
as stated on documentation images must keep aspect ratio.

Galleriffic and Loupe Magnify Issue

I'm using two plugins which independently work correctly. Galleriffic and Loupe are the two plugins. What I'm trying to do is have the large image in Galleriffic also have a magnify on hover effect, which is what Loupe is for. I've had to add one line of code newSlide.find('a img').addClass('magnifyPic'); to the Galleriffic plugin in order to get a class on the image, which should be used by Loupe to activate the magnify effect. Below are the two calls for the plugins.
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
'imageContainerSel': '#bigPics',
'enableBottomPager': false,
'renderNavControls': false,
'renderSSControls': false,
'enableHistory': false,
});
$('.magnifyPic').loupe({
'default_zoom': 300,
'shape' : 'rounded',
'default_size' : 160,
'glossy' : false,
'drop_shadow' : false
});
});
The problem is that absolutely nothing happens when I hover over the large image. Independently the two plugins function correctly, but don't seem to want to work together. If I understand it correctly, the Galleriffic plugin can take callback, functions, etc. in its options, so I guess my question is: How do I integrate the Loupe call into the Gallerific call? Or is that the correct way to go about making Loupe work with only the large image in a Galleriffic gallery? I've tried removing, adding, modifying lines of code to both plugins, but can't seem to get them to work together.
Search for image.src in jquery.galleriffic.js. It should appear twice (around line # 338 and # 611). Add the following line after image.src = ...:
image.src = ...
$(image).loupe();
Note: I also added this to my CSS. Before this adding this CSS rule, the loupe was causing very minor enlargement (maybe I am using the plugin wrong?):
​.loupe img {
width:800px;
height:800px;
}​
I posted the example on github. You can try it out here http://ted-piotrowski.github.com/example-gallerific/

Categories

Resources