Overview

Syncfusion Dashboard Platform SDK includes AngularJS directives within the ej.widget.angular.min.js script file. All these directives have been encapsulated into a single module called ejangular.

Getting Started with DashboardViewer in AngularJS Application

To get start with the DashboardViewer control in AngularJS Framework, the following list of external dependencies are mandatory.

The required AngularJS script files such as angular.min.js and ej.widget.angular.min.js can be referred from the below CDN links:

These files can also be accessed from the following installed location.

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\JavaScript\ng1 app

Preparing HTML document

Create a new folder named angular1 app.

Create a new HTML file say dashboardviewer.html inside angular1 app folder and include the below initial code.

  • HTML
    • <!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head> 
       <meta charset="utf-8" />
      <title> </title>
     <!--  Script & css reference -->
  </head> 
  <body>
       <!-- Place div element to create DashboardViewer --> 
       <script> 
            <!-- Add your custom scripts here --> 
       </script>
  </body>
</html>

    Adding Script and CSS references

    Add the scripts and CSS references in the order mentioned in the following code example.

  • HTML
    • <!DOCTYPE html> 
<html ng-app="DashboardCtrl">
<head>
    <title>DashboardViewer Angular1 Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
    <link href="https://cdn.syncfusion.com/3.1.x.x/css/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script> 
    <script src="https://cdn.syncfusion.com/3.1.x.x/js/ej.dashboardViewer.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/15.1.0.41/js/common/ej.widget.angular.min.js" type="text/javascript"></script>

  <style>

 body, html, #dashboard {
      overflow: hidden! Important;
      height: 100%;
      width: 100%;
  }

  </style>
</head>
<body ng-controller="DashboardViewerCtrl" > 

<!-- place div elements to create DashboardViewer -->
</script>
<!--Add custom scripts here --> 
</script>
</body>
</html>

    Control Initialization

    Initialize DashboardViewer control inside div element using ej-dashboardviewer AngularJS directive. Its properties can be defined using e-prefix followed by the property name (For example, e-serviceUrl).

  • HTML
    • <!--Place div element to create DashboardViewer-->
        <div>
            <div id="dashboard" ej-dashboardviewer e-serviceUrl="https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc" e-dashboardPath="https://dashboardsdk.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx" >
            </div>
        </div>

    NOTE

    Provided online Dashboard Service URL and Dashboard Path are for demo purpose.
    Make sure the given dashboard path should be accessible with the given Dashboard Service URL.

    Declare dependency for ejangular module within your AngularJS application through adding the following script code.

  • JS
    • <!--Add custom scripts here -->
 <script>
           angular.module('DashboardCtrl', ['ejangular'])
             .controller('DashboardViewerCtrl', function ($scope) {	     
             });
 </script>

    Binding Dashboard Service

    To initiate the dashboard service instance you can follow anyone of the below methods

    1. Hosting Dashboard Service in IIS

    2. Hosting Dashboard Service in IIS Express

    3. Hosting Dashboard Service as Windows Service Background Process

    IMPORTANT

    Hosting dashboard service at IIS is recommended for the production environment for object management and other memory management features.

    On running the application, dashboard will be rendered like below.

    Angular output

    Two Way Binding

    When a widget model (ng-model) attribute is bound to a scope variable, it can reflect the changes in both ways (i.e. can change the value of the variable and as well display the value of the variable).

  • HTML
    • <!DOCTYPE html> <html ng-app="DashboardCtrl">
 <head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" /> 
<!--  Script & css reference -->
<style>

 body, html, #dashboard {
      overflow: hidden! Important;
      height: 100%;
      width: 100%;
  }
 body {
      background-image: url("../common-images/images/right side BG texture.png")!important;
 }  
 .row .cols-prop-area {
      height: 100px !important;
      min-height: 406px;
      width: 24.9146%;
 }

 </style>

</head>
<body style="height: 100%; width: 100%;” ng-controller="DashboardViewerCtrl">
    <div class="content-container-fluid" style="height: 100%; width: 100%;" >
    <div class="row" style="height: 100%; width: 100%;" >
    <div class="cols-sample-area" style="height: 100%; width: 73.5%; float: left;" >
    <div style="height: 100%; width: 100%;” id="dashboard” ej-dashboardviewer e-serviceUrl="url" e-dashboardPath="dashboardPath" e-size-width="955" e-size-height="587" >
   </div>
   </div>
        <div id="sampleProperties" >
        <div class="prop-grid">
	 <b>Dashboards:</b>
	 <br/>
            <div class="row">
            <div class="col-md-6">
            Change Dashboard
            </div>
            <div class="col-md-5 aligntop">
            <select ng-model="dashboardPath" data-ng-options="a.value as a.name for  a in dashboards">                
           </select>									 	
            </div>
	    </div>
	    </div>	
        </div>
   </div>
   </div>
   <script>
           angular.module('DashboardCtrl', ['ejangular'])
          .controller('DashboardViewerCtrl', function ($scope) 
           {
             $scope.dashboardPath="https://dashboardsdk.syncfusion.com:3011//Dashboards//WorldWideCarSalesDashboard.sydx";
             $scope.url="https://dashboardsdk.syncfusion.com:3011/DashboardService/DashboardService.svc";
             $scope. Dashboards =
                 [
                   { id: 1, value: "https://dashboardsdk.syncfusion.com:3011//Dashboards//Northwind Website Analysis.sydx", name: "WebSite Dashboard" },
                   { id: 2, value: "https://dashboardsdk.syncfusion.com:3011//Dashboards//Northwind Products and Suppliers.sydx", name: "Suppliers Dashboard" },
                   { id: 3, value: "https://dashboardsdk.syncfusion.com:3011//Dashboards//Northwind Traders Sales Analysis.sydx", name: "Traders Dashboard" },
                   { id: 4, value: "https://dashboardsdk.syncfusion.com:3011//Dashboards//NorthWind Product Details.sydx", name: "Product Dashboard" },
                   { id: 5, value: "https://dashboardsdk.syncfusion.com:3011//Dashboards//WorldWideCarSalesDashboard.sydx", name: "CarSales Dashboard" }
               ];
          });
	  $("#sampleProperties").ejPropertiesPanel();
    </script>
</body>
</html>

    The following properties of ejDashboardViewer control supports model binding.

    • serviceUrl
    • dashboardPath