FusionCharts API-Methods: print
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the print() method -->
<div id="indicatorDiv">Method Name: <strong>print()</strong>
<p>Prints individual charts. It hides all elements on a page except the chart to print and then invokes the page printing function <strong>(window.print())</strong>.</p>
<p>Click the <strong>Print Chart</strong> button shown below.</p>
<div class="text-center">
<button id="print" class="mb-20">Print chart</button>
<div id="chart-container">FusionCharts will render here</div>
</div>
</div>
CSS
body {
padding: 5px;
margin: 0 auto;
}
strong{
font-weight: bold;
}
.text-center {
text-align: center;
}
p {
margin: 10px auto;
}
.mb-20 {
margin-bottom: 20px;
}
#indicatorDiv {
width: 500px;
font-family:'Arial', 'Helvetica';
font-size: 13px;
}
#print {
height: 25px;
font-size: 13px;
}
JavaScript
FusionCharts.ready(function () {
var chart = {
type: 'doughnut2d',
renderAt: 'chart-container',
width: '450',
height: '250',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "Last year",
"numberPrefix": "$",
"theme": "fint",
"captionFontSize": "13",
"subCaptionFontSize": "12"
},
"data": [{
"label": "Food",
"value": "28504"
}, {
"label": "Apparels",
"value": "14633"
}, {
"label": "Electronics",
"value": "10507"
}, {
"label": "Household",
"value": "4910"
}]
}
};
var revenueChart = new FusionCharts(chart);
revenueChart.render();
/**
* @description
* The print() method prints individual charts. It hides all elements on a page except the chart to print and then invokes the page printing function (window.print()).
*
* @param {Object} options: this paramiter contains hideButtons as its attribute and its default value is true
* usage: chartObj.print();
* chartObj.print({false});
*/
function print() {
revenueChart.print();
}
/* function printP()
{
revenueChart.print({hideButtons : false });
}*/
document.getElementById("print").addEventListener("click", print);
//document.getElementById("print_p").addEventListener("click", printP);
});