Get images from Highcharts PHP Laravel - javascript

Good day, folks.
I am making something like CRM in Laravel, where users can see graphs and other cool stuff by Highcharts (based on their statistics). I also want to send them statistics each month in PDF (on email).
https://github.com/barryvdh/laravel-snappy is great at making PDF.
However, then comes the problem: I want to include images from Highcharts to these PDF's. But Highcharts is a JS library. And it really provides function for exporting images from graphs.
So really the question is: 'How can I (inside Laravel/PHP) get images, which are created by JS?'
Maybe I must run also JS server like Node.js (I don't know, haven't experience with it) and somehow get images from it?

You will need to save your images generated by Highcharts with the export module (http://www.highcharts.com/docs/export-module/export-module-overview).
Once the image is saved in the server, then you can access them using PHP.
I hope it helps you!

Related

Uploading a file from client to server in python bokeh

We have set up a bokeh server in our institute, which works properly. We also have a python-based code to analyse fMRI data which at the moment uses matplotlib to plot and save. But I want to transfer the code to bokeh server and allow everybody to upload files into the server from the client and when the analysis is done in the server, save the output plots in their local HDD. This transfer file procedure seems to be lacking in bokeh atm. I saw a new feature recently added in github to upload json files, but my problem is fMRI files come in various formats, and asking (not necessarily tech-savvy) users to convert the files into a certain format beats the purpose. Also, I do not know any JS or the like, hence I do not know what solutions people usually use for such web-based applications.
If anybody has any solutions to get around this issue, it'd be happy to hear it. Even if it is a solution independent of bokeh (which would mean users need to open a separate page to upload the files, a page to run the analysis, and a page to save the output) please let me know. It won't be ideal, but at least better than no solution, which is the case in bokeh right now. Thanks!
I'm not sure where you are getting your information. The FileInput widget added in Bokeh 1.3.0 can upload any file the user chooses, not just JSON.

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/

How to create and download a file in PDF and docx format which is to be created from the data in table in AngularJS?

I'm a newbie to AngularJS and using AngularJS for my web app.
On one page of my web app, I'm fetching data from database and displaying in a table. The data is in JSON format. And, since it contains multiple entries of the same type, it's an array.
I want to provide a Download button to the user and a radio button with the options of .pdf and .docx.
The User will select one of the file formats and click on Download button in order to download the data displayed in table into the selected file format on his/her local machine.
How to achieve it? Can someone please guide me in this regard?
Since the code to fetch and display data in table is too big that's why I haven't given any code snippet here.
If you want I can provide you the same.
If you can explain with some completely working examples for both file formats(.docx and .pdf) in AngularJS it would be really really great to me and other buddies.
Thanks.
There are some few good resources. I use https://mozilla.github.io/pdf.js/ for PDF and https://github.com/evidenceprime/html-docx-js for docx though it needs some manipulations.
Try these that I could find. This is not supposed to be a list of options but each of them have different functionalities. But it surely does not make sense making your own port for these.
PDF
http://pdfkit.org/ for extended PDF formatting
https://github.com/tuckerjt07/pdfmake allows for PDF formatting
https://github.com/Prashanth-Nelli/jsPdfTablePlugin Straight forward simple usage
http://github.com/MrRio/jsPDF frequently used
DOCx
http://github.com/MrRio/DOCX.js
https://github.com/evidenceprime/html-docx-js
Angular UI-Grid has implemented PDF/CSV Export from grid.
Please refer UI-Grid Export Data
They are using Pdfmake to generate PDF of exported data.
just google for a javascript library that enable you to easily convert your json data to PDF, something like http://github.com/MrRio/jsPDF – Naigel Mar 29 at 9:52
the same person also created this http://github.com/MrRio/DOCX.js – jcubic Mar 29 at 9:54
I'd agree, there's nothing gained from building it yourself unless it's a specialised system, but yours sounds like a very standard way of doing things so it would be far better to use a pre-made system and not waste the time that could be spent better developing the bespoke parts of the system.

Export a PDF report with charts from Node/Express/Angular/PhantomJS

I am using AngularJS in a MEAN stack based on DaftMonk’s generator (https://github.com/DaftMonk/generator-angular-fullstack). I am fairly new to pretty much everything Angular/JS/Node (and stackoverflow so please feel free to point out if I need to reword my question!).
I am aiming to produce a multipage PDF report for a user from an Angular page that contains six graphs, images and text.
There are a number of questions on stackoverflow and Google that relate to potential solutions to this, but having checked these exhaustively, they do not help with what I need to achieve (or I do not understand how I can use them in my scenario..).
Currently, when the user navigates to the ‘report page’, an http request is sent to Node/Express from the Angular controller, which checks the user role/group ID, queries the database, anaylses the data and sends it back to the browser for rendering into graphs (currently using angular-chartjs and flot).
The user selects graph type and can choose a maximum of six graphs to display from a possible list of 20+. These six graphs are what need to be exported to a PDF report (with other information). I need to make this (within reason) as browser compatible as possible (at least IE8+) although my current solution is IE10+ with PDF export disabled for older browsers using Modernizr.
From stackoverflow and Google, possible solutions include using PhantomJS in Node to capture the screen or using a client-side PDF renderer (e.g. jsPDF). Out of these, my feeling is that PhantomJS would provide the most flexibility/browser compatibility. Also, I need to produce several different reports depending on the user role, so having all the code to produce the reports within the browser is not desirable. But I am totally stuck as to how to access ‘what the client sees’ using the MEAN stack. PhantomJS would need to effectively be logged in as the client, and have access to the six choices for graphs that the client has made.
From my research, using PhantomJS would require creating an html page, somehow transferring what the client sees/data/graph choices to it, and then capturing that to render to a PDF, before sending back to the browser. One way might be to pass the required information back to Express (with a POST?) and then rendering a server-side html page which PhantomJS could be pointed to, but I have no idea how to achieve this (or if it's possible). Another possibility would be to store the client report data, choices, etc in the database and set off a task to render the PDF and send it back to the browser when done, but again, I have no idea how to achieve this.
I have read about cookies in PhantomJS or navigating through the login page using code, but this seems to be a cumbersome way to achieve this. Can an html file be created server-side, with chart.js (or another charting library) injected (and angular?) and all the required user data/chart choices for PhantomJS to render to a PDF? I guess in some ways I need to be able to use a PDF generator, charting library, etc server-side to create a PDF.
Any advice (with possible code examples) on how to achieve this would be appreciated.
I guess I had the same problem as you (only I was using Laravel in server side).
The idea I came up with was to convert the canvas generated by angular-chartjs to images (using toDataURL() on the canvas elements)
$('.theCanvas').each(function () {
var canvas=this;
img=JSON.stringify(canvas.toDataURL());
});
http://plnkr.co/edit/PkZiqYynzQXehbe6p1eH?p=preview
and then sending the images to the server to create the pdf , and finally sending the user the link to the created PDF.
In my case, they are plenty of packages to generate a PDF from an html in server side, and I don't know if a tool exists for Node.
I hope this helps.

Processing Javascript on the server

I'm looking to use this chart generation library: http://www.jqchart.com/
Ideally, I would prefer to use a PHP charting library for the current project I'm working, but, by the looks of it, this is the only library I've found that can handle what I need to do (given a somewhat unconventional requirement for the charts).
The issue is that I need to get the generated graphs as images (at the moment each graph seems to be a combination of images) to the server so that I can generate some PDF documents, etc.
I'm thinking of attempting to create an image using JS, pushing this back to the server and then generating the PDF although this pretty nasty and will probably cause issues between different versions of the browser.
So now what I'm looking for is a solution that will allow me to generate the graphs and turn them into images on the backend.
Any ideas?
EDIT: For the requirement that led me to rule out a number of other charting libraries, see here: Complex charts in Google Charts
That really isn't all that relevant to the question of processing Javascript on the server, though.
You can render a javascript graph on the server using phantomjs. Here is an example.
Not sure what your requirements are, but I'd check out Google Chart Tools: http://code.google.com/apis/chart/. It's really simple to use. All the data is in the image URL get request, so you can generate charts using client-side JavaScript too.

Categories