Raphael JS server-side - javascript

I'm using Raphael js to create some graphics on the client.
But I'd now like to be able to do the same thing directly on the server to be able to create them and store them in batch.
I've found solutions where the SVG form Raphael is fetched from the client, but not any completely server-side.
Does any one have experience using Raphael js server side only (with Rhino for instance)?
Thanks!

Take a look at PhantomJS - it's basically a full webkit browser you can run headless from the command line and render the output to a PNG.
There is actually an example using Raphael on the Quickstart guide.
phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

Related

Export web application to pdf using server-side render

Our web application(many d3 charts) is set up by vue, and I could export our
webpage to pdf by the combination of canvg, html2canvas(convert web content to
png) and emit png file to server and use nodejs to download it automatically
and periodically(weekly report).
However, I was asked to use different render method from client-side to
server side rendering and use wkhtmltopdf or phantomjs to download pdf.
My question is that is it difficult to render many complicated d3 chart and edit
css in server side rendering by using vue or another technique?
Thanks!
The wkhtmltopdf is a popular library for converting complex html content to pdf.
You don't have to worry about your complicated d3 chart or css. It will handle it. But you have to install wkhtmltopdf command line tool on your system.
SVG DOM elements can be convert into different images format using server side rendering option. Apache Batik such a library to convert SVG DOM elements into pdf,png,jpg,word.
Batik is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation.
The project’s ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. Another ambition for the Batik project is to make it highly extensible —for example, Batik allows the developer to handle custom SVG elements. Even though the goal of the project is to provide a set of core modules, one of the deliverables is a full fledged SVG browser implementation which validates the various modules and their inter-operability.

Is there an npm module to modify a pdf file in node.js?

I'm building a node.js app on Bluemix that should take a pdf file as request and then grey out (blank) some part of the pdf file. And also here the pdf file is the same for all, and the area we need to blank out will be fixed. So can anybody suggest an npm module that can perform this kind of functionality?
Yes I guess the most common used library is pdf-lib. Take a look at the official page.
I suggest you to try HummusPDF. Specifically take a look at the Hummus - Modification page, that explains how to edit existing PDF documents. In your case you could try to use the feature that allows to draw shapes.
Please try Aspose.PDF Cloud SDK for Node.js available at GitHub and npm. It provides API methods for a wide range of document processing operations; including creation, manipulation, conversion and rendering of Pdf documents in the cloud. You can use Redaction Annotation to grey out the required PDF area.
P.S: I work with Aspose as Support Developer

Using JS Charting Libraries with NodeJS

I've got a question regarding JavaScript charting libraries (Flot Charts, to be more specific).
At the moment, every library I've come across requires an HTML document in order to work (where the chart/graph would be constructed, in a canvas element, for example), but my problem is that I'm not creating a traditional web-page/application that requires an .html document, I'm creating a bot.
The reason I'm using the chart library is to generate an image that the bot can render to the user. In order to generate the graphic, do I need to create some generic html page where I can generate the graphic and then grab it and store it with JavaScript in my NodeJS project? Or perhaps there's something that I'm missing entirely.
Any and all help is really appreciated. Thanks a lot
Since Javascript runs on the client and node runs on the server, you're going to have a hard time getting the server to save a snapshot of your generated graphic. That's typically done on the server side of things.
I would switch your library to Plotly (http://plot.ly) and utilize it's Static Image Export feature:
https://plot.ly/nodejs/static-image-export/

Are there any reporting library in Javascript/Angular.js?

I want to generate some reports in a MEAN.js Application, that said, i manage the data in Angular, what i want to know is if there's a library to generate a PDF Report, for example, when using PHP there's dompdf, fpdf, etc...
Basically what i need to generate is something like this from Angular:
Are there any tool to generate the reports from Angular, or should i generate them from Node.js? if so what are the tools available for node.js?
I only know about jsreport for node.js
Server-side rendering with Node is definitely the way to go, the client side libraries never really worked well (I last checked about a year ago). I'd suggest using PhantomJS as it provides PDF rendering capabilities out of the box.
PhantomJS will use Webkit engine to generate the PDF for you. The actual rendering process is dead simple:
page.render('/tmp/file.pdf', function() {
// file is now written to disk
});
Of course you have to insert something on the page you're generating first. Check out the following post which describes one guy's implementation, the code quoted above comes from there: http://www.feedhenry.com/server-side-pdf-generation-node-js/

Make dynamic SVG like Travis CI build status

I'm trying to create an SVG that works much like the Travis CI build status icon.
Looking at the url:
https://travis-ci.org/ddavison/sublime-tabs.svg?branch=master
The URL points to an SVG, but the SVG seems to be able to pull information from another source, hence the "passing" or "failing" message.. How can I replicate this?
I've tried faking the browser by making it a <script>, and just generating an SVG, but that doesn't seem to work. It just renders XML on the page. Is it possible that Travis has a rule that parses .svg as some other script file?
How can I execute JavaScript before i actually render the SVG to the user?
I've figured it out. Per #DJDavid98 's comment, I ended up generating the image server side.
Here's an example:
I ended up using Ruby to generate it as JavaScript actually is not allowed on a GitHub Readme!
Try it yourself! Generate some buttons for people to star/fork your repo on github:
http://githubbadges.com

Categories