AngularJS Live Example

by Ayan Bhadury

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<html ng-app="HelloApp">
<script>
FusionCharts['debugger'].enable(true, function (message) {
    console.log(message);
});

</script>
  <body ng-controller="MyController">
    <div>
      <fusioncharts id="mychartcontainer" chartid="mychart" width="550" height="270" type="heatmap" dataSource="{{dataSource}}" events="events"></fusioncharts>

    </div>
  </body>

</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {

  $scope.events = {
    "dataPlotClick": function(ev, props) {
      alert("You clicked on: " + props.categoryLabel);
    }


  };
  $scope.dataSource =  {
            "chart": {
                "caption": "Top Smartphone Ratings",
                "subcaption": "By Features",
                "xAxisName":"Features",
                "yAxisName":"Model",
                "showplotborder": "1",
                "xAxisLabelsOnTop": "1",
                "plottooltext":"<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",

                 //Cosmetics
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",
                "captionFontSize" : "14",
                "subcaptionFontSize" : "14",
                "subcaptionFontBold" : "0",
                "showBorder" : "0",
                "bgColor" : "#ffffff",
                "showShadow" : "0",
                "usePlotGradientColor" :"0",
                "canvasBgColor" : "#ffffff",
                "canvasBorderAlpha" : "0",
                "legendBgAlpha" : "0",
                "legendBorderAlpha" : "0",
                "legendShadow" : "0",
                "legendItemFontSize" : "10",
                "legendItemFontColor" : "#666666",
                "toolTipColor" : "#ffffff",
                "toolTipBorderThickness" : "0",
                "toolTipBgColor" : "#000000",
                "toolTipBgAlpha" : "80",
                "toolTipBorderRadius" : "2",
                "toolTipPadding" : "5",
                "exportEnabled":"1"
                
            },
            "dataset": [
                {
                    "data": [
                  ...