Skip to content

Commit

Permalink
docs(Readme): Rewriten
Browse files Browse the repository at this point in the history
Added more links and removed the volatile information from it.
  • Loading branch information
Bigous committed Jan 6, 2017
1 parent fe75e8b commit e6e5746
Showing 1 changed file with 8 additions and 141 deletions.
149 changes: 8 additions & 141 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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

Expand Down

0 comments on commit e6e5746

Please sign in to comment.