AngularJS Google Charts Bubble Chart and Scatter Chart

<html xmlns="http://www.w3.org/1999/html">

<head>
  <title>
    Google Chart Tools AngularJS Directive Example
  </title>
</head>

<body ng-app="google-chart-example" ng-controller="MainCtrl">
  <h1>Google Chart Tools AngularJS Directive Example</h1>
  <p>This is probably the most simple example you can get. It just shows you what you need to get the Google Chart Tools AngularJS Directive to work.
  </p>

  <div>
    <div google-chart chart="chart2" style="{{chart2.cssStyle}}" />
  </div>
  
  <div>
    <div google-chart chart="chart1" style="{{chart1.cssStyle}}" />
  </div>

  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
  <script src="example.js"></script>
</body>

</html>

'use strict';

angular.module('google-chart-example', ['googlechart']).
controller("MainCtrl", function($scope) {

  var chart1 = {};
  chart1.type = "BubbleChart";
  chart1.cssStyle = "height:100%; width:100%;";
  chart1.data = [
    ["ID", "Strategic", "Offering"],
    ["1", 0.8, -1.2],
    ["2", -1, 0.5],
    ["3", 1.5, 1.5],
    ["4", -0.5, -0.5],
    ["5", 0.5, 2.5],
    ["6", 1.5, -1.5],
    ['7', 0, -1.5],
    ['8', 1.5, 0],
    ['9', -1.5, 0, ],
    ['10', 0, 1.5, ],
    ['11', 2, 2, ],
    ['12', -2, 2, ],
    ['13', 2, -2, ],
    ['14', -2, -2, ],
    ['15', 1, 1, ],
    ['16', -1, -1, ],
    ['17', 1, -1,],
    ['18', -1, 1, ],
    ['19', 2.5, 2.5, ],
    ['20', -2.5, -2.5, ],
  ];

  chart1.options = {
    "title": "Strategic Vs Offering",
    "isStacked": "true",
    "fill": 20,
    "hAxis": {
      "title": "Strategic",
      minValue: -3.0,
      maxValue: 3.0,
      ticks: [-3.0, -2.0, -1.0, 0, 1.0, 2.0, 3.0],
      viewWindow: {
        min: -3.0,
        max: 3.0
      }
    },
    "vAxis": {
      "title": "Offering",
      minValue: -3.0,
      maxValue: 3.0,
      ticks: [-3.0, -2.0, -1.0, 0, 1.0, 2.0, 3.0],
      viewWindow: {
        min: -3.0,
        max: 3.0
      }
    },
    "legend": 'none',
    bubble: {
      opacity: 0.7,
      textStyle: {
        fontSize: 9,
        fontName: 'Times-Roman',
        color: 'black',
        bold: true,
        italic: true
      },
      sortBubblesBySize: true
    },
    sizeAxis: {
      minValue: 0,
      maxSize: 10
    }
  };

  $scope.chart1 = chart1;

  var chart2 = {};
  chart2.type = "ScatterChart";
  chart2.cssStyle = "height:100%; width:100%;";
  chart2.data = [
    ['Strategic', 'Offering', {
      role: 'annotation'
    }],
    [0.8, -1.2, '1'],
    [-1, 0.5, '2'],
    [1.5, 1.5, '3'],
    [-0.5, -0.5, '4'],
    [0.5, 2.5, '5'],
    [1.5, -1.5, '6'],
    [0, -1.5, '7'],
    [1.5, 0, '8'],
    [-1.5, 0, '9'],
    [0, 1.5, '10'],
    [2, 2, '11'],
    [-2, 2, '12'],
    [2, -2, '13'],
    [-2, -2, '14'],
    [1, 1, '15'],
    [-1, -1, '16'],
    [1, -1, '17'],
    [-1, 1, '18'],
    [2.5, 2.5, '19'],
    [-2.5, -2.5, '20'],

  ];

  chart2.options = {
    "title": "Strategic Vs Offering",
    "isStacked": "true",
    "fill": 20,
    "hAxis": {
      "title": "Strategic",
      minValue: -3,
      maxValue: 3,
      ticks: [-3.0, -2.0, -1.0, 0, 1.0, 2.0, 3.0],
      viewWindow: {
        min: -3.0,
        max: 3.0
      }
    },
    "vAxis": {
      "title": "Offering",
      minValue: -3,
      maxValue: 3,
      ticks: [-3.0, -2.0, -1.0, 0, 1.0, 2.0, 3.0],
      viewWindow: {
        min: -3.0,
        max: 3.0
      }
    },
    "legend": 'none'
  };

  $scope.chart2 = chart2;
});