Merge branch 'release/2.0.2'

Author: ashok1994

README.md

@@ -24,12 +24,24 @@ import { AppComponent } from './app.component';
 import { FusionChartsModule } from 'angular-fusioncharts';
 
 // Import FusionCharts library and chart modules
-import FusionCharts from 'fusioncharts/core';
-import Column2d from 'fusioncharts/viz/column2d';
-import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
+import * as FusionCharts from 'fusioncharts';
+import * as Charts from 'fusioncharts/fusioncharts.charts';
+
+// For Powercharts , Widgets, and Maps
+// import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
+// import * as Widgets from 'fusioncharts/fusioncharts.widgets';
+// import * as Maps from 'fusioncharts/fusioncharts.maps';
+// To know more about suites,
+// read this https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript
+
+
+// For Map definition files
+// import * as World from 'fusioncharts/maps/fusioncharts.world';
+
+import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
 
 // Pass the fusioncharts library and chart modules
-FusionChartsModule.fcRoot(FusionCharts, Column2d, FusionTheme);
+FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
 
 @NgModule({
   declarations: [
@@ -45,9 +57,6 @@ FusionChartsModule.fcRoot(FusionCharts, Column2d, FusionTheme);
 })
 export class AppModule { }
 ```
-NOTE : If you are using angular 2, please refer [Rendering chart in Angular 2](#Rendering-chart-in-Angular-2)
-
-
 Once the library is imported, you can use its components, directives in your Angular application:
 
 In your Angular AppComponent:
@@ -113,7 +122,7 @@ Usage in template :
   width="600"
   height="350"
   type="Column2D"
-  dataFormat="JSON"
+  dataFormat="json"
   [dataSource]="dataSource"
   (dataplotRollOver)="plotRollOver($event)">
 </fusioncharts>
@@ -192,43 +201,15 @@ export class AppComponent {
   }
 
   initialized($event){
-    this.chart = $event.chart;
+    this.chart = $event.chart; // Storing the chart instance
   }
 
   changeLabel(){
     this.chart.setChartAttribute('caption', 'Changed caption');
   }
 
 }
-```
-
-## Rendering chart in Angular 2
-For angular version 2.x.x , we cannot use `'fusioncharts/core'` as it uses dynamic imports , which is not compatible with older version typescripts used by Angular 2.  
-To render a chart, we need to use the older way,
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-// Import angular-fusioncharts
-import { FusionChartsModule } from 'angular-fusioncharts';
-
-// Import FusionCharts library and chart modules
-import * as FusionCharts from 'fusioncharts'; // Change fusioncharts/core to fusioncharts and use `* as`  syntax
-import * as Charts from 'fusioncharts/fusioncharts.charts'; // Contains all the charts under FusionCharts XT , Read below for details
-
-import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
-
-// Pass the fusioncharts library and chart modules
-FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
-
-```
-Note: All other code for the component and template remain same as above.
 
-We have used `fusioncharts/fusioncharts.charts` file to use all the charts which come under FusionCharts XT.
-To know more about other charts and widgets, read this [link](https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript)
 
 ## Development
 

dist/README.md

@@ -24,12 +24,24 @@ import { AppComponent } from './app.component';
 import { FusionChartsModule } from 'angular-fusioncharts';
 
 // Import FusionCharts library and chart modules
-import FusionCharts from 'fusioncharts/core';
-import Column2d from 'fusioncharts/viz/column2d';
-import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
+import * as FusionCharts from 'fusioncharts';
+import * as Charts from 'fusioncharts/fusioncharts.charts';
+
+// For Powercharts , Widgets, and Maps
+// import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
+// import * as Widgets from 'fusioncharts/fusioncharts.widgets';
+// import * as Maps from 'fusioncharts/fusioncharts.maps';
+// To know more about suites,
+// read this https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript
+
+
+// For Map definition files
+// import * as World from 'fusioncharts/maps/fusioncharts.world';
+
+import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
 
 // Pass the fusioncharts library and chart modules
-FusionChartsModule.fcRoot(FusionCharts, Column2d, FusionTheme);
+FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
 
 @NgModule({
   declarations: [
@@ -45,9 +57,6 @@ FusionChartsModule.fcRoot(FusionCharts, Column2d, FusionTheme);
 })
 export class AppModule { }
 ```
-NOTE : If you are using angular 2, please refer [Rendering chart in Angular 2](#Rendering-chart-in-Angular-2)
-
-
 Once the library is imported, you can use its components, directives in your Angular application:
 
 In your Angular AppComponent:
@@ -113,7 +122,7 @@ Usage in template :
   width="600"
   height="350"
   type="Column2D"
-  dataFormat="JSON"
+  dataFormat="json"
   [dataSource]="dataSource"
   (dataplotRollOver)="plotRollOver($event)">
 </fusioncharts>
@@ -192,43 +201,15 @@ export class AppComponent {
   }
 
   initialized($event){
-    this.chart = $event.chart;
+    this.chart = $event.chart; // Storing the chart instance
   }
 
   changeLabel(){
     this.chart.setChartAttribute('caption', 'Changed caption');
   }
 
 }
-```
-
-## Rendering chart in Angular 2
-For angular version 2.x.x , we cannot use `'fusioncharts/core'` as it uses dynamic imports , which is not compatible with older version typescripts used by Angular 2.  
-To render a chart, we need to use the older way,
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-// Import angular-fusioncharts
-import { FusionChartsModule } from 'angular-fusioncharts';
-
-// Import FusionCharts library and chart modules
-import * as FusionCharts from 'fusioncharts'; // Change fusioncharts/core to fusioncharts and use `* as`  syntax
-import * as Charts from 'fusioncharts/fusioncharts.charts'; // Contains all the charts under FusionCharts XT , Read below for details
-
-import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
-
-// Pass the fusioncharts library and chart modules
-FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
-
-```
-Note: All other code for the component and template remain same as above.
 
-We have used `fusioncharts/fusioncharts.charts` file to use all the charts which come under FusionCharts XT.
-To know more about other charts and widgets, read this [link](https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript)
 
 ## Development
 

dist/dist/index.js

@@ -504,6 +504,7 @@ var FusionChartsComponent = /** @class */ (function () {
         return events;
     };
     FusionChartsComponent.prototype.ngAfterViewInit = function () {
+        var _this_1 = this;
         var _this = this, params = _this.constructerParams, configObj = _this.configObj || (_this.configObj = {});
         var _chartConfig = _this.chartConfig || {};
         if (typeof _chartConfig === 'string') {
@@ -524,12 +525,12 @@ var FusionChartsComponent = /** @class */ (function () {
             else {
                 configObj['events'] = Object.assign(events, configObj['events']);
             }
-            _this.chartObj = FusionChartsConstructor(_this.fusionchartsService, configObj);
-            this.initialized.emit({ chart: _this.chartObj });
             // configObj['renderAt'] = 'container-' + _this.chartObj.id;
             // _this.containerId = _this.chartObj.id;
             this.zone.runOutsideAngular(function () {
                 setTimeout(function () {
+                    _this.chartObj = FusionChartsConstructor(_this.fusionchartsService, configObj);
+                    _this_1.initialized.emit({ chart: _this.chartObj });
                     _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
                 }, 1);
             });
@@ -541,7 +542,7 @@ var FusionChartsComponent = /** @class */ (function () {
     FusionChartsComponent.decorators = [
         { type: _angular_core.Component, args: [{
                     selector: 'fusioncharts',
-                    template: "<div attr.id=\"container-{{containerId}}\" >{{placeholder}}</div>\n    ",
+                    template: "<div attr.id=\"container-{{containerId}}\" style='width:100%;height:100%'>{{placeholder}}</div>\n    ",
                     providers: [FusionChartsService],
                 },] },
     ];

dist/dist/index.min.js

@@ -1,6 +1,6 @@
 {
   "name": "angular-fusioncharts",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/fusioncharts/angular-fusioncharts"

dist/package.json

@@ -99,7 +99,7 @@
 }
 
 .side-nav .nav-list {
-    height: 800px;
+    height: 550px;
     overflow-y: scroll;
 }
 

dist/src/fusioncharts.component.js

@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.dc826832abca8165cd8d.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.cb107f6b1d0fa1a26933.bundle.js"></script><script type="text/javascript" src="main.f7fbff3ff8e6d736a37e.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.9c59f73743bce2eefee9.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.247a8cd81aa846018146.bundle.js"></script><script type="text/javascript" src="main.be63b77c4f21c1dd8f3a.bundle.js"></script></body></html>