Menu
I have seen a lot of posts describing how you can use chart.js to create a graph using canvas and to then save the canvas to png, and import it into a pdf. This is fine but what if you want to bypass the on screen part and go straight to a pdf document and include the image?
For example, I may have two buttons, one that opens the chart on screen using canvas. This page could then handle the chart saving and importing into the pdf without a problem. The other button opens the pdf directly. Is it possible to get the chart into this document, either saving it on the server first somehow or not?
I suspect I might be told to move over to d3 but I was just wondering if it is possible in chart.js?
366
To export an individual chart in PNG format, click Save As directly above the question chart and choose Question chart only. To export all charts, click Save As at the top of the page, then click Export File. Select All Summary Data. Choose the PDF or PPT format.
To export multiple charts on the page add an event handler to fire the export operation when the button is clicked. Create a DOM element and the react-fusioncharts component is passed directly to the ReactDOM. render() method.
Its quality and features can be compared to well-known Google Chart. However the strongest advantage of ChartJs over Google Chart is its ability to use offline while Google Chart requires internet in order to work.
It's easy to get started with Chart. js. All that's required is the script included in your page along with a single <canvas> node to render the chart. In this example, we create a bar chart for a single dataset and render that in our page.
I was working on a similar problem and built QuickChart. It is a web service that renders Chart.js charts in several static formats including PDF.
The full source code is here: https://github.com/typpo/quickchart
You may be interested in lib/charts.js and lib/pdf.js in particular. The solution is built on top of a Javascript canvas implementation (node-canvas) and a Chart.js wrapper library (chartjs-node-canvas). First the chart is rendered to a PNG image using the canvas. Then the PNG is positioned on a document and rendered using pdfkit.
Hope you find the source code useful. I also host the QuickChart web service for free so you can use the web API directly https://quickchart.io/chart?width=500&height=300&format=pdf&c={chart.js config here}
Here's an example of a PDF chart generated on-the-fly:
https://quickchart.io/chart?f=pdf&bkg=white&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}
179
This is fine but what if you want to bypass the on screen part and go straight to a pdf document and include the image
You can still use chart.js exporting as PDF with PhantomJs (a headless browser that will open a html page with your charts, and save it via PDF). If you are working with nodejs there's a good library that abstracts PhantomJs and make the PDF easy: https://github.com/sindresorhus/pageres. It seems like a workaround, but usually these canvas to PDF doesn't render well, specially charts!
Yeah, you still need to create a html page to print your PDF, however you have 2 options:
Use the same page, and via CSS print styles, you can show/hide things that will print only on PDF (as PhantomJs will create PDF in print mode).
Create a custom webpage only for PDF renderization
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
