Building a Chart Component with Angular 2 and FusionCharts (Full Demo)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Angular 2 FusionCharts Demo</title>

    <!-- 1. Load custom CSS & fonts-->
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

    <!-- 2. Load Angular 2 specific libraries -->
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>

    <!-- 3. Load FusionCharts library-->
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

    <!-- 4. Load component -->
    <script src='main.js'></script>
  </head>
  <body>

    <!-- 5. Display the application -->
    <angular-chart>Loading...</angular-chart>
  </body>
</html>

(function(chartApp) {
  chartApp.AppComponent = ng.core.Component({
    selector: 'angular-chart',
    templateUrl: 'chart.html',
    providers: [ng.http.HTTP_PROVIDERS]
  }).Class({
    constructor: [ng.http.Http, function(http){
      var chartComponent = this;
      this.selectedYear = 2014;

      http.get('config.json')
        .map(function(data){ return data.json(); })
        .subscribe(function(json){
          chartComponent.config = json;
          chartComponent.initChart(json)
        })
    }],
    initChart: function(config){
      config.dataSource.data = config.dataSource.dataSet["2014"];
      
      var revenueChart = FusionCharts.ready(function(){
        new FusionCharts(config).render();
      });
    },
    yearChange: function(year) {
      var revenueChart = FusionCharts.items['revenue-chart'];
      var chartJson = revenueChart.getChartData('json');
      chartJson.data = this.config.dataSource.dataSet[year];
      revenueChart.setChartData(chartJson);
      this.selectedYear = year;
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(chartApp.AppComponent);
  });
})(window.chartApp || (window.chartApp = {}));

.container {
  width: 555px;
  margin: 25px auto;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
  border: 2px solid #bbb;
  border-radius: 2px;
}

.actions {
  margin: 0 0 10px 0;
  font-size: 16px;
  display: inline-block;
}

button {
  background-color: white;
  border: 1px solid #7fb9e0;
  padding: 5px 10px;
  cursor: pointer;
  width: 80px;
  font-size: 14px;
}

.selected {
  color: #fff;
  background-color:#7fb9e0;
}

Code demonstrating how to create a simple chart component in Angular 2 using the FusionCharts library and plain JavaScript.

Article URL: https://www.sitepoint.com/chart-component-angular2-fusioncharts

Data source: WikiPedia pages of respective companies.

<div class="container">
  <h1>Revenue of Top Tech Companies</h1>
  
  <div class="actions">
    <button (click)="yearChange(2014)" [ngClass] = "{selected: selectedYear== 2014}">2014</button>
    <button (click)="yearChange(2015)" [ngClass] = "{selected: selectedYear== 2015}">2015</button>
  </div>
  <div id ="chart-container"></div>
</div>

{
  "type": "column2d",
  "renderAt": "chart-container",
  "width": "550",
  "height": "400",
  "dataFormat": "json",
  "id": "revenue-chart",
  "dataSource": {
    "chart": {
      "yAxisName": "Revenue (In USD Billion)",
      "yAxisMaxValue": "200",
      "numberPrefix": "$",
      "paletteColors": "#0075c2",
      "bgColor": "#ffffff",
      "showBorder": "0",
      "showCanvasBorder": "0",
      "plotBorderAlpha": "10",
      "usePlotGradientColor": "0",
      "plotFillAlpha": "50",
      "showXAxisLine": "1",
      "axisLineAlpha": "25",
      "divLineAlpha": "10",
      "showValues": "1",
      "showLabels": "0",
      "showAlternateHGridColor": "0",
      "plotSpacePercent": "10",
      "chartBottomMargin": "50",
      "baseFont": "Source Sans Pro",
      "baseFontSize": "16",
      "toolTipColor": "#ffffff",
      "toolTipBorderThickness": "0",
      "toolTipBgColor": "#000000",
      "toolTipBgAlpha": "80",
      "toolTipBorderRadius": "2",
      "toolTipPadding": "10"
    },
    "dataSet": {
      "2014": [{
        "label": "Amazon",
        "value": "88.99"
      }, {
        "label": "Apple",
        "value": "182.8"
      }, {
        "label": "Facebook",
        "value": "12.47"
      }, {
        "label": "Google",
        "value": "65.67"
      }, {
        "label": "Microsoft",
        "value": "86.83"
      }],
      "2015": [{
        "label": "Amazon",
        "value": "107.01"
      }, {
        "label": "Apple",
        "value": "233.72"
      }, {
        "label": "Facebook",
        "value": "17.93"
      }, {
        "label": "Google",
        "value": "74.54"
      }, {
        "label": "Microsoft",
        "value": "93.58"
      }]
    },
    "annotations": {
      "groups": [{
        "id": "logo-images",
        "xScale": "30",
        "yScale": "30",
        "showBelow": "0",
        "items": [{
          "type": "image",
          "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735364amazon.jpg",
          "x": "$dataset.0.set.0.startx + 25",
          "y": "$dataset.0.set.0.endY + 10"
        }, {
          "type": "image",
          "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735362apple.jpg",
          "x": "$dataset.0.set.1.startx + 85",
          "y": "$dataset.0.set.1.endY + 10"
        }, {
          "type": "image",
          "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735369facebook.jpg",
          "x": "$dataset.0.set.2.startx + 20",
          "y": "$dataset.0.set.2.endY + 10"
        }, {
          "type": "image",
          "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735358google.jpg",
          "x": "$dataset.0.set.3.startx + 5",
          "y": "$dataset.0.set.3.endY + 5"
        }, {
          "type": "image",
          "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735372microsoft.jpg",
          "x": "$dataset.0.set.4.startx + 30",
          "y": "$dataset.0.set.4.endY + 10"
        }]
      }]
    }
  }
}