├── LICENSE
├── README.md
├── bower.json
├── directives
    ├── angular2-google-chart.directive.js
    ├── angular2-google-chart.directive.js.map
    └── angular2-google-chart.directive.ts
├── example
    ├── app.component.js
    ├── app.component.js.map
    ├── app.component.ts
    ├── app.module.js
    ├── app.module.js.map
    ├── app.module.ts
    ├── assets
    │   └── images
    │   │   └── google-charts-output.png
    ├── main.js
    ├── main.js.map
    └── main.ts
├── index.html
├── package.json
├── systemjs.config.js
├── tsconfig.json
└── typings.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 vimalavinisha
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Angular2/ Angular 4
  2 | ```
  3 | This module supports Both angular 2 and angular 4 versions
  4 | ``` 
  5 | The sources for this package are in (<https://github.com/vimalavinisha/angular2-google-chart>) repo. Please file issues and pull requests against this repo.
  6 | ## Recently added Features:
  7 |   Event listener added  when user select/deselect on the chart points. It is an optional.
  8 | ### Live Demo
  9 | [Live Demo Site](http://www.angular2modules.com/googlechart "Live Demo Site For Letter Recaptcha ")
 10 | OR
 11 | [Live Demo Site](http://www.angular2modules.com/googlechart "Live Demo Site For Letter Recaptcha ")
 12 | 
 13 | ## Demo Output
 14 | 
 15 | ![google-chart-op](https://cloud.githubusercontent.com/assets/11042288/25892861/5c489e74-3593-11e7-8384-d6e48c6b2bf1.png)
 16 | ## Usage
 17 | 
 18 | ```
 19 | node install
 20 | npm install angular2-google-chart
 21 | ```
 22 | 
 23 | ### 1.In index.html page include following script
 24 | 
 25 | ```
 26 | <script src="https://www.gstatic.com/charts/loader.js"></script>
 27 | <script>  
 28 |     // !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
 29 |     var googleLoaded = false;
 30 |     // !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand. 
 31 |     var googleChartsPackagesToLoad = ['geochart'];
 32 | </script>
 33 | ```
 34 | 
 35 | ### 2.component file use like below
 36 | 
 37 | ```
 38 | import {Component} from '@angular/core';
 39 | @Component({
 40 |     selector: 'my-app',
 41 |     template: `
 42 |     <h2>  Gaugh Chart</h2>
 43 |     <div id="gauge_chart" [chartData]="gauge_ChartData" [chartOptions]= "gauge_ChartOptions" chartType="Gauge" GoogleChart></div>
 44 |     <h2>  Area Chart</h2>
 45 |     <div id="area_chart" [chartData]="area_ChartData" [chartOptions]= "area_ChartOptions" chartType="AreaChart" GoogleChart></div>
 46 |     <h2>  Line Chart</h2>
 47 |     <div id="line_chart" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart></div>
 48 |     <h2>  Bubble Chart</h2>
 49 |     <div id="bubble_chart" [chartData]="bubble_ChartData"  [chartOptions] = "bubble_ChartOptions" chartType="BubbleChart" GoogleChart></div>
 50 |     <h2>  Scatter Chart</h2>
 51 |     <div id="scatter_chart" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
 52 |     <h2>  CandlestickChart</h2>
 53 |     <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
 54 |     <h2>  Pie Chart</h2>
 55 |     <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
 56 |     <h2>  Bar Chart</h2>
 57 |     <div id="bar_chart" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
 58 |     <h2>  Map Chart</h2>
 59 |     <div id="map_chart" [chartData]="map_ChartData" [chartOptions] = "map_ChartOptions" chartType="GeoChart" GoogleChart></div>
 60 |     <h2>  Organization Chart</h2>
 61 |     <div id="org_chart" [chartData]="org_ChartData" [chartOptions] = "org_ChartOptions" chartType="OrgChart" GoogleChart></div>
 62 | 
 63 | 	`
 64 | })
 65 | export class AppComponent {
 66 |     public line_ChartData = [
 67 |         ['Year', 'Sales', 'Expenses'],
 68 |         ['2004', 1000, 400],
 69 |         ['2005', 1170, 460],
 70 |         ['2006', 660, 1120],
 71 |         ['2007', 1030, 540]];
 72 |     public bubble_ChartData = [
 73 |         ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
 74 |         ['CAN', 80.66, 1.67, 'North America', 33739900],
 75 |         ['DEU', 79.84, 1.36, 'Europe', 81902307],
 76 |         ['DNK', 78.6, 1.84, 'Europe', 5523095],
 77 |         ['EGY', 72.73, 2.78, 'Middle East', 79716203],
 78 |         ['GBR', 80.05, 2, 'Europe', 61801570],
 79 |         ['IRN', 72.49, 1.7, 'Middle East', 73137148],
 80 |         ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
 81 |         ['ISR', 81.55, 2.96, 'Middle East', 7485600],
 82 |         ['RUS', 68.6, 1.54, 'Europe', 141850000],
 83 |         ['USA', 78.09, 2.05, 'North America', 307007000]];
 84 |     public scatter_ChartData = [
 85 |         ['Date', 'Sales Percentage'],
 86 |         [new Date(2016, 3, 22), 78],
 87 |         [new Date(2016, 3, 21, 9, 30, 2), 88],
 88 |         [new Date(2016, 3, 20), 67],
 89 |         [new Date(2016, 3, 19, 8, 34, 7), 98],
 90 |         [new Date(2016, 3, 18, 15, 34, 7), 95],
 91 |         [new Date(2016, 3, 16, 7, 30, 45), 89],
 92 |         [new Date(2016, 3, 16, 15, 40, 35), 68]
 93 |     ];
 94 |     public candle_ChartData = [
 95 |         ['Day', 'Low', 'Opening value', 'Closing value', 'High'],
 96 |         ['Mon', 28, 28, 38, 38],
 97 |         ['Tue', 38, 38, 55, 55],
 98 |         ['Wed', 55, 55, 77, 77],
 99 |         ['Thu', 77, 77, 66, 66],
100 |         ['Fri', 66, 66, 22, 22]
101 |     ];
102 |     public pie_ChartData = [
103 |         ['Task', 'Hours per Day'],
104 |         ['Work', 11],
105 |         ['Eat', 2],
106 |         ['Commute', 2],
107 |         ['Watch TV', 2],
108 |         ['Sleep', 7]];
109 |     public bar_ChartData = [
110 |         ['City', '2010 Population', '2000 Population'],
111 |         ['New York City, NY', 8175000, 8008000],
112 |         ['Los Angeles, CA', 3792000, 3694000],
113 |         ['Chicago, IL', 2695000, 2896000],
114 |         ['Houston, TX', 2099000, 1953000],
115 |         ['Philadelphia, PA', 1526000, 1517000]];
116 |     public map_ChartData = [
117 |         ['Country', 'Popularity'],
118 |         ['Germany', 200],
119 |         ['United States', 300],
120 |         ['Brazil', 400],
121 |         ['Canada', 500],
122 |         ['France', 600],
123 |         ['RU', 700]
124 |     ];
125 |     public org_ChartData = [
126 |         ['Name', 'Manager', 'ToolTip'],
127 |         [{ v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>' },
128 |             '', 'The President'],
129 |         [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' },
130 |             'Mike', 'VP'],
131 |         ['Alice', 'Mike', ''],
132 |         ['Bob', 'Jim', 'Bob Sponge'],
133 |         ['Carol', 'Bob', '']
134 |     ];
135 |     public line_ChartOptions = {
136 |         title: 'Company Performance',
137 |         curveType: 'function',
138 |         legend: {
139 |             position: 'bottom'
140 |         }
141 |     };
142 |     public bubble_ChartOptions = {
143 |         title: 'Correlation between life expectancy, fertility rate ' +
144 |         'and population of some world countries (2010)',
145 |         hAxis: { title: 'Life Expectancy' },
146 |         vAxis: { title: 'Fertility Rate' },
147 |         bubble: { textStyle: { fontSize: 11 } }
148 | 
149 |     };
150 |     public candle_ChartOptions = {
151 |         legend: 'none',
152 |         bar: { groupWidth: '100%' }, // Remove space between bars.
153 |         candlestick: {
154 |             fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
155 |             risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
156 |         }
157 |     };
158 |     public scatter_ChartOptions = {
159 |         legend: {
160 |             position: 'bottom'
161 |         },
162 |         title: 'Company Sales Percentage'
163 |     };
164 |     public bar_ChartOptions = {
165 |         title: 'Population of Largest U.S. Cities',
166 |         chartArea: { width: '50%' },
167 |         hAxis: {
168 |             title: 'Total Population',
169 |             minValue: 0,
170 |             textStyle: {
171 |                 bold: true,
172 |                 fontSize: 12,
173 |                 color: '#4d4d4d'
174 |             },
175 |             titleTextStyle: {
176 |                 bold: true,
177 |                 fontSize: 18,
178 |                 color: '#4d4d4d'
179 |             }
180 |         },
181 |         vAxis: {
182 |             title: 'City',
183 |             textStyle: {
184 |                 fontSize: 14,
185 |                 bold: true,
186 |                 color: '#848484'
187 |             },
188 |             titleTextStyle: {
189 |                 fontSize: 14,
190 |                 bold: true,
191 |                 color: '#848484'
192 |             }
193 |         }
194 |     };
195 |     public pie_ChartOptions = {
196 |         title: 'My Daily Activities',
197 |         width: 900,
198 |         height: 500
199 |     };
200 |     public gauge_ChartData = [
201 |         ['Label', 'Value'],
202 |         ['Systolic', 120],
203 |         ['Diastolic', 80]];
204 |     public gauge_ChartOptions = {
205 |         width: 400, height: 120,
206 |         redFrom: 90, redTo: 100,
207 |         yellowFrom: 75, yellowTo: 90,
208 |         minorTicks: 5
209 |     };
210 |     public area_ChartData = [
211 |         ['Year', 'Sales', 'Expenses'],
212 |         ['2013', 1000, 400],
213 |         ['2014', 1170, 460],
214 |         ['2015', 660, 1120],
215 |         ['2016', 1030, 540]
216 |     ];
217 | 
218 |     public area_ChartOptions = {
219 |         title: 'Company Performance',
220 |         hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
221 |         vAxis: { minValue: 0 }
222 |     };
223 |     public map_ChartOptions = {};
224 |     public org_ChartOptions = {
225 |         allowHtml: true
226 |     };
227 | }
228 | ```
229 | 
230 | ### 3 In app.module.ts, make the following additions
231 | 
232 | ```
233 | import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';
234 | ```
235 | ```
236 | @NgModule({
237 |   declarations: [
238 |     AppComponent,
239 |     GoogleChart
240 |   ],...
241 | ```
242 | 
243 | ### 4 Example Charts
244 | 
245 | ```
246 | <img src="../app/assets/images/google-charts-output.png">
247 | ```
248 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-google-chart",
 3 |   "authors": [
 4 |     "Vimala A (vimalamca1991@gmcail.com)"
 5 |   ],
 6 |   "description": "google chart directive for angular2",
 7 |   "main": "",
 8 |   "moduleType": [
 9 |     "es6",
10 |     "node"
11 |   ],
12 |   "keywords": [
13 |     "angular2",
14 |     "angular2-google-chart",
15 | 	"angular2-google"
16 |   ],
17 |   "license": "MIT",
18 |   "homepage": "",
19 |   "ignore": [
20 |     "**/.*",
21 |     "node_modules",
22 |     "bower_components",
23 |     "test",
24 |     "tests"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/directives/angular2-google-chart.directive.js:
--------------------------------------------------------------------------------
  1 | System.register(["@angular/core"], function (exports_1, context_1) {
  2 |     "use strict";
  3 |     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  4 |         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  5 |         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  6 |         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  7 |         return c > 3 && r && Object.defineProperty(target, key, r), r;
  8 |     };
  9 |     var __metadata = (this && this.__metadata) || function (k, v) {
 10 |         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 11 |     };
 12 |     var __moduleName = context_1 && context_1.id;
 13 |     var core_1, GoogleChart;
 14 |     return {
 15 |         setters: [
 16 |             function (core_1_1) {
 17 |                 core_1 = core_1_1;
 18 |             }
 19 |         ],
 20 |         execute: function () {
 21 |             GoogleChart = (function () {
 22 |                 function GoogleChart(element) {
 23 |                     this.element = element;
 24 |                     this.loadingDelay = 0;
 25 |                     this.itemSelect = new core_1.EventEmitter();
 26 |                     this.itemDeselect = new core_1.EventEmitter();
 27 |                     this._element = this.element.nativeElement;
 28 |                 }
 29 |                 GoogleChart.prototype.ngOnChanges = function () {
 30 |                     var _this = this;
 31 |                     if (!googleLoaded) {
 32 |                         googleLoaded = true;
 33 |                         google.charts.load('current', { 'packages': ['corechart', 'gauge']['orgchart'] });
 34 |                     }
 35 |                     setTimeout(function () { return _this.drawGraph(_this.chartOptions, _this.chartType, _this.chartData, _this._element); }, this.loadingDelay);
 36 |                 };
 37 |                 GoogleChart.prototype.onResize = function (event) {
 38 |                     this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element);
 39 |                 };
 40 |                 GoogleChart.prototype.drawGraph = function (chartOptions, chartType, chartData, ele) {
 41 |                     google.charts.setOnLoadCallback(drawChart);
 42 |                     var self = this;
 43 |                     function drawChart() {
 44 |                         var wrapper = new google.visualization.ChartWrapper({
 45 |                             chartType: chartType,
 46 |                             dataTable: chartData,
 47 |                             options: chartOptions || {}
 48 |                         });
 49 |                         wrapper.draw(ele);
 50 |                         google.visualization.events.addListener(wrapper, 'select', function () {
 51 |                             var selectedItem = wrapper.getChart().getSelection()[0];
 52 |                             if (selectedItem) {
 53 |                                 var msg = void 0;
 54 |                                 if (selectedItem !== undefined) {
 55 |                                     var selectedRowValues = [];
 56 |                                     if (selectedItem.row !== null) {
 57 |                                         selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, 0));
 58 |                                         selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, selectedItem.column));
 59 |                                         msg = {
 60 |                                             message: 'select',
 61 |                                             row: selectedItem.row,
 62 |                                             column: selectedItem.column,
 63 |                                             selectedRowValues: selectedRowValues
 64 |                                         };
 65 |                                     }
 66 |                                 }
 67 |                                 self.itemSelect.emit(msg);
 68 |                             }
 69 |                             else
 70 |                                 self.itemDeselect.emit();
 71 |                         });
 72 |                     }
 73 |                 };
 74 |                 return GoogleChart;
 75 |             }());
 76 |             __decorate([
 77 |                 core_1.Input('chartType'),
 78 |                 __metadata("design:type", String)
 79 |             ], GoogleChart.prototype, "chartType", void 0);
 80 |             __decorate([
 81 |                 core_1.Input('chartOptions'),
 82 |                 __metadata("design:type", Object)
 83 |             ], GoogleChart.prototype, "chartOptions", void 0);
 84 |             __decorate([
 85 |                 core_1.Input('loadingDelay'),
 86 |                 __metadata("design:type", Object)
 87 |             ], GoogleChart.prototype, "loadingDelay", void 0);
 88 |             __decorate([
 89 |                 core_1.Input('chartData'),
 90 |                 __metadata("design:type", Object)
 91 |             ], GoogleChart.prototype, "chartData", void 0);
 92 |             __decorate([
 93 |                 core_1.Output('itemSelect'),
 94 |                 __metadata("design:type", core_1.EventEmitter)
 95 |             ], GoogleChart.prototype, "itemSelect", void 0);
 96 |             __decorate([
 97 |                 core_1.Output('itemDeselect'),
 98 |                 __metadata("design:type", core_1.EventEmitter)
 99 |             ], GoogleChart.prototype, "itemDeselect", void 0);
100 |             __decorate([
101 |                 core_1.HostListener('window:resize'),
102 |                 __metadata("design:type", Function),
103 |                 __metadata("design:paramtypes", [Event]),
104 |                 __metadata("design:returntype", void 0)
105 |             ], GoogleChart.prototype, "onResize", null);
106 |             GoogleChart = __decorate([
107 |                 core_1.Directive({
108 |                     selector: '[GoogleChart]'
109 |                 }),
110 |                 __metadata("design:paramtypes", [core_1.ElementRef])
111 |             ], GoogleChart);
112 |             exports_1("GoogleChart", GoogleChart);
113 |         }
114 |     };
115 | });
116 | //# sourceMappingURL=angular2-google-chart.directive.js.map


