zingchart-angularjs

if the zingchart attribute binding syntax is used.

Since the element 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.

How to

We reccomended using the attribute binding syntax on a div to automatically inherit the display:block CSS attribute. You will also need to apply a value of 100% to the zc-height and zc-width attributes.

Example :

`



`

Options

The ZingChart Component takes the following attributes:

$3

The id for the DOM element for ZingChart to attach to.
##### Example:
`html

`

If no id is specified, the id will be autogenerated in the form of zingchart-auto-#

---




$3


`default : null`

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.
`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 object

##### Example:
`js
//.js
$scope.myData = [0,2,2,3,3,4];
$scope.myData2 = [[45,43,26],[0,1,5,3]];

//.html


`

---




$3


`default : null`

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:
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"
}
},
]
};

//.html

`
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 graphset 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`

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:
`js
//.js
$scope.myValues = [0,1,2];
$scope.myRender = {
output :'canvas',
events: {
complete : function(p) {...}
}
};

//.html

`

---




$3


`default : 400`

Will override the height inside of a zc-render object if defined.
#####Example:
`html
//.html

`

---




$3


`default : 600`

Will override the width inside of a zc-render object if defined.
##### Example:
`html
//.html

`

---




$3


`default : line`

Will override the render type inside of a zc-render and zc-data object if defined.
##### Example:
`html
//.html

``