Merge pull request #31 from fusioncharts/event-and-chart-api-readme

Event and chart api readme

Author: rohitkr

README.md

@@ -45,6 +45,8 @@ 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:
 
@@ -103,6 +105,131 @@ export class AppComponent {
 ></fusioncharts>
 ```
 
+## Listening to events
+Fusincharts events can be subscribed from component's output params.  
+Usage in template :
+```xml
+<fusioncharts
+  width="600"
+  height="350"
+  type="Column2D"
+  dataFormat="JSON"
+  [dataSource]="dataSource"
+  (dataplotRollOver)="plotRollOver($event)">
+</fusioncharts>
+```
+And in component's code , `$event` will be an object `{ eventObj : {...}, dataObj: {...} }`  
+For more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)
+```js
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: Object;
+  title: string;
+
+  constructor() {
+    this.title = "Angular  FusionCharts Sample";
+
+    this.dataSource = {
+      ...// same data as above
+    };
+  }
+
+
+
+  plotRollOver($event){
+    var dataValue = $event.dataObj.dataValue;
+    console.log(`Value is ${dataValue}`);
+  }
+
+}
+```
+Get the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events)
+
+
+## Chart API
+Using api of charts involves getting the FusionCharts chart instance from the `initialized` event.
+It emits chart object which can be operated upon later.  
+  
+In template, we add `initialized` event
+```xml
+<fusioncharts
+  type="column2d"
+  width="100%"
+  height="400"
+  dataFormat="json"
+  [dataSource]="dataSource"
+  (initialized)="initialized($event)">
+</fusioncharts>
+<button (click)="changeLabel()">Change label</button>
+```
+
+And in component's code , we get `$event` as `{ chart : ChartInstance }`  
+
+So in order to use the chart instance , we need to store the chart instance.
+
+```typescript
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: Object;
+  title: string;
+  chart: any;
+  constructor() {
+    this.title = "Angular  FusionCharts Sample";
+
+    this.dataSource = {
+      ...// same data as above
+    };
+  }
+
+  initialized($event){
+    this.chart = $event.chart;
+  }
+
+  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
 
 To generate all `*.js`, `*.js.map` and `*.d.ts` files:

dist/README.md

@@ -45,6 +45,8 @@ 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:
 
@@ -103,6 +105,131 @@ export class AppComponent {
 ></fusioncharts>
 ```
 
+## Listening to events
+Fusincharts events can be subscribed from component's output params.  
+Usage in template :
+```xml
+<fusioncharts
+  width="600"
+  height="350"
+  type="Column2D"
+  dataFormat="JSON"
+  [dataSource]="dataSource"
+  (dataplotRollOver)="plotRollOver($event)">
+</fusioncharts>
+```
+And in component's code , `$event` will be an object `{ eventObj : {...}, dataObj: {...} }`  
+For more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)
+```js
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: Object;
+  title: string;
+
+  constructor() {
+    this.title = "Angular  FusionCharts Sample";
+
+    this.dataSource = {
+      ...// same data as above
+    };
+  }
+
+
+
+  plotRollOver($event){
+    var dataValue = $event.dataObj.dataValue;
+    console.log(`Value is ${dataValue}`);
+  }
+
+}
+```
+Get the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events)
+
+
+## Chart API
+Using api of charts involves getting the FusionCharts chart instance from the `initialized` event.
+It emits chart object which can be operated upon later.  
+  
+In template, we add `initialized` event
+```xml
+<fusioncharts
+  type="column2d"
+  width="100%"
+  height="400"
+  dataFormat="json"
+  [dataSource]="dataSource"
+  (initialized)="initialized($event)">
+</fusioncharts>
+<button (click)="changeLabel()">Change label</button>
+```
+
+And in component's code , we get `$event` as `{ chart : ChartInstance }`  
+
+So in order to use the chart instance , we need to store the chart instance.
+
+```typescript
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: Object;
+  title: string;
+  chart: any;
+  constructor() {
+    this.title = "Angular  FusionCharts Sample";
+
+    this.dataSource = {
+      ...// same data as above
+    };
+  }
+
+  initialized($event){
+    this.chart = $event.chart;
+  }
+
+  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
 
 To generate all `*.js`, `*.js.map` and `*.d.ts` files:

docs/index.html

@@ -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.4aaeefe2e707a9f83704.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.2df7664b6e101d4bc927.bundle.js"></script><script type="text/javascript" src="main.22a9ff84c0cfa1e984b0.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.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>