--------------------------------------------------------------------------------
/directives/angular2-google-chart.directive.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"angular2-google-chart.directive.js","sourceRoot":"","sources":["angular2-google-chart.directive.ts"],"names":[],"mappings":"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"}


--------------------------------------------------------------------------------
/directives/angular2-google-chart.directive.ts:
--------------------------------------------------------------------------------
 1 | import {Directive, ElementRef, Input, Output, OnChanges, EventEmitter, HostBinding, HostListener} from '@angular/core';
 2 | declare const google: any;
 3 | declare let googleLoaded: any;
 4 | declare const googleChartsPackagesToLoad: any;
 5 | @Directive({
 6 |     selector: '[GoogleChart]'
 7 | })
 8 | export class GoogleChart implements OnChanges {
 9 |     public _element: any;
10 |     @Input('chartType') public chartType: string;
11 |     @Input('chartOptions') public chartOptions: Object;
12 |     @Input('loadingDelay') public loadingDelay = 0;
13 |     @Input('chartData') public chartData: Object;
14 |     @Output('itemSelect') public itemSelect: EventEmitter<{ row: number, column: number }> = new EventEmitter();
15 |     @Output('itemDeselect') public itemDeselect: EventEmitter<void> = new EventEmitter<void>();
16 | 
17 |     constructor(public element: ElementRef) {
18 |         this._element = this.element.nativeElement;
19 |     }
20 | 
21 |     ngOnChanges() {
22 |         if (!googleLoaded) {
23 |             googleLoaded = true;
24 |             google.charts.load('current', {'packages': ['corechart', 'gauge']['orgchart']});
25 |         }
26 |         setTimeout(() => this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element), this.loadingDelay);
27 |     }
28 | 
29 |     @HostListener('window:resize') onResize(event: Event) {
30 |         this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element);
31 |     }
32 | 
33 |     drawGraph(chartOptions, chartType, chartData, ele) {
34 |         google.charts.setOnLoadCallback(drawChart);
35 |         const self = this;
36 | 
37 |         function drawChart() {
38 |             const wrapper = new google.visualization.ChartWrapper({
39 |                 chartType: chartType,
40 |                 dataTable: chartData,
41 |                 options: chartOptions || {}
42 |             });
43 |             wrapper.draw(ele);
44 |             google.visualization.events.addListener(wrapper, 'select', function () {
45 |                 const selectedItem = wrapper.getChart().getSelection()[0];
46 |                 if (selectedItem) {
47 |                     let msg;
48 |                     if (selectedItem !== undefined) {
49 |                         const selectedRowValues = [];
50 |                         if (selectedItem.row !== null) {
51 |                             selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, 0));
52 |                             selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, selectedItem.column));
53 |                             msg = {
54 |                                 message: 'select',
55 |                                 row: selectedItem.row,
56 |                                 column: selectedItem.column,
57 |                                 selectedRowValues: selectedRowValues
58 |                             };
59 |                         }
60 |                     }
61 |                     self.itemSelect.emit(msg);
62 |                 } else
63 |                     self.itemDeselect.emit();
64 |             });
65 |         }
66 |     }
67 | }


