FusionCharts - Configuring Labels in Heatmap Labels.

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ashok Kumaresan

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>
<!-- Configuring labels in Heatmap charts.

    Attribute: 
        # tlLabel - Displays a label on the top left corner of a dataplot.
        # trLabel - Displays a label on the top right corner of a dataplot.
        # blLabel - Displays a label on the bottom left corner of the dataplot
        # brLabel - Displays the label on the bottom right corner of the dataplot. 
      
Note: 
    Similar Usage for the following Macros 
        $blLabel
        $brLabel

    Deviation from theme :
        # showplotborder - Set to 1, as plots need to show bordered heat area.
-->

<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var salesHMChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '900',
        height: '500',
        dataFormat: 'json',
        dataSource:  {
            "chart": {
                "theme" : "fint",
                "caption": "Students Report Card",
                "subcaption": "For October 2nd Week",
                "xAxisName":"Students",
                "yAxisName":"Class Name",
                "showplotborder": "1",
                "PlotfillAlpha" :"0",             
                 "chartLeftMargin":"20",
                "canvasTopMargin":"50",
                    "canvasBottomMargin":"150",
                "labelYPadding":"50",
                "valueFontColor":"#ffffff",
                "LabelPadding": "57",  
                "showLegend":"0",
                "xAxisLabelsOnTop": "1"
            },
                        "annotations": {
                "width": "500",
                "height": "300",
                "autoScale": "1",

                                            "groups": [
                    {
                        "id": "student-images",
                        "items": [
                            {
                                "id": "anil-user-icon",
                                "type": "image",
                                "url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
                                "x": "$xaxis.label.0.x - 24",
                                "y": "$xaxis.label.0.y - 55"
                            }, 
                            {
                                "id": "ajay-user-icon",
                                "type": "image",
                                "url": "http://static.fusioncharts.com/sampledata/images/round-3.png",
                                "x": "$xaxis.label.1.x - 24",
                                "y": "$xaxis.label.1.y - 55"
                            }, 
  ...