How to use ejChart with angular JS?
StSJaEssential Chart supports two-way binding by using angular JS plugin. All the properties in the chart can be bound with HTML elements. Essential Chart requires the JavaScript file ej.widget.angular.min.js to support angular JavaScript. Refer to Common Angular Binding for more information on using angular JS with Essential JavaScript controls.
Required scripts
The CDN link for the scripts required is shown in the following table:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script> <script src="http://cdn.syncfusion.com/12.4/js/web/ej.web.all.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script> <script src="http://cdn.syncfusion.com/js/ej.widget.angular-latest.min.js"></script>
The following code example illustrates the use of Essential Chart with angular JS. Note that it is mandatory to use the module, ejangular, and the directive, ej-chart, for rendering the Essential Chart because the directive, ej-chart, is used to render the Chart inside the container and this directive is present only in the ejangular module.
All the properties in the Chart can be bound with another control by using angular JS. The property name should be prefixed with e- to support one-way or two-way bindings; otherwise, the angular binding does not work on that property.
JS
<div ng-app="syncApp" ng-controller="angularChart">
<div id="container" ej-chart style="width: 60%; float: left;"
e-legend-title-text="nLegendTitle"
e-commonseriesoptions-marker-visible="true"
e-commonseriesoptions-marker-fill="green"
e-commonseriesoptions-marker-border-color="black"
e-commonseriesoptions-marker-size-width="15"
e-commonseriesoptions-marker-size-height="15"
e-commonseriesoptions-marker-shape="nMarkerShape"
e-primaryxaxis-title-text="nXAxisTitle"
e-primaryyaxis-title-text="nYAxisTitle"
e-primaryxaxis-labelformat="nXAxisFormat"
e-primaryyaxis-labelformat="nYAxisFormat"
e-title-text="nTitle">
</div>
<div>
<div style="height: 30px;">Marker Shape<input ng-model="nMarkerShape" />
</div>
<br />
<div style="height: 30px;">Chart title
<input ng-model="nTitle" />
</div>
<br />
<div style="height: 30px;">X Axis title
<input ng-model="nXAxisTitle" />
</div>
<br />
<div style="height: 30px;">Y Axis title
<input ng-model="nYAxisTitle" />
</div>
<br />
<div style="height: 30px;">X Axis label format
<input ng-model="nXAxisFormat" />
</div>
<br />
<div style="height: 30px;">Y Axis label format
<input ng-model="nYAxisFormat" />
</div>
<br />
<div style="height: 30px;">Legend title
<input ng-model="nLegendTitle" />
</div>
</div>
</div>
<script type="text/javascript">
angular.module('syncApp', ['ejangular'])
.controller('angularChart', function ($scope) {
$scope.nMarkerShape = "Hexagon"
$scope.nTitle = "Angular Support";
$scope.nLegendTitle = "Legend title";
$scope.nXAxisTitle = 'Primary X Axis';
$scope.nYAxisTitle = 'Primary Y Axis';
$scope.nXAxisFormat = "n2";
$scope.nYAxisFormat = "c2";
});
</script>
Sample Links:
For using Essential Chart with angular JS: Angular Binding
The following screenshot shows different properties in the Chart bound with HTML text box by using Angular JS:
Figure: Chart bounded with HTML controls using angular JS
JS Playground sample link: Angular binding
Conclusion
I hope you enjoyed learning about how to use ejChart with angular JS.
You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