--------------------------------------------------------------------------------
/example/app.component.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @author Vimala A
  3 |  */
  4 | System.register(["@angular/core"], function (exports_1, context_1) {
  5 |     "use strict";
  6 |     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  7 |         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  8 |         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  9 |         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
 10 |         return c > 3 && r && Object.defineProperty(target, key, r), r;
 11 |     };
 12 |     var __moduleName = context_1 && context_1.id;
 13 |     var core_1, AppComponent;
 14 |     return {
 15 |         setters: [
 16 |             function (core_1_1) {
 17 |                 core_1 = core_1_1;
 18 |             }
 19 |         ],
 20 |         execute: function () {/*
 21 |              * @author Vimala A
 22 |              */
 23 |             AppComponent = (function () {
 24 |                 function AppComponent() {
 25 |                     this.line_ChartData = [
 26 |                         ['Year', 'Sales', 'Expenses'],
 27 |                         ['2004', 1000, 400],
 28 |                         ['2005', 1170, 460],
 29 |                         ['2006', 660, 1120],
 30 |                         ['2007', 1030, 540]
 31 |                     ];
 32 |                     this.bubble_ChartData = [
 33 |                         ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
 34 |                         ['CAN', 80.66, 1.67, 'North America', 33739900],
 35 |                         ['DEU', 79.84, 1.36, 'Europe', 81902307],
 36 |                         ['DNK', 78.6, 1.84, 'Europe', 5523095],
 37 |                         ['EGY', 72.73, 2.78, 'Middle East', 79716203],
 38 |                         ['GBR', 80.05, 2, 'Europe', 61801570],
 39 |                         ['IRN', 72.49, 1.7, 'Middle East', 73137148],
 40 |                         ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
 41 |                         ['ISR', 81.55, 2.96, 'Middle East', 7485600],
 42 |                         ['RUS', 68.6, 1.54, 'Europe', 141850000],
 43 |                         ['USA', 78.09, 2.05, 'North America', 307007000]
 44 |                     ];
 45 |                     this.scatter_ChartData = [
 46 |                         ['Date', 'Sales Percentage'],
 47 |                         [new Date(2016, 3, 22), 78],
 48 |                         [new Date(2016, 3, 21, 9, 30, 2), 88],
 49 |                         [new Date(2016, 3, 20), 67],
 50 |                         [new Date(2016, 3, 19, 8, 34, 7), 98],
 51 |                         [new Date(2016, 3, 18, 15, 34, 7), 95],
 52 |                         [new Date(2016, 3, 16, 7, 30, 45), 89],
 53 |                         [new Date(2016, 3, 16, 15, 40, 35), 68]
 54 |                     ];
 55 |                     this.candle_ChartData = [
 56 |                         ['Day', 'Low', 'Opening value', 'Closing value', 'High'],
 57 |                         ['Mon', 28, 28, 38, 38],
 58 |                         ['Tue', 38, 38, 55, 55],
 59 |                         ['Wed', 55, 55, 77, 77],
 60 |                         ['Thu', 77, 77, 66, 66],
 61 |                         ['Fri', 66, 66, 22, 22]
 62 |                     ];
 63 |                     this.pie_ChartData = [
 64 |                         ['Task', 'Hours per Day'],
 65 |                         ['Work', 11],
 66 |                         ['Eat', 2],
 67 |                         ['Commute', 2],
 68 |                         ['Watch TV', 2],
 69 |                         ['Sleep', 7]
 70 |                     ];
 71 |                     this.bar_ChartData = [
 72 |                         ['City', '2010 Population', '2000 Population'],
 73 |                         ['New York City, NY', 8175000, 8008000],
 74 |                         ['Los Angeles, CA', 3792000, 3694000],
 75 |                         ['Chicago, IL', 2695000, 2896000],
 76 |                         ['Houston, TX', 2099000, 1953000],
 77 |                         ['Philadelphia, PA', 1526000, 1517000]
 78 |                     ];
 79 |                     this.map_ChartData = [
 80 |                         ['Country', 'Popularity'],
 81 |                         ['Germany', 200],
 82 |                         ['United States', 300],
 83 |                         ['Brazil', 400],
 84 |                         ['Canada', 500],
 85 |                         ['France', 600],
 86 |                         ['RU', 700]
 87 |                     ];
 88 |                     this.org_ChartData = [
 89 |                         ['Name', 'Manager', 'ToolTip'],
 90 |                         [{ v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>' },
 91 |                             '', 'The President'],
 92 |                         [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' },
 93 |                             'Mike', 'VP'],
 94 |                         ['Alice', 'Mike', ''],
 95 |                         ['Bob', 'Jim', 'Bob Sponge'],
 96 |                         ['Carol', 'Bob', '']
 97 |                     ];
 98 |                     this.line_ChartOptions = {
 99 |                         title: 'Company Performance',
100 |                         curveType: 'function',
101 |                         legend: {
102 |                             position: 'bottom'
103 |                         }
104 |                     };
105 |                     this.bubble_ChartOptions = {
106 |                         title: 'Correlation between life expectancy, fertility rate ' +
107 |                             'and population of some world countries (2010)',
108 |                         hAxis: { title: 'Life Expectancy' },
109 |                         vAxis: { title: 'Fertility Rate' },
110 |                         bubble: { textStyle: { fontSize: 11 } }
111 |                     };
112 |                     this.candle_ChartOptions = {
113 |                         legend: 'none',
114 |                         bar: { groupWidth: '100%' },
115 |                         candlestick: {
116 |                             fallingColor: { strokeWidth: 0, fill: '#a52714' },
117 |                             risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
118 |                         }
119 |                     };
120 |                     this.scatter_ChartOptions = {
121 |                         legend: {
122 |                             position: 'bottom'
123 |                         },
124 |                         title: 'Company Sales Percentage'
125 |                     };
126 |                     this.bar_ChartOptions = {
127 |                         title: 'Population of Largest U.S. Cities',
128 |                         chartArea: { width: '50%' },
129 |                         hAxis: {
130 |                             title: 'Total Population',
131 |                             minValue: 0,
132 |                             textStyle: {
133 |                                 bold: true,
134 |                                 fontSize: 12,
135 |                                 color: '#4d4d4d'
136 |                             },
137 |                             titleTextStyle: {
138 |                                 bold: true,
139 |                                 fontSize: 18,
140 |                                 color: '#4d4d4d'
141 |                             }
142 |                         },
143 |                         vAxis: {
144 |                             title: 'City',
145 |                             textStyle: {
146 |                                 fontSize: 14,
147 |                                 bold: true,
148 |                                 color: '#848484'
149 |                             },
150 |                             titleTextStyle: {
151 |                                 fontSize: 14,
152 |                                 bold: true,
153 |                                 color: '#848484'
154 |                             }
155 |                         }
156 |                     };
157 |                     this.pie_ChartOptions = {
158 |                         title: 'My Daily Activities',
159 |                         width: 900,
160 |                         height: 500
161 |                     };
162 |                     this.gauge_ChartData = [
163 |                         ['Label', 'Value'],
164 |                         ['Systolic', 120],
165 |                         ['Diastolic', 80]
166 |                     ];
167 |                     this.gauge_ChartOptions = {
168 |                         width: 400, height: 120,
169 |                         redFrom: 90, redTo: 100,
170 |                         yellowFrom: 75, yellowTo: 90,
171 |                         minorTicks: 5
172 |                     };
173 |                     this.area_ChartData = [
174 |                         ['Year', 'Sales', 'Expenses'],
175 |                         ['2013', 1000, 400],
176 |                         ['2014', 1170, 460],
177 |                         ['2015', 660, 1120],
178 |                         ['2016', 1030, 540]
179 |                     ];
180 |                     this.area_ChartOptions = {
181 |                         title: 'Company Performance',
182 |                         hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
183 |                         vAxis: { minValue: 0 }
184 |                     };
185 |                     this.map_ChartOptions = {};
186 |                     this.org_ChartOptions = {
187 |                         allowHtml: true
188 |                     };
189 |                 }
190 |                 AppComponent.prototype.itemSelected = function (event) {
191 |                     alert(JSON.stringify(event));
192 |                 };
193 |                 AppComponent.prototype.itemDeselected = function (event) {
194 |                     alert("DESELECTED");
195 |                 };
196 |                 return AppComponent;
197 |             }());
198 |             AppComponent = __decorate([
199 |                 core_1.Component({
200 |                     selector: 'my-app',
201 |                     template: "\n    <h2>  Gaugh Chart</h2>\n    <div id=\"gauge_chart\" [chartData]=\"gauge_ChartData\" [chartOptions]= \"gauge_ChartOptions\" chartType=\"Gauge\" GoogleChart></div>\n    <h2>  Area Chart</h2>\n    <div id=\"area_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"area_ChartData\" [chartOptions]= \"area_ChartOptions\" chartType=\"AreaChart\" GoogleChart></div>\n    <h2>  Line Chart</h2>\n    <div id=\"line_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"line_ChartData\" [chartOptions]= \"line_ChartOptions\" chartType=\"LineChart\" GoogleChart></div>\n    <h2>  Bubble Chart</h2>\n    <div id=\"bubble_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"bubble_ChartData\"  [chartOptions] = \"bubble_ChartOptions\" chartType=\"BubbleChart\" GoogleChart></div>\n    <h2>  Scatter Chart</h2>\n    <div id=\"scatter_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"scatter_ChartData\"  [chartOptions] = \"scatter_ChartOptions\" chartType=\"ScatterChart\" GoogleChart></div>\n    <h2>  CandlestickChart</h2>\n    <div id=\"candle_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"candle_ChartData\" [chartOptions] = \"candle_ChartOptions\" chartType=\"CandlestickChart\" GoogleChart></div>\n    <h2>  Pie Chart</h2>\n    <div id=\"pie_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"pie_ChartData\" [chartOptions] = \"pie_ChartOptions\" chartType=\"PieChart\" GoogleChart></div>\n    <h2>  Bar Chart</h2>\n    <div id=\"bar_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"bar_ChartData\" [chartOptions] = \"bar_ChartOptions\" chartType=\"BarChart\" GoogleChart></div>\n    <h2>  Map Chart</h2>\n    <div id=\"map_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"map_ChartData\" [chartOptions] = \"map_ChartOptions\" chartType=\"GeoChart\" GoogleChart></div>\n    <h2>  Organization Chart</h2>\n    <div id=\"org_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"org_ChartData\" [chartOptions] = \"org_ChartOptions\" chartType=\"OrgChart\" GoogleChart></div>\n\n\t"
202 |                 })
203 |             ], AppComponent);
204 |             exports_1("AppComponent", AppComponent);
205 |         }
206 |     };
207 | });
208 | //# sourceMappingURL=app.component.js.map


