Looking for examples of JavaScript charts implemented in AngularJS? The ZingChart team has assembled several demos of interactive charts made with the ZingChart-AngularJS directive.
By viewing these chart examples, you can learn how to take advantage of AngularJS’s two-way data binding and ZingChart’s easy-to-use syntax. Then, include rich, interactive charts in your AngularJS dashboards and applications.
AngularJS Chart Examples
Before we show you the examples, we think it is a good idea to show you how easy it is to get started with the ZingChart-AngularJS directive. Or, you can skip to the demos.
Setting Up Interactive AngularJS Charts
Include the following dependencies in your HTML file
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" ></script>
<script src = "https://cdn.zingchart.com/zingchart.min.js" ></script>
<script src = "https://cdn.zingchart.com/angular/zingchart-angularjs.js" ></script>Inject the directive into your application
angular.module ( 'myApp' , [ 'zingchart-angularjs' ]);Insert the ZingChart-AngularJS directive into your HTML
<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>Configure your chart through a scope variable
$scope.myJson = {
type : 'line' ,
series : [
{ values : [ 54 , 23 , 34 , 23 , 43 ] },
{ values : [ 10 , 15 , 16 , 20 , 40 ] }
]
};Live AngularJS Chart Examples
Simple Pie Chart
Using AngularJS shouldn’t mean compromising on features. So by adding a wrapper around ZingChart, you can access all the capabilities.
Here is a simple example of the wrapper:
Data-binding in Action
The directive watches for changes to the chart configurations and values, and then dynamically updates.
Try it by adding random values with the append button, or by changing the title text in this demo:
Responsive AngularJS Charts
ZingChart works well with responsive websites simply by setting zc-height and zc-width to 100%. ZingChart will automatically expand to it’s parent HTML element. Whenever the parent element’s dimensions change, ZingChart will adapt to it and re-render the chart as well.
Drag the bottom right hand corner of this chart to see the responsive option when using the ZingChart-AngularJS directive:
Conclusion
Hopefully, this takes some of the technical load off you as you proceed to add AngularJS charts to your projects. To make things even easier, we have three places for you to go next:
