Exporting charts to single images or data files might be not enough, there are plenty of other use cases where the export needs to be triggered autonomously or embedded into a company report.
In this article we will guide you through such scenarios and explain how to extend the export plugin to achieve that.
We're going to assume that you already have export running. If you don't, we suggest you go through this tutorial first.
Free-hand export (autonomous)
Imagine you have a monitoring service and you want to inform your administrators about it's activity. In this case you need the possibility to receive the chart imagery without user interaction.
With following adaption you can enable the export plugin but hide it from the user interface and trigger it when ever you need to send the image data to the server.
var chart = AmCharts.makeChart( "chartdiv", {
"export": {
"enabled": true,
"menu": []
},
...
} );
// WAIT UNTIL CHART HAS BEEN RENDERED
chart.addListener( "rendered", function( e ) {
// WAIT FOR FABRIC
var interval = setInterval( function() {
if ( window.fabric ) {
clearTimeout( interval );
// CAPTURE CHART
e.chart["export"].capture( {}, function() {
// SAVE TO JPG
this.toJPG( {}, function( base64 ) {
// LOG IMAGE DATA
console.log( base64 );
} );
} );
}
}, 100 );
} );
See the Pen #12500 by amCharts (@amcharts) on CodePen.11061
For demonstration purpose we've added a "link" to open the base64 image in a new tab. Ina real life scenario, you might want to send such data to your server to send an e-mail.
Seamless system reports on the fly
You have running system with some important statistics, probably a handy dashboard which provides your users a quick overview about the current situation. But what if you want to enable your users to download the whole page as a single report file?
You're in luck, because with just few lines of custom code you can create a button which, when clicked, will generate a PDF document with multiple charts and optional a data table in it.
Like in the previous sample we want to enable the export capabilities but hide the menu. We'll pass in an empty menu array to the export setup. In addition we need to save the chart instances for later to be able to collect the imagery and pass them to the PDF layout.
var charts = [];
...
var chart = AmCharts.makeChart( "chartdiv", {
"export": {
"enabled": true,
"menu": []
},
...
} );
charts.push( chart );
After that we need to create a layout which will be used to generate the PDF, it is even possible to create references and use images multiple times. We took advantage of that and created a static layout and simply add the embedded base64 PNG images as references within the images property. You can use that file or start completely from scratch, all available options can be found on the github page of the export plugin. Following is a little snippet of the sample layout to show it's structure.
var layout_1 = {
/*
** Array of objects or strings which represents the output
*/
content: [
{
text: "This is a header, using header style",
}, {
image: "logo", // reference to the image mapping below
fit: [515.28, 761.89 - 14.064 ] // fits the image to those dimensions (A4); 14.064 is the lineheight
}
],
/*
** Mapping object, holds the actual imagery
*/
images: {
logo: "data:image/png;base64, ..."
}
}
Once everything has been configured and is ready to get exported, we just need to write a function which crawls through all charts to export those to PNG and pass them to the image mapping object of the layout above.
function createReport() {
var pdf_images = 0;
var pdf_layout = layout_1; // loaded from another JS file
for ( chart in charts ) {
// Capture current state of the chart
chart.capture( {}, function() {
// Export to PNG
this.toPNG( {
multiplier: 2 // pretend to be lossless
// Add image to the layout reference
}, function( data ) {
pdf_images++;
pdf_layout.images[ "image_" + pdf_images ] = data;
// Once all has been processed create the PDF
if ( pdf_images == AmCharts.charts.length ) {
// Save as single PDF and offer as download
this.toPDF( pdf_layout, function( data ) {
this.download( data, this.defaults.formats.PDF.mimeType, "amcharts.pdf" );
} );
}
} );
} );
}
}
See the Pen #12500 by amCharts (@amcharts) on CodePen.11061
We used the twitter bootstrap dashboard template and modified it a little bit to show you a real use case. We think this might be really interesting for few of you and we hope you have a lot adding this feature.