diff --git a/README.md b/README.md index d159827..3585625 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,40 @@ # angular-fusioncharts -## Installation +A simple and lightweight official Angular component for FusionCharts JavaScript charting library. angular-fusioncharts enables you to add JavaScript charts in your Angular application without any hassle. + +## [Demo](https://fusioncharts.github.io/angular-fusioncharts/) + +- Github Repo: [https://github.com/fusioncharts/angular-fusioncharts](https://github.com/fusioncharts/angular-fusioncharts) +- Documentation: [https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular](https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular) +- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support) +- FusionCharts + - Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/) + - Official NPM Package: [https://www.npmjs.com/package/fusioncharts](https://www.npmjs.com/package/fusioncharts) +- Issues: [https://github.com/fusioncharts/angular-fusioncharts/issues](https://github.com/fusioncharts/angular-fusioncharts/issues) + +--- + +## Table of Contents + +- [Getting Started](#getting-started) + - [Requirements](#requirements) + - [Installation](#installation) + - [Working with chart API](#working-with-apis) + - [Working with events](#working-with-events) +- [Quick Start](#quick-start) +- [Going Beyond Charts](#going-beyond-charts) +- [For Contributors](#for-contributors) +- [Licensing](#licensing) + +## Getting Started + +### Requirements + +- **Node.js**, **NPM/Yarn** installed globally in your OS. +- You've an **Angular** Application. +- **FusionCharts** installed in your project, as detailed below: + +### Installation To install `angular-fusioncharts` library, run: @@ -9,10 +43,16 @@ $ npm install angular-fusioncharts --save ``` To install `fusioncharts` library: + ```bash $ npm install fusioncharts --save ``` -And then in your Angular `AppModule`: + +## Quick Start + +Here is a basic sample that shows how to create a chart using `angular-fusioncharts`: + +Add this in your Angular `AppModule`: ```typescript import { BrowserModule } from '@angular/platform-browser'; @@ -34,7 +74,6 @@ import * as Charts from 'fusioncharts/fusioncharts.charts'; // 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'; @@ -44,9 +83,7 @@ import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme); @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, // Specify FusionChartsModule as import @@ -55,14 +92,15 @@ FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme); providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} ``` + Once the library is imported, you can use its components, directives in your Angular application: In your Angular AppComponent: ```javascript -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app', @@ -73,33 +111,32 @@ export class AppComponent { title: string; constructor() { - this.title = "Angular FusionCharts Sample"; + this.title = 'Angular FusionCharts Sample'; this.dataSource = { - "chart": { - "caption": "Countries With Most Oil Reserves [2017-18]", - "subCaption": "In MMbbl = One Million barrels", - "xAxisName": "Country", - "yAxisName": "Reserves (MMbbl)", - "numberSuffix": "K", - "theme": "fusion", + chart: { + caption: 'Countries With Most Oil Reserves [2017-18]', + subCaption: 'In MMbbl = One Million barrels', + xAxisName: 'Country', + yAxisName: 'Reserves (MMbbl)', + numberSuffix: 'K', + theme: 'fusion' }, - "data": [ - { "label": "Venezuela", "value": "290" }, - { "label": "Saudi", "value": "260" }, - { "label": "Canada", "value": "180" }, - { "label": "Iran", "value": "140" }, - { "label": "Russia", "value": "115" }, - { "label": "UAE", "value": "100" }, - { "label": "US", "value": "30" }, - { "label": "China", "value": "30" } + data: [ + { label: 'Venezuela', value: '290' }, + { label: 'Saudi', value: '260' }, + { label: 'Canada', value: '180' }, + { label: 'Iran', value: '140' }, + { label: 'Russia', value: '115' }, + { label: 'UAE', value: '100' }, + { label: 'US', value: '30' }, + { label: 'China', value: '30' } ] }; } } ``` - ```xml

@@ -114,9 +151,11 @@ export class AppComponent { > ``` -## Listening to events +## Working with Events + Fusincharts events can be subscribed from component's output params. Usage in template : + ```xml ``` + 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'; @@ -157,14 +198,16 @@ export class AppComponent { } ``` + Get the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events) +## Working with APIs -## 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. - +It emits chart object which can be operated upon later. + In template, we add `initialized` event + ```xml Change label ``` -And in component's code , we get `$event` as `{ chart : ChartInstance }` +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. @@ -210,18 +253,24 @@ export class AppComponent { } +``` -## Development +## For Contributors -To generate all `*.js`, `*.js.map` and `*.d.ts` files: +- Clone the repository and install dependencies -```bash -$ npm run tsc +``` +$ git clone https://github.com/fusioncharts/angular-fusioncharts.git +$ cd angular-component +$ npm i +$ npm start ``` -To lint all `*.ts` files: +## Going Beyond Charts -```bash -$ npm run lint -``` -### [Demos and Documentation](http://fusioncharts.github.io/angular-fusioncharts/) +- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [here](https://www.fusioncharts.com/explore/dashboards). +- See [Data Stories](https://www.fusioncharts.com/explore/data-stories) built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories. + +## Licensing + +The FusionCharts React component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).