--------------------------------------------------------------------------------
/example/app.component.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":"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"}


--------------------------------------------------------------------------------
/example/app.component.ts:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @author Vimala A
  3 |  */
  4 | 
  5 | import {Component} from '@angular/core';
  6 | @Component({
  7 |     selector: 'my-app',
  8 |     template: `
  9 |     <h2>  Gaugh Chart</h2>
 10 |     <div id="gauge_chart" [chartData]="gauge_ChartData" [chartOptions]= "gauge_ChartOptions" chartType="Gauge" GoogleChart></div>
 11 |     <h2>  Area Chart</h2>
 12 |     <div id="area_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="area_ChartData" [chartOptions]= "area_ChartOptions" chartType="AreaChart" GoogleChart></div>
 13 |     <h2>  Line Chart</h2>
 14 |     <div id="line_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart></div>
 15 |     <h2>  Bubble Chart</h2>
 16 |     <div id="bubble_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="bubble_ChartData"  [chartOptions] = "bubble_ChartOptions" chartType="BubbleChart" GoogleChart></div>
 17 |     <h2>  Scatter Chart</h2>
 18 |     <div id="scatter_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
 19 |     <h2>  CandlestickChart</h2>
 20 |     <div id="candle_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
 21 |     <h2>  Pie Chart</h2>
 22 |     <div id="pie_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
 23 |     <h2>  Bar Chart</h2>
 24 |     <div id="bar_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
 25 |     <h2>  Map Chart</h2>
 26 |     <div id="map_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="map_ChartData" [chartOptions] = "map_ChartOptions" chartType="GeoChart" GoogleChart></div>
 27 |     <h2>  Organization Chart</h2>
 28 |     <div id="org_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="org_ChartData" [chartOptions] = "org_ChartOptions" chartType="OrgChart" GoogleChart></div>
 29 | 
 30 | 	`
 31 | })
 32 | export class AppComponent {
 33 |     public line_ChartData = [
 34 |         ['Year', 'Sales', 'Expenses'],
 35 |         ['2004', 1000, 400],
 36 |         ['2005', 1170, 460],
 37 |         ['2006', 660, 1120],
 38 |         ['2007', 1030, 540]];
 39 |     public bubble_ChartData = [
 40 |         ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
 41 |         ['CAN', 80.66, 1.67, 'North America', 33739900],
 42 |         ['DEU', 79.84, 1.36, 'Europe', 81902307],
 43 |         ['DNK', 78.6, 1.84, 'Europe', 5523095],
 44 |         ['EGY', 72.73, 2.78, 'Middle East', 79716203],
 45 |         ['GBR', 80.05, 2, 'Europe', 61801570],
 46 |         ['IRN', 72.49, 1.7, 'Middle East', 73137148],
 47 |         ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
 48 |         ['ISR', 81.55, 2.96, 'Middle East', 7485600],
 49 |         ['RUS', 68.6, 1.54, 'Europe', 141850000],
 50 |         ['USA', 78.09, 2.05, 'North America', 307007000]];
 51 |     public scatter_ChartData = [
 52 |         ['Date', 'Sales Percentage'],
 53 |         [new Date(2016, 3, 22), 78],
 54 |         [new Date(2016, 3, 21, 9, 30, 2), 88],
 55 |         [new Date(2016, 3, 20), 67],
 56 |         [new Date(2016, 3, 19, 8, 34, 7), 98],
 57 |         [new Date(2016, 3, 18, 15, 34, 7), 95],
 58 |         [new Date(2016, 3, 16, 7, 30, 45), 89],
 59 |         [new Date(2016, 3, 16, 15, 40, 35), 68]
 60 |     ];
 61 |     public candle_ChartData = [
 62 |         ['Day', 'Low', 'Opening value', 'Closing value', 'High'],
 63 |         ['Mon', 28, 28, 38, 38],
 64 |         ['Tue', 38, 38, 55, 55],
 65 |         ['Wed', 55, 55, 77, 77],
 66 |         ['Thu', 77, 77, 66, 66],
 67 |         ['Fri', 66, 66, 22, 22]
 68 |     ];
 69 |     public pie_ChartData = [
 70 |         ['Task', 'Hours per Day'],
 71 |         ['Work', 11],
 72 |         ['Eat', 2],
 73 |         ['Commute', 2],
 74 |         ['Watch TV', 2],
 75 |         ['Sleep', 7]];
 76 |     public bar_ChartData = [
 77 |         ['City', '2010 Population', '2000 Population'],
 78 |         ['New York City, NY', 8175000, 8008000],
 79 |         ['Los Angeles, CA', 3792000, 3694000],
 80 |         ['Chicago, IL', 2695000, 2896000],
 81 |         ['Houston, TX', 2099000, 1953000],
 82 |         ['Philadelphia, PA', 1526000, 1517000]];
 83 |     public map_ChartData = [
 84 |         ['Country', 'Popularity'],
 85 |         ['Germany', 200],
 86 |         ['United States', 300],
 87 |         ['Brazil', 400],
 88 |         ['Canada', 500],
 89 |         ['France', 600],
 90 |         ['RU', 700]
 91 |     ];
 92 |     public org_ChartData = [
 93 |         ['Name', 'Manager', 'ToolTip'],
 94 |         [{v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>'},
 95 |             '', 'The President'],
 96 |         [{v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>'},
 97 |             'Mike', 'VP'],
 98 |         ['Alice', 'Mike', ''],
 99 |         ['Bob', 'Jim', 'Bob Sponge'],
100 |         ['Carol', 'Bob', '']
101 |     ];
102 |     public line_ChartOptions = {
103 |         title: 'Company Performance',
104 |         curveType: 'function',
105 |         legend: {
106 |             position: 'bottom'
107 |         }
108 |     };
109 |     public bubble_ChartOptions = {
110 |         title: 'Correlation between life expectancy, fertility rate ' +
111 |         'and population of some world countries (2010)',
112 |         hAxis: {title: 'Life Expectancy'},
113 |         vAxis: {title: 'Fertility Rate'},
114 |         bubble: {textStyle: {fontSize: 11}}
115 | 
116 |     };
117 |     public candle_ChartOptions = {
118 |         legend: 'none',
119 |         bar: {groupWidth: '100%'}, // Remove space between bars.
120 |         candlestick: {
121 |             fallingColor: {strokeWidth: 0, fill: '#a52714'}, // red
122 |             risingColor: {strokeWidth: 0, fill: '#0f9d58'}   // green
123 |         }
124 |     };
125 |     public scatter_ChartOptions = {
126 |         legend: {
127 |             position: 'bottom'
128 |         },
129 |         title: 'Company Sales Percentage'
130 |     };
131 |     public bar_ChartOptions = {
132 |         title: 'Population of Largest U.S. Cities',
133 |         chartArea: {width: '50%'},
134 |         hAxis: {
135 |             title: 'Total Population',
136 |             minValue: 0,
137 |             textStyle: {
138 |                 bold: true,
139 |                 fontSize: 12,
140 |                 color: '#4d4d4d'
141 |             },
142 |             titleTextStyle: {
143 |                 bold: true,
144 |                 fontSize: 18,
145 |                 color: '#4d4d4d'
146 |             }
147 |         },
148 |         vAxis: {
149 |             title: 'City',
150 |             textStyle: {
151 |                 fontSize: 14,
152 |                 bold: true,
153 |                 color: '#848484'
154 |             },
155 |             titleTextStyle: {
156 |                 fontSize: 14,
157 |                 bold: true,
158 |                 color: '#848484'
159 |             }
160 |         }
161 |     };
162 |     public pie_ChartOptions = {
163 |         title: 'My Daily Activities',
164 |         width: 900,
165 |         height: 500
166 |     };
167 |     public gauge_ChartData = [
168 |         ['Label', 'Value'],
169 |         ['Systolic', 120],
170 |         ['Diastolic', 80]];
171 |     public gauge_ChartOptions = {
172 |         width: 400, height: 120,
173 |         redFrom: 90, redTo: 100,
174 |         yellowFrom: 75, yellowTo: 90,
175 |         minorTicks: 5
176 |     };
177 |     public area_ChartData = [
178 |         ['Year', 'Sales', 'Expenses'],
179 |         ['2013', 1000, 400],
180 |         ['2014', 1170, 460],
181 |         ['2015', 660, 1120],
182 |         ['2016', 1030, 540]
183 |     ];
184 | 
185 |     public area_ChartOptions = {
186 |         title: 'Company Performance',
187 |         hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
188 |         vAxis: {minValue: 0}
189 |     };
190 |     public map_ChartOptions = {};
191 |     public org_ChartOptions = {
192 |         allowHtml: true
193 |     };
194 | 
195 |     itemSelected(event) {
196 |         alert(JSON.stringify(event));
197 |     }
198 | 
199 |     itemDeselected(event) {
200 |         alert("DESELECTED");
201 |     }
202 | }


--------------------------------------------------------------------------------
/example/app.module.js:
--------------------------------------------------------------------------------
 1 | System.register(["@angular/core", "@angular/platform-browser", "./app.component", "../directives/angular2-google-chart.directive"], function (exports_1, context_1) {
 2 |     "use strict";
 3 |     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 4 |         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 5 |         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
 6 |         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
 7 |         return c > 3 && r && Object.defineProperty(target, key, r), r;
 8 |     };
 9 |     var __moduleName = context_1 && context_1.id;
10 |     var core_1, platform_browser_1, app_component_1, angular2_google_chart_directive_1, AppModule;
11 |     return {
12 |         setters: [
13 |             function (core_1_1) {
14 |                 core_1 = core_1_1;
15 |             },
16 |             function (platform_browser_1_1) {
17 |                 platform_browser_1 = platform_browser_1_1;
18 |             },
19 |             function (app_component_1_1) {
20 |                 app_component_1 = app_component_1_1;
21 |             },
22 |             function (angular2_google_chart_directive_1_1) {
23 |                 angular2_google_chart_directive_1 = angular2_google_chart_directive_1_1;
24 |             }
25 |         ],
26 |         execute: function () {
27 |             AppModule = (function () {
28 |                 function AppModule() {
29 |                 }
30 |                 return AppModule;
31 |             }());
32 |             AppModule = __decorate([
33 |                 core_1.NgModule({
34 |                     declarations: [app_component_1.AppComponent, angular2_google_chart_directive_1.GoogleChart],
35 |                     imports: [platform_browser_1.BrowserModule],
36 |                     bootstrap: [app_component_1.AppComponent],
37 |                 })
38 |             ], AppModule);
39 |             exports_1("AppModule", AppModule);
40 |         }
41 |     };
42 | });
43 | //# sourceMappingURL=app.module.js.map


--------------------------------------------------------------------------------
/example/app.module.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;YASa,SAAS;gBAAtB;gBAAwB,CAAC;gBAAD,gBAAC;YAAD,CAAC,AAAzB,IAAyB;YAAZ,SAAS;gBALrB,eAAQ,CAAC;oBACN,YAAY,EAAE,CAAC,4BAAY,EAAC,6CAAW,CAAC;oBACxC,OAAO,EAAO,CAAC,gCAAa,CAAC;oBAC7B,SAAS,EAAK,CAAC,4BAAY,CAAC;iBAC/B,CAAC;eACW,SAAS,CAAG;;QACzB,CAAC"}


--------------------------------------------------------------------------------
/example/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }       from '@angular/core';
 2 | import { BrowserModule  } from '@angular/platform-browser';
 3 | import { AppComponent }   from './app.component';
 4 | import {GoogleChart} from '../directives/angular2-google-chart.directive';
 5 | @NgModule({
 6 |     declarations: [AppComponent,GoogleChart],
 7 |     imports:      [BrowserModule],
 8 |     bootstrap:    [AppComponent],
 9 | })
