Print Heat Maps

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- exportEnabled allows to export the chart as an image or pdf
or custom print can be created using print() method.
 -->
<div id="chart-container">FusionCharts will render here</div>
<div id='controllers' style='position:relative;text-align:center'>
        <input id='exportpdf' type='Button' value='Export to PDF' />&nbsp;&nbsp;      
    </div>

JavaScript

FusionCharts.ready(function () {
    var salesHMChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '550',
        height: '270',
        dataFormat: 'xml',
        dataSource: '<chart caption="Top Smartphone Ratings" subcaption="By Features" xaxisname="Features" yaxisname="Model" showplotborder="1" xaxislabelsontop="1" theme="fint" exportEnabled="1" exportShowMenuItem="0">\
<rows>\
<row id="SGS5" label="Samsung Galaxy S5" />\
<row id="HTC1M8" label="HTC One (M8)" />\
</rows>\
<columns>\
<column id="processor" label="Processor" />\
<column id="screen" label="Screen Size" />\
<column id="price" label="Price" />\
</columns>\
<dataset>\
<set rowid="SGS5" columnid="processor" value="0" />\
<set rowid="SGS5" columnid="screen" value="1" />\
<set rowid="SGS5" columnid="price" value="2" />\
<set rowid="HTC1M8" columnid="processor" value="2" />\
<set rowid="HTC1M8" columnid="screen" value="1" />\
<set rowid="HTC1M8" columnid="price" value="0" />\
</dataset>\
<colorrange gradient="0" minvalue="0" code="E24B1A" startlabel="Poor" endlabel="Good">\
<color code="E24B1A" minvalue="0" maxvalue="1" label="Bad" />\
<color code="F6BC33" minvalue="1" maxvalue="2" label="Average" />\
<color code="6DA81E" minvalue="2" maxvalue="3" label="Good" />\
</colorrange>\
</chart>',
       "events": {
               "renderComplete": function (e, a) {
                   
                   // Cross-browser event listening
                   var addListener = function (elem, evt, fn) {
                       if (elem && elem.addEventListener) {
                           elem.addEventListener(evt, fn);
                       }
                       else if (elem && elem.attachEvent) {
                           elem.attachEvent("on" + evt, fn);
                       } 
                       else {
                           elem["on" + evt] = fn;
                       }
                   };
                   
                   // Export...