-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added more links and removed the volatile information from it.
- Loading branch information
Showing
1 changed file
with
8 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,13 +5,13 @@ | |
To install this library, install peer dependencies first: | ||
|
||
```bash | ||
$ npm install --save highcharts@^4.2.1 [email protected] es6-promise@^3.0.2 es6-shim@^0.33.3 [email protected] [email protected] [email protected] | ||
$ npm install --save highcharts@^4.2.1 | ||
``` | ||
|
||
Also make sure you install the typings for Highcharts: | ||
|
||
```bash | ||
$ typings install dt~highcharts --save | ||
$ typings install @types/highcharts --save | ||
``` | ||
|
||
Then, install this library running: | ||
|
@@ -24,150 +24,17 @@ $ npm install --save ng2-highcharts | |
|
||
To use this library, you must load ```angular2``` (and its dependencies) and ```highcharts```. | ||
|
||
A running example on how to use this library can be found at [AngularShowcase](http://github.com/AngularShowcase/angular2-seed-ng2-highcharts) or [here](http://github.com/Bigous/angular2-seed-ng2-highcharts). | ||
|
||
## Using with [Angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter) | ||
|
||
* Install required packages : `highcharts` and `ng2-highcharts` | ||
``` | ||
npm install --save highcharts ng2-highcharts | ||
``` | ||
* Import `Ng2Highcharts` in the component | ||
``` | ||
import { Ng2Highcharts } from 'ng2-highcharts'; | ||
``` | ||
* Include `Ng2Highcharts` in the directives | ||
``` | ||
@Component({ | ||
template: require('./template.html'), | ||
directives: [ | ||
Ng2Highcharts | ||
] | ||
}) | ||
export class UsingNg2HighchartsComponent { | ||
} | ||
``` | ||
* Prepare Chart Data | ||
|
||
``` | ||
private chartData = { | ||
chart: { | ||
type: 'column' | ||
}, | ||
xAxis: { | ||
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | ||
}, | ||
series: [ | ||
{ | ||
name: 'NC', | ||
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2] | ||
}, { | ||
name: 'OK', | ||
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2] | ||
}, { | ||
name: 'KO', | ||
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'VALID', | ||
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'CHECK', | ||
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'COR', | ||
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2] | ||
} | ||
] | ||
}; | ||
``` | ||
* Update template with the required directive | ||
|
||
```html | ||
<div [ng2-highcharts]="chartData"></div> | ||
``` | ||
|
||
## Usage with ionic v2 ( vBeta.11 with ng2-highcharts v0.3.5) | ||
|
||
1. install the ionic CLI, `npm i -g ionic` | ||
2. Start a sample project, `ionic start myApp blank --v2` | ||
3. install highcharts and ng2-highcharts, `npm install highcharts ng2-highcharts --save` | ||
4. Add typings for highcharts, `typings install dt~highcharts --global --save` | ||
5. Import into `app/pages/home/home.ts`. | ||
|
||
```typescript | ||
import { Component } from '@angular/core'; | ||
import { NavController } from 'ionic-angular'; | ||
import { Ng2Highcharts } from 'ng2-highcharts'; | ||
@Component({ | ||
templateUrl: 'build/pages/home/home.html', | ||
directives: [Ng2Highcharts] | ||
}) | ||
export class HomePage { | ||
private chartData = { | ||
chart: { | ||
type: 'column' | ||
}, | ||
xAxis: { | ||
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | ||
}, | ||
series: [ | ||
{ | ||
name: 'NC', | ||
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2] | ||
}, { | ||
name: 'OK', | ||
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2] | ||
}, { | ||
name: 'KO', | ||
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'VALID', | ||
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'CHECK', | ||
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2] | ||
}, { | ||
name: 'COR', | ||
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2] | ||
} | ||
] | ||
}; | ||
constructor(public navCtrl: NavController) { | ||
|
||
} | ||
} | ||
``` | ||
|
||
6. Add chart to `app/pages/home/home.html` | ||
|
||
```html | ||
<ion-header> | ||
<ion-navbar> | ||
<ion-title> | ||
Ionic Blank | ||
</ion-title> | ||
</ion-navbar> | ||
</ion-header> | ||
We highly recomend the usage of a seed project or a generator. [Angular-seed](https://github.com/mgechev/angular-seed) and [Quickstart](https://github.com/angular/quickstart) are my favorite seeds and [Angular-Cli](https://cli.angular.io/) and [Ionic v2](https://ionicframework.com/) are my favorite generators, but you can use any one for your project. | ||
|
||
<ion-content padding> | ||
<div [ng2-highcharts]="chartData"></div> | ||
</ion-content> | ||
``` | ||
|
||
7. The hack step. Add the following 2 lines to top of `app/app.ts` so ionic can embed highcharts correctly to your bundle: | ||
|
||
```typescript | ||
import * as HC from 'highcharts'; | ||
window['Highcharts'] = HC; | ||
``` | ||
|
||
8. Run `ionic serve`, open browser. | ||
A running example on how to use this library can be found at [AngularShowcase](http://github.com/AngularShowcase/angular2-seed-ng2-highcharts) or [here](http://github.com/Bigous/angular2-seed-ng2-highcharts). | ||
|
||
More examples and detailed information on how to use the library, follow the [wiki](https://github.com/Bigous/ng2-highcharts/wiki) articles. | ||
|
||
## Changelog | ||
|
||
Look at [changelog page](CHANGELOG.md) | ||
To versions until v0.6.3 look at [changelog page](CHANGELOG.md). | ||
|
||
To posterior versions, look at [release page](https://github.com/Bigous/ng2-highcharts/releases). | ||
|
||
## Contributors | ||
|
||
|