Quickstart Guide

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

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

Quick Start

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] }
    ]
};
...

##FAQ

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 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 :

<div zingchart id="chart-1" zc-width="100%" zc-height="100%"></div>

Options

The ZingChart Component takes the following attributes:

id [string] (optional)

The id for the DOM element for ZingChart to attach to.

Example:

<zingchart id="chart-1"></zingchart>

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

zc-values [array] (optional)

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

Example:

//.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>

zc-json [object] (optional)

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
$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.

zc-render [object] (optional)

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
$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>

zc-height [number] (optional)

default : 400

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

//.html
<zingchart id="chart-1" zc-height="500"></zingchart>

zc-width [number] (optional)

default : 600

Will override the width inside of a zc-render object if defined.

Example:

//.html
<zingchart id="chart-1" zc-width="500"></zingchart>

zc-type [string] (optional)

default : line

Will override the render type inside of a zc-render and zc-data object if defined.

Example:

//.html
<zingchart id="chart-1" zc-type="bar"/zingchart>