Show Nav

AngularJs Charts

ZingChart-AngularJS is an AngularJS directive to allow ZingChart to work dynamically with data.

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 Angular 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 it's parent. Drag the bottom right hand corner to see the responsiveness.

AJAX / Real-time

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

Integrate ZingChart into your AngularJS application.

AngularJS Logo

Directive

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

Checklist icon

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 icon

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
  2. <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>
  3. Inject the directive into your application
  4. angular.module('myApp', ['zingchart-angularjs']);
  5. Insert the ZingChart-AngularJS directive into your HTML
  6. <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
  7. Configure your chart through a scope variable
  8. ...
    $scope.myJson = {
        type : 'line',
        series : [
          { values : [54,23,34,23,43] },
          { values : [10,15,16,20,40] }
        ]
    };
    ...
  9. Try!

Next Steps

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

View our README on GitHub Read Our Blog Post