AngularJs

You can view the full component on GitHub.

Basic

Render AngularJs charts simply by adding a ZingChart configuration object as a scope variable.

Customizable

Charts can be extensively customized with the ZingChart library.

Data Binding

Utilize the power of AngularJS by allowing the directive to watch for changes to the configuration and the values of the chart, and dynamically update.

Fully Capable

The directive is simply a wrapper around ZingChart allowing users to have full capabilities of the library.

Maps

Maps can easily be rendered utilizing the ZingChart library

Responsive

Allow ZingChart to resize dynamically to the full width and height of its parent. Drag the bottom right hand corner to see the responsiveness.

AJAX / Real-time

Fetch new data using AJAX, change the scope variable, and automatically update the chart!

Integrate ZingChart into your AngularJS application.

Directive

Simple to use AngularJS's directive syntax is available as either:
An element: <zingchart></zingchart>
OR
An attribute: <div zingchart></div>
For basic charts, just add data!

Feature Complete

The directive simply adds dynamic data-binding to your configuration object and/or data. No extra syntax, only the ZingChart syntax you know and love. This allows users to access all features provided by the main ZingChart library

Data-Binding

Utilize AngularJS's two-way data-binding by allowing this directive to watch for changes. The directive can be set up to watch for the chart's data values, or even chart configuration attributes.

Usage

1. Include the following dependencies into your HTML file

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
   <script src="http://cdn.zingchart.com/zingchart.min.js"></script>
   <script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>

2. Inject the directive into your application

   angular.module('myApp', [ 'zingchart-angularjs' ]);

3. Insert the ZingChart-AngularJS directive into your HTML

   <zingchart id="myChart" zc-json="myJson" zc-height="500" zc-width="600"></zingchart>

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

5. Try!

License

Adding your license key to your AngularJS application is slightly different than with the standard ZingChart library.

In your template, add zc-license="zcLicense". Then, in your script, add your license key.

<div ng-controller="MainController">
  <zingchart id="chart-1" zc-values="myValues" zc-json="myObj" zc-license="zcLicense"></zingchart>
</div>

app.controller('MainController', function ($scope) {
  $scope.zcLicense = ['<your license here>'];

Next Steps

Need to squeeze out performance? Want to learn more about its other features?

To read more about ZingChart and AngularJS, check out our GitHub and View our Blog Post.