Skip to content

Commit 62c1829

Browse files
committed
Simplified README to reflect getting started page
1 parent 1881e9a commit 62c1829

1 file changed

Lines changed: 48 additions & 13 deletions

File tree

README.md

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
---
44
An AngularJS directive for ZingChart to make your charts work dynamically with your data.
55

6-
#### Try out our demo! http://zingchart.github.io/ZingChart-AngularJS
7-
#### Full blog post @ http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/
6+
#### Check out our getting started page! (http://zingchart.github.io/ZingChart-AngularJS)
7+
#### Fully detailed blog post @ (http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/)
88

99
* [Install](#install)
1010
* [Usage](#usage)
@@ -14,35 +14,70 @@ An AngularJS directive for ZingChart to make your charts work dynamically with y
1414

1515
<a id="install"></a>
1616
## Install
17+
18+
Install the directive using one of the following options:
19+
20+
**Bower**
21+
1722
```
1823
bower install zingchart-angularjs
1924
```
2025

21-
Inject into your app...
26+
**NPM**
2227

23-
```js
24-
var app = angular.module('myApp', ['zingchart-angularjs']);
2528
```
29+
npm install zingchart-angularjs
30+
```
31+
32+
**Download**
33+
34+
[https://github.com/zingchart/ZingChart-AngularJS/archive/master.zip](https://github.com/zingchart/ZingChart-AngularJS/archive/master.zip)
2635

2736
<a id="usage"></a>
28-
## Usage
29-
**_javascript_**
37+
## Quick Start
38+
39+
**Step 1 : Include the following dependencies into your HTML file**
3040

31-
```js
32-
//In an Angular Controller
33-
$scope.myValues = [5,6,3,2,3];
41+
```
42+
<script type="text/javascript" src="angular.min.js"></script>
43+
<script type="text/javascript" src="zingchart.min.js"></script>
44+
<script type="text/javascript" src="zingchart-angularjs.js"></script>
3445
```
3546

36-
**_markup_**
47+
**Step 2 :Inject the directive into your application**
48+
49+
```
50+
angular.module('myApp', ['zingchart-angularjs']);
51+
```
52+
53+
**Step 3 : Insert the ZingChart-AngularJS directive into your application**
54+
55+
*As an element*
3756

3857
```html
39-
<zingchart id="chart-1" zc-values="myValues"></zingchart>
58+
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
4059
```
4160

4261
or
4362

63+
*As an attribute*
64+
4465
```html
45-
<div zingchart id="chart-1" zc-values="myValues"></div>
66+
<div zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></div>
67+
```
68+
69+
**Step 4 : Configure your chart through a scope variable**
70+
71+
```
72+
...
73+
$scope.myJson = {
74+
type : 'line',
75+
series : [
76+
{ values : [54,23,34,23,43] },
77+
{ values : [10,15,16,20,40] }
78+
]
79+
};
80+
...
4681
```
4782

4883

0 commit comments

Comments
 (0)