33---
44An 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```
1823bower 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
4261or
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