An AngularJS directive to allow ZingChart to work dynamically with data.
Basic
Render 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 capabilites 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!
Directive
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.
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>
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!