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 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
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
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
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>or
As an attribute
<div zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></div>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
<zingchart>if the element binding syntax is used - The
<div>if thezingchartattribute 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 :
<div zingchart id="chart-1" zc-width="100%" zc-height="100%"></div>
The ZingChart Component takes the following attributes:
The id for the DOM element for ZingChart to attach to.
<zingchart id="chart-1"></zingchart>If no id is specified, the id will be autogenerated in the form of zingchart-auto-#
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.
//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
//.js
$scope.myData = [0,2,2,3,3,4];
$scope.myData2 = [[45,43,26],[0,1,5,3]];
//.html
<zingchart id="chart-1" zc-values="myData"></zingchart>
<zingchart id="chart-2" zc-values="myData2"></zingchart>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/
http://jsfiddle.net/mschultz/tne7uuq0/
//.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
<zingchart id="chart-1" zc-values="myValues" zc-json="myObj"></zingchart>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.
Sets the license key to remove the watermark from the chart.
//.html
<zingchart id="chart-1" zc-license="zcLicense"/zingchart>//.js
app.controller('MainController', function ($scope) {
$scope.zcLicense = ['<your license key here>'];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.
//.js
$scope.myValues = [0,1,2];
$scope.myRender = {
output :'canvas',
events: {
complete : function(p) {...}
}
};
//.html
<zingchart id="chart-1" zc-render="myRender" zc-values="myValues"></zingchart>default : 400
Will override the height inside of a zc-render object if defined. #####Example:
//.html
<zingchart id="chart-1" zc-height="500"></zingchart>default : 600
Will override the width inside of a zc-render object if defined.
//.html
<zingchart id="chart-1" zc-width="500"></zingchart>default : line
Will override the render type inside of a zc-render and zc-data object if defined.
//.html
<zingchart id="chart-1" zc-type="bar"/zingchart>