10 | export class AppModule {}
11 | 


--------------------------------------------------------------------------------
/example/assets/images/google-charts-output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimalavinisha/angular2-google-chart/71539bf3c91552858950018d1aabd25cfc1de2d6/example/assets/images/google-charts-output.png


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | // import {bootstrap}    from '@angular/platform-browser-dynamic';
 2 | // import {AppComponent} from './app.component';
 3 | System.register(["@angular/platform-browser-dynamic", "./app.module"], function (exports_1, context_1) {
 4 |     "use strict";
 5 |     var __moduleName = context_1 && context_1.id;
 6 |     var platform_browser_dynamic_1, app_module_1;
 7 |     return {
 8 |         setters: [
 9 |             function (platform_browser_dynamic_1_1) {
10 |                 platform_browser_dynamic_1 = platform_browser_dynamic_1_1;
11 |             },
12 |             function (app_module_1_1) {
13 |                 app_module_1 = app_module_1_1;
14 |             }
15 |         ],
16 |         execute: function () {// import {bootstrap}    from '@angular/platform-browser-dynamic';
17 |             // import {AppComponent} from './app.component';
18 |             platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
19 |         }
20 |     };
21 | });
22 | //# sourceMappingURL=main.js.map


--------------------------------------------------------------------------------
/example/main.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,gDAAgD;;;;;;;;;;;;;;8BADhD,kEAAkE;YAClE,gDAAgD;YAMhD,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC;QAAA,CAAC"}


