We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use ejChart with angular JS?

Platform: JavaScript |
Control: ejChart |
Published Date: May 14, 2015 |
Last Revised Date: July 1, 2019

Essential 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:

HTML text box by using Angular JS

Figure: Chart bounded with HTML controls using angular JS

 

JS Playground sample link: Angular binding

ADD COMMENT
You must log in to leave a comment
Comments
Matthias Max
Dec 07, 2015
This info is just useless without data binding ! Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon