I'm evaluating highcharts for a client project and have run into a problem rendering a polar chart with phantomjs. The charts lines come out as a thick grey blob! I thought this was due to animation but thats turned off. Will try and post an image but anyone have any thoughts on what else could be causing this? If I print preview from chrome it also looks ok.
Here's the image.
This was created as part of a report which I built using the rasterize.js script included with phantomjs. All the other charts work fine, the polar chart is the only one not coming out. If I use the highcharts export server script with phantomjs it works fine - but that only allows for 1 chart to be exported to PDF. I need to export a whole web page as a PDF including some charts.
There's another workaround on the project's bug tracking:
https://github.com/ariya/phantomjs/issues/10364#issuecomment-14992612
All you need to do is to remove all page elements with low opacity before rendering to file:
diff --git a/examples/rasterize.js b/examples/rasterize.js
index fcd74cd..dcc81d4 100644
--- a/examples/rasterize.js
+++ b/examples/rasterize.js
## -19,6 +19,16 ## if (phantom.args.length < 2 || phantom.args.length > 3) {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
+ // Remove all low-opacity paths. see PhantomJS issue #364
+ page.evaluate(function () {
+ var paths = document.getElementsByTagName("path");
+ for (var i = paths.length - 1; i >= 0; i--) {
+ var path = paths[i];
+ var strokeOpacity = path.getAttribute('stroke-opacity');
+ if (strokeOpacity != null && strokeOpacity < 0.2)
+ path.parentNode.removeChild(path);
+ }
+ });
page.render(output);
phantom.exit();
}, 200);
You can use that to grab graphs even if you don't have access to the source of the page containing the graph.
Related
We are investigating multiple new web development stacks in an effort to get away from VB.NET. I have created a page using Svelte 3 architecture to replicate what we have on one existing .NET-based page. We use Highcharts for our charting library. I am able to get the charts to show up. However, other logic we use to get list of all charts on the page always returns an empty array:
export const DestroyChartReferenceByClassName = (className) => {
var cssClassName = className;
jquery(Highcharts.charts).each(function (i, chart) {
if (typeof chart !== 'undefined') {
if (chart.container.classList.contains(cssClassName)) {
chart.destroy();
}
}
});
};
When I call this method it runs without errors. However, Highcharts.charts is an empty array. What is the preferred method to iterate over the Highchart charts on a Svelte page?
We have an application which renders ~50 (high)charts simultaneously on a dashboard. The thing is the browser freezes when the charts are getting rendered. (I tried using boost and virtual scroll). What makes it worse is that our users generally have datalabels on.
A fiddle with experiments: http://jsfiddle.net/z9msdftt/1/
var to;
$('#charts').scroll((e) => {
clearTimeout(to);
to = setTimeout(() => {
var offset = Math.floor($('#charts').scrollTop() / 400);
var start = new Date();
[...Array(5)].forEach((_, i) => {
renderChart(offset + i);
});
var end = new Date();
$('#counter').html('Time rendering: ' + (end - start) + 'ms');
}, 50);
});
Is there a way I can speed this up maybe by:
Doing an initial server rendering of the SVG and then handle further interactions on the client side (isomorphic render)
Or
Using webworkers to do calculations parallely and then rendering the charts.
Any help, would be greatly appreciated.
You can try Highcharts boost.js to speed up rendering process.
This speed problem is general in all SVG based chart libraries. Performance decreases after adding a couple hundreds of points to the chart or adding multiple charts to the same page.
boost.js is using HTML5 canvas technology by drawing the graph on a HTML5 canvas then copying the content of the chart to a SVG.
I am stuck at last point of my application, i am supposed to display user form in PDF which works fine on desktop browsers as they has pdf viewer built in, but for Android / iOS its not working as pdf viewer is missing.
So i was trying to use PDF.js to display it, (to be honest, this is very widely used but documentation is lacking), only catch is i am getting data in base64 format. PDF.js has example on site which shows how to render the base64 data but its not PDF, for that displaying PDF as "PDF" i need to user their "viewer.html" but that does not take base64 data?
closest i have come to Pdf.js: rendering a pdf file using base64... on stack overflow, but i dont know how to use it after PDFJS.getDocument(pdfAsArray)?.
Other link that came across was other link
I dont want to rely on Google / Third party PDF viewer as i dont know how long they will support this.
There are no end-to-end answers on this topic in community so here is my attempt to put something here. (maybe it will help others)
Okay, PDF.js is one way of showing PDF in browser, specially when you don't want to rely on PDF plugin to be installed. In my case, my application generates report in PDF and that can be viewed before downloading but on handheld devices it was not working because of missing PDF viewer plugin.
In my case PDF was sent to browse in base64 string, that I can use to display PDF with <object src="base64-data"...></object>. This works like charm on Chrome / FF but switch to mobile view and it stops working.
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Report.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
</object>
In above code it will try to show the PDF or fall back to <p> and show error message. And I Was planning to add the PDF viewer at this point, PDF.js was the choice but was not able to display it. One example on PDF.js with Base64 data shows how to do this but that renders it as an Image not PDF, and I was not able to find solution for that and hence the question, here is what I did,
First add the JavaScript code to convert base64 to array
convert to blob and use viewer.html file packaged with PDF.js to display it as PDF
In case if you are wondering why base64 data, then answer is simple I can create the PDF, read it, send the data to client and delete the file, I don't have to run any cleaner service/cron job to delete generated PDF files
Few Things To Note
Below code is using Flask + Jinja2, change the way base64 is read in html if you are using something else
viewer.html needs to be changed to have required js & css files in proper location (by default their location is relative; you need them to be referred from static folder)
viewer.js looks for pdf.worker.js in predefined location, change that in case its throwing error as above file not found.
viewer.js might throw file origin does not match viewer error in that case as a quick fix comment the code which throws this error and see if that solves the issue (look for that error in viewer.js)
I am not the author of below code, I have just put it together from different places.
Now to the code (so PDF will be displayed when user clicks on button with id="open_id")
Jquery
var pdfDataX = '{{ base64Pdf }}';
var BASE64_MARKER = ';base64,';
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
$('#open_id').click(function() {
PDFJS.disableWorker = true;
var pdfAsDataUri = "data:application/pdf;base64," + pdfDataX ;
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
// Try to show in the viewer.html
var blob = base64toBlob(pdfDataX, 'application/pdf');
var url = URL.createObjectURL(blob);
var viewerUrl = "{{ url_for('static', filename='viewer.html') }}" + '?file=' + encodeURIComponent(url);
$('#pdfViewer').attr('src', viewerUrl);
// Finish
var mdObj = $('#pdfbin');
mdObj.hide();
mdObj.attr('data', pdfAsDataUri);
mdObj.show();
$('#myModal').modal();
});
var base64toBlob = function(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i=0; i<slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
$('.save').click(function(e) {
e.preventDefault();
var blob = base64toBlob(pdfDataX, 'application/pdf');
saveAs(blob, 'abcd.pdf'); // requires https://github.com/eligrey/FileSaver.js/
return false;
});
HTML
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Resume.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
<iframe id="pdfViewer" style="width: 100%; height: 100%;" allowfullscreen="" webkitallowfullscreen=""></iframe>
</object>
Hope this will be useful for others in future.
i use jsPDF and plugin jsPDF-AutoTable
I have a html table i want to print
$('#printFreeRoom').on('click', function (e) {
freeRoomAvailableReport($("#freeRoomTableResult"));
});
function freeRoomAvailableReport(tableId) {
var doc = new jsPDF('p', 'pt');
doc.text("From HTML", 40, 50);
var res = doc.autoTableHtmlToJson(tableId);
doc.autoTable(res.columns, res.data, {
startY: 60
});
doc.output('dataurlnewwindow');
doc.save('test.pdf');
}
nothing is generated when i click on the button.
I created a example on jsfiddle
http://jsfiddle.net/8da5e1fj/
seem like a chrome problem...
tried other example: http://jsfiddle.net/8tLt9yof/10/ and get same result.
You need to add FileSaver.js to use doc.save() also, Chrome has issues with doc.output('dataurlnewwindow')
Hence, here is a working fiddle for doc.save fiddle
And, to open the PDF in new window try this -
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));
Just an additional "Enter" on the browser address bar will show the PDF in chrome.
UPDATE
Longer URL's are not supported by Chrome as per this. Canvas in the fiddle is generating base64 URL which Chrome fails to load.
I have a table which displays results like the image posted below. Now I need to do some actions on each row by selecting it. There are two options I can think of,
1) We can provide a radio button for each row & a drop down on the right side to perform an action. But here i need to generate this code dynamically from a javascript file like below
function getMessage(result){
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var tmp = "<tr>";
var resSet = result.invocationResult.resultSet[j];
for(res in resSet){
tmp += "<td>" + resSet[res] + "</td>";
}
$("#mytable > tbody").append(tmp+"</tr>");
$('#AppBody').hide();
$('#AuthBody').hide();
$('#ResTable').show();
}
}
2) Provide a link to a particular item in the row like Dispute Number & when clicked it should take me to another page where I can perform those action with a drop down. But here the links should be applied dynamically to the items in the rows. As per my knowledge we should not navigate using href as i am using worklight.
Please help me with approach and also examples.
Thanks.
So I'm not sure what is the issue you are facing with option 1...
As for option 2,
There is no problem navigating to another "page" using Worklight and jQuery Mobile, as long as you're doing it responsibly (definitely not use href). That is, not lose the Worklight context, at which point stuff will stop working.
The idea is this:
In the app's index.html you (will/should) have a <div data-role="page"> and in the case of Worklight, you will need to switch its contents with another from some other HTML file.
Here's a simplified Worklight 6.2 sample project: https://github.com/IdanAdar/Multipage-Navigation-Using-jQM
In the HTML:
load page1
In the JavaScript:
function changeToSomePage() {
$(':mobile-pagecontainer').pagecontainer('change','somepage.html');
}