angular google chart

<html ng-app="google-chart-example">

  <head>
    <title>
        Google Chart Tools AngularJS Directive Example
    </title>
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
    <script src="example.js"></script>
  </head>

  <body>
    <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 ng-controller="MainCtrl">
      <div google-chart="" chart="chart" style="{{chart.cssStyle}}"></div>
      <div ng-controller="SecondCtrl">
        <input type="text" name="chart-rows" id="chart-rows" value="[{" c":[{"v":"january"},{"v":19,"f":"42="" items"},{"v":12,"f":"ony="" 12="" items"},{"v":7,"f":"7="" servers"},{"v":4}]},{"c":[{"v":"february"},{"v":13},{"v":1,"f":"1="" unit="" (out="" of="" stock="" this="" month)"},{"v":12},{"v":2}]},{"c":[{"v":"march"},{"v":24},{"v":0},{"v":11},{"v":6}]}]"="" ng-model="chartrows" />
        <div google-chart="" chart="chart" style="{{chart.cssStyle}}"></div>
        <p></p>
        <pre>{{chart.data.rows}}</pre>
        <p></p>
      </div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

'use strict';

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

    var chart1 = {};
    chart1.type = "LineChart";
    chart1.cssStyle = "height:200px; width:300px;";
    chart1.data = {"cols": [
        {id: "month", label: "Month", type: "string"},
        {id: "laptop-id", label: "Laptop", type: "number"},
        {id: "desktop-id", label: "Desktop", type: "number"},
        {id: "server-id", label: "Server", type: "number"},
        {id: "cost-id", label: "Shipping", type: "number"}
    ], "rows": [
        {c: [
            {v: "January"},
            {v: 19, f: "42 items"},
            {v: 12, f: "Ony 12 items"},
            {v: 7, f: "7 servers"},
            {v: 4}
        ]},
        {c: [
            {v: "February"},
            {v: 13},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "March"},
            {v: 24},
            {v: 0},
            {v: 11},
            {v: 6}

        ]}
    ]};

    chart1.options = {
        "title": "Sales per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit", "gridlines": {"count": 6}
        },
        "hAxis": {
            "title": "Date"
        }
    };

    chart1.formatters = {};

    $scope.chart = chart1;

})
.controller("SecondCtrl", function ($scope) {

    var chart1 = {};
    chart1.type = "ColumnChart";
    chart1.cssStyle = "height:200px; width:300px;";
    chart1.data = {
        "cols": [
            {id: "month", label: "Month", type: "string"},
            {id: "laptop-id", label: "Laptop2", type: "number"},
            {id: "desktop-id", label: "Desktop2", type: "number"},
            {id: "server-id", label: "Server2", type: "number"},
            {id: "cost-id", label: "Shipping2", type: "number"}
        ]
    };
    chart1.data.rows = $scope.chartrows;

    chart1.options = {
        "title": "Sales per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit", "gridlines": {"count": 6}
        },
        "hAxis": {
            "title": "Date"
        }
    };

    chart1.formatters = {};

    $scope.chart = chart1;
});