--------------------------------------------------------------------------------
/example/main.ts:
--------------------------------------------------------------------------------
1 | // import {bootstrap}    from '@angular/platform-browser-dynamic';
2 | // import {AppComponent} from './app.component';
3 | 
4 | // bootstrap(AppComponent);
5 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
6 | import { AppModule }              from './app.module';
7 | 
8 | platformBrowserDynamic().bootstrapModule(AppModule);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <base href="/">
 4 |     <title>Angular 2 Google Chart</title>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- 1. Load libraries -->
 8 |     <!-- IE required polyfills, in this exact order -->
 9 |     <script src="node_modules/core-js/client/shim.min.js"></script>
10 |     <script src="node_modules/zone.js/dist/zone.js"></script>
11 |     <script src="node_modules/reflect-metadata/Reflect.js"></script>
12 |     <script src="node_modules/systemjs/dist/system.src.js"></script>
13 |     <script src="https://www.gstatic.com/charts/loader.js"></script>
14 | 
15 |    <!-- <script src="node_modules/es6-shim/es6-shim.min.js"></script>
16 |     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
17 |     <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
18 | 
19 |     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
20 |     <script src="node_modules/systemjs/dist/system.src.js"></script>
21 |     <script src="node_modules/rxjs/bundles/Rx.js"></script>
22 |     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
23 |     <script src="node_modules/angular2/bundles/router.dev.js"></script>
24 |     <script src="https://www.gstatic.com/charts/loader.js"></script>-->
25 | 
26 |     <!-- 2. Configure SystemJS -->
27 |     <!--<script>
28 |       System.config({
29 |         packages: {
30 |           app: {
31 |             format: 'register',
32 |             defaultExtension: 'js'
33 |           },
34 |            directives: {
35 |             format: 'register',
36 |             defaultExtension: 'js'
37 |           }
38 |         }
39 |       });
40 |       var googleLoaded = false;
41 |       System.import('app/main')
42 |             .then(null, console.error.bind(console));
43 |     </script>-->
44 |     <!-- 2. Configure SystemJS -->
45 |     <script src="systemjs.config.js"></script>
46 |     <script>
47 |      var googleLoaded = false;
48 |      var googleChartsPackagesToLoad = ['corechart', 'gauge', 'geochart'];
49 |       System.import('app').catch(function(err){ console.error(err); });
50 |     </script>
51 |   </head>
52 | 
53 |   <!-- 3. Display the application -->
54 |   <body>
55 |     <my-app>Loading...</my-app>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-google-chart",
 3 |   "version": "2.3.0",
 4 |   "description": "google chart directive for angular2",
 5 |   "main": "index.js",
 6 |   "dependencies": {
 7 |     "@angular/common": "4.1.3",
 8 |     "@angular/compiler": "4.1.3",
 9 |     "@angular/core": "4.1.3",
10 |     "@angular/platform-browser": "4.1.3 ",
11 |     "@angular/platform-browser-dynamic": "4.1.3",
12 |     "@angular/upgrade": "4.1.3",
13 |     "core-js": "^2.4.1",
14 |     "reflect-metadata": "^0.1.3",
15 |     "rxjs": "^5.0.1",
16 |     "systemjs": "0.19.27",
17 |     "typescript": "2.2.2",
18 |     "zone.js": "0.8.4"
19 |   },
20 |   "scripts": {
21 |     "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
22 |     "tsc": "tsc",
23 |     "tsc:w": "tsc -w",
24 |     "lite": "lite-server",
25 |     "typings": "typings",
26 |     "prepublish": "typings install"
27 |   },
28 |   "devDependencies": {
29 |     "concurrently": "^2.0.0",
30 |     "lite-server": "^2.2.0",
31 |     "typings": "1.3.3"
32 |   },
33 |   "license": "MIT",
34 |   "author": "Vimala A",
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git+https://github.com/vimalavinisha/angular2-google-chart.git"
38 |   },
39 |   "keywords": [
40 |     "google-chart",
41 |     "angular2-google-chart",
42 |     "chart"
43 |   ],
44 |   "bugs": {
45 |     "url": "https://github.com/vimalavinisha/angular2-google-chart/issues"
46 |   },
47 |   "homepage": "https://github.com/vimalavinisha/angular2-google-chart#readme"
48 | }
49 | 


