ZingChart AngularJS Component wrapper to allow native AngularJS syntax for javascript charts, chart events, chart methods and chart styling.
npm install zingchart-angularjs




Quickly add charts to your Angular application with our ZingChart component
This guide assumes some basic working knowledge of Angular and its Object Oriented interface.
---
An AngularJS directive for ZingChart to make your charts work dynamically with your data.
#### Check out our getting started page for examples! (http://zingchart.github.io/ZingChart-AngularJS)
#### Fully detailed blog post @ (http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/)
* Install
* Usage
* FAQ
* Options
Install the directive using one of the following options:
Bower
```
bower install zingchart-angularjs
NPM
``
npm install zingchart-angularjs
Download
https://github.com/zingchart/ZingChart-AngularJS/archive/master.zip
Step 1 : Include the following dependencies into your HTML file
``
Step 2 :Inject the directive into your application
``
angular.module('myApp', ['zingchart-angularjs']);
Step 3 : Insert the ZingChart-AngularJS directive into your application
As an element
`html`
or
As an attribute
`html`
Step 4 : Configure your chart through a scope variable
``
...
$scope.myJson = {
type : 'line',
series : [
{ values : [54,23,34,23,43] },
{ values : [10,15,16,20,40] }
]
};
...
> How do I make my charts responsive?
Background
ZingChart internally attaches itself to the element that is specified in the render function, and continues to build children elements inside. In this Angular directives case, it will attach itself to either :
* The Since the element How to We reccomended using the attribute binding syntax on a div to automatically inherit the Example : If no id is specified, the id will be autogenerated in the form of --- Either a single-dimensional or multi-dimensional array containing the values to be charted. Must be an Angular scope variable to bind to the directive Overrides the series values in the zc-render and zc-data objects. This parameter simulates the values parameter in each series object in a ZingChart json. ##### Example: //.html --- A ZingChart configuration object. Must be an Angular scope variable to bind to the directive. This is the same object you would use to configure a chart using zingchart.render.data. It is a pseudo-parent object of zc-values. The directive performs a deep-watch on the object for any changes, and stringifies the result as JSON to be rendered to ZingChart. More information : http://www.zingchart.com/docs/json-attributes-syntax/ ##### Example: //.html --- A ZingChart render object. This is the same object you would use to configure a chart using zingchart.render. You can change the render type, add events, and change other zingchart properties in here. Acts like a pseudo-parent of zc-values and zc-data. zc-render's properties will be overwritten if zc-values and zc-data are defined. More information : http://www.zingchart.com/docs/reference/zingchart-object/#zingchart__render Note: This object will not be watched inside the directive. It is a one-time setup. While you can insert your data values into the render object directly, it is encouraged to use the zc-values attribute to enable dynamic updating. ##### Example: //.html --- Will override the height inside of a zc-render object if defined. --- Will override the width inside of a zc-render object if defined. --- Will override the render type inside of a zc-render and zc-data object if defined. if the element binding syntax is used
* The if the zingchart attribute binding syntax is used.zingchart is not a valid HTML element, the browser will not assign css attributes to the element where as a div has inherit properties such as display:block.display:block CSS attribute. You will also need to apply a value of 100% to the zc-height and zc-width attributes. ```Options
The ZingChart Component takes the following attributes:$3
The id for the DOM element for ZingChart to attach to.
##### Example:html`zingchart-auto-#`$3
default : null``js`
//ZingChart json example
data:{
series : [
{'values' : [45,43,26]},
{'values' : [0,1,5,3]}
]
}`
The directive takes care of the work so you don't have to create this objectjs`
//.js
$scope.myData = [0,2,2,3,3,4];
$scope.myData2 = [[45,43,26],[0,1,5,3]];`$3
default : null``
http://jsfiddle.net/mschultz/tne7uuq0/js`
//.js
$scope.myValues = [[0,2,3,4],[9,6,4,3]];
$scope.myObj = {
series:[
{
lineColor:"#900000",
marker:{
backgroundColor:"#dc3737",
borderWidth:1,
shadow:0,
borderColor:"#f56b6b"
}
},
{
lineColor:"#efe634",
marker:{
backgroundColor:"#fff41f",
borderWidth:1,
shadow:0,
borderColor:"#fdffc0"
}
},
]
};graphset
Note: You can add series values into this object like you normally would while using ZingChart. However if you define the directives zc-values parameter, those values will override the "values" inside of your zc-data object. This only works when the parameter is ommitted from your zc-json object. It was a design decision to simplify zc-values to target the first object in a graphset, rather than allowing the users to specify which object to target. If you do need the graphset parameter in zingchart, then simply use the zc-json object alone.`$3
default : null``js`
//.js
$scope.myValues = [0,1,2];
$scope.myRender = {
output :'canvas',
events: {
complete : function(p) {...}
}
};`$3
default : 400``
#####Example:html`
//.html`$3
default : 600``
##### Example:html`
//.html`$3
default : line``
##### Example:html``
//.html