FusionCharts - Using macros to embed data value and label in dynamic tooltips in stacked area cahrts

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.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Using macros to embed data value and label in dynamic tooltips Attributes: # plottooltext Macros: # $dataValue - Formatted value # $label - Label of the column # $value - Raw value of the column Deviation from theme: # toolTipBorderColor - Set to #BBBBBB # toolTipBgColor - Set to #666666 # toolTipBgAlpha - Set to 100 -->
<div id="chart-container">FusionCharts will render here</div>

CSS

#headerdiv {
    font-family:"Arial", "Helvetica";
    font-size: 12px;
    font-weight: bold;
}
#valueDiv {
    background-color: #FFFFFF;
    color:#003366;
    text-align:center;
    font-size: 25px;
    padding: 10px;
    margin-top:5px;
    font-family:"Arial", "Helvetica";
}

JavaScript

FusionCharts.ready(function(){
        var myChart = new FusionCharts({
   "type": "stackedarea2d",
   "renderAt": "chart-container",
   "width": "450",
   "height": "300",
   "dataFormat": "json",
   "dataSource": {
      "chart": {
         "caption": "Harry's SuperMart",
         "subCaption": "Product-wise quarterly revenue in current year",
         "xAxisname": "Quarter",
         "yAxisName": "Amount",
         "numberPrefix": "$",
         "paletteColors": "#0075c2,#1aaf5d",
         "bgColor": "#ffffff",
         "borderAlpha": "20",
         "showCanvasBorder": "0",
         "usePlotGradientColor": "0",
         "plotBorderAlpha": "10",
         "plotFillAlpha": "50",
         "legendBorderAlpha": "0",
         "legendShadow": "0",
         "showValues": "0",
         "showBorder": "0",
         "showXAxisLine": "1",
         "xAxisLineColor": "#999999",
         "divlineColor": "#999999",
         "divLineIsDashed": "1",
         "showAlternateHGridColor": "0",
         "subcaptionFontBold": "0",
         "subcaptionFontSize": "14"
      },
      "categories": [
         {
            "category": [
               {
                  "label": "Q1",
               },
               {
                  "label": "Q2"
               },
               {
                  "label": "Q3"
               },
               {
                  "label": "Q4"
               }
            ]
         }
      ],
      "dataset": [
         {
            "seriesname": "Food Products",
            "data": [
               {
                  "value": "11000",
                   "tooltext":"hello",
               },
               {
                  "value": "15000"
               },
               {
                  "value": "13500"
               },
               {
                  "value": "15000"
               }
            ]
         },
         {
            "seriesname": "Non-Food Products",
            "data": [
               {
                  "value":...