--------------------------------------------------------------------------------
/systemjs.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * System configuration for Angular 2 samples
 3 |  * Adjust as necessary for your application needs.
 4 |  */
 5 | (function(global) {
 6 |   // map tells the System loader where to look for things
 7 |   var map = {
 8 |     'app':                        '/example', // 'dist',
 9 | //    'httpresource':               'node_modules/httpresource',
10 |     '@angular':                   'node_modules/@angular',
11 |     'rxjs':                       'node_modules/rxjs',
12 |     'directives' : 'directives/'
13 |   };
14 |   // packages tells the System loader how to load when no filename and/or no extension
15 |   var packages = {
16 |     'app':                        { main: 'main.js',  defaultExtension: 'js' },
17 |     'rxjs':                       { defaultExtension: 'js' },
18 |     'directives':{ defaultExtension: 'js' } 
19 |   };
20 |   var ngPackageNames = [
21 |     'common',
22 |     'compiler',
23 |     'core',
24 |     'platform-browser',
25 |     'platform-browser-dynamic',
26 |     'upgrade'
27 |   ];
28 |   // Individual files (~300 requests):
29 |   function packIndex(pkgName) {
30 |     packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
31 |   }
32 |   // Bundled (~40 requests):
33 |   function packUmd(pkgName) {
34 |     packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
35 |   }
36 |   // Most environments should use UMD; some (Karma) need the individual index files
37 |   var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
38 | //  packages['httpresource']={ default: 'resource.js',defaultExtension: 'js' };
39 |   // Add package entries for angular packages
40 |   ngPackageNames.forEach(setPackageConfig);
41 |   var config = {
42 |     map: map,
43 |     packages: packages
44 |   };
45 |   System.config(config);
46 | })(this);
47 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "system",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "removeComments": false,
10 |     "noImplicitAny": false
11 |   },
12 |   "exclude": [
13 |     "node_modules",
14 |     "typings/main",
15 |     "typings/main.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "ambientDependencies": {
3 |     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
4 |     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------