Contents

Members
Methods
Events

Having trouble getting help?

Contact Support

ejDashboardViewer

Dashboard Viewer allows you to visualize the dashboard that was published in Dashboard Server or deployed in local physical path, opened through Dashboard Designer and run, navigating to specific URL in web browser. Certain options to widgets that have been enabled during design time like Maximize button, CSV, Excel & Image export options can be availed at run time through Dashboard Viewer. Also, you can export entire dashboard itself to image.

Syntax

$(element).ejDashboardViewer()

Example

<div id="container"></div> 
    <script> 
    // Create Dashboard 
    $('#container').ejDashboardViewer(); 
    </script>

Requires

module:jquery-1.10.2.min.js
module:jquery.easing.1.3.min.js
module:ej.dashboardViewer.all.min.js

Members

accessToken `string`

It holds the user token generated at Dashboard Server and it is used for embedding the dashboard which is available in Dashboard Server.

Default value

Example

$("#container").ejDashboardViewer({
     accessToken:""
     });

allowComment `boolean`

Adds a comment icon to Dashboard and also the Widgets in the Dashboard.

Default value

false

Example

$("#container").ejDashboardViewer({
     allowComment:true
     });

autoRefreshSettings `object`

The auto refresh allows you to configure the scheduled refreshing process of the dashboard. It is used to refresh the data, based on the specified time. Either the whole dashboard or specific widgets in the dashboard can be refreshed automatically.

autoRefreshSettings.tabName `string`

Specifies to refresh the given name of the dashboard.

Default value

null

Example

The following code snippet illustrates auto refreshing of tab name in multi-tabbed dashboard:

$("#container").ejDashboardViewer({  
       enableAutoRefresh:true,  
       autoRefreshSettings:[{
             tabName:"Worldwide Car Sales Random data"  // set dashboard name
             }]
     });

autoRefreshSettings.tabIndex `number`

Specifies to refresh the given tab index of the dashboard, and the default value 0 indicates the first tab of the dashboard.

Default value

Example

The following code snippet illustrates auto refreshing of tab index item in multi-tabbed dashboard:

$("#container").ejDashboardViewer({ 
       enableAutoRefresh:true,   
       autoRefreshSettings:[{
             tabIndex:1  // set dashboard tab index value, 1 indicates the second tab dashboard
             }]
     });

autoRefreshSettings.intervalSettings `object`

Specifies the time interval based on the mode type for auto refreshing of data. You can set the time interval settings by using the mode type(“Hourly, Daily, Weekly, Monthly, and Yearly”) and set the corresponding schedule settings depends on the mode type.

For hourlySchedule API : The dashboard or widget will be refreshed in the specified time interval in number of hours, minutes, and seconds. You can set the time interval value maximum of hours-99, minutes-999 and seconds-9999.

For DailySchedule API : The dashboard or widget will be refreshed in the specified number of days. If you specify 2 days once to refresh the dashboard or widget, then the data will be refreshed on 12PM at end of the total days.

For weeklySchedule API : The dashboard or widget will be refreshed in the given week days in the specified number of weeks. Week days value is arranged in this specific order [Sunday-Saturday —> 1-7] to refresh the data.

For monthlySchedule API : The dashboard or widget will be refreshed in the given day of the specified number of months. If you need to refresh the dashboard or widgets in the last day of [any] month, then set the day value as 32. The month value is arranged in this specific order [January-December —> 1-12] to refresh the data.

For yearlySchedule API: The dashboard or widget will be refreshed in the given day of the month in the specified number of years.

Default value

{}

Example

This example illustrates auto refresh interval settings for without multi tabbed dashboard:

Code snippet for hourlySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             intervalSettings: {
                        mode: "Hourly",                        
                        hourlySchedule: {
                            hours: 0,   // Default value is 0
                            minutes: 0, // Default value is 0
                            seconds: 30 // Default value is 30
                        }
             }
       }
     });

Code snippet for dailySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             intervalSettings: {
                        mode: "Daily",                        
                        dailySchedule: {
                            days: 1     // Default value is 1
                        }
             }
       }
     });

Code snippet for weeklySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             intervalSettings: {
                        mode: "Weekly",                        
                        weeklySchedule: {
                            weeks: 1,    // Default value is 1
                            weekDay: [1] // Default value is [1]
                        }
             }
       }
     });

Code snippet for monthlySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             intervalSettings: {
                        mode: "Monthly",                        
                        monthlySchedule: {
                            day: 1,     // Default value is 1
                            months: 1   // Default value is 1
                        }
             }
       }
     });

Code snippet for yearlySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             intervalSettings: {
                        mode: "Yearly",                        
                        yearlySchedule: {
                            years: 1,   // Default value is 1
                            day: 1,     // Default value is 1
                            month: 1    // Default value is 1
                        }
             }
       }
     });

This example illustrates auto refresh interval settings for multi-tabbed dashboard:

Code snippet for hourlySchedule, dailySchedule, weeklySchedule, monthlySchedule, and yearlySchedule API interval settings:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:[{
               tabName:Worldwide Car Sales Random data,
               tabIndex:0,
               intervalSettings: {
                        mode: "Hourly",                        
                        hourlySchedule: {
                            hours: 0,   // Default value is 0
                            minutes: 0, // Default value is 0
                            seconds: 30 // Default value is 30
                        }
             }
       },
       {
             tabName:Worldwide Car Sales Random data 1,
             tabIndex:1,
             intervalSettings: {
                        mode: "Daily",                        
                        dailySchedule: {
                            days: 1     // Default value is 1
                        }
             }
       },
       {
             tabName:Worldwide Car Sales Random data 2,
             tabIndex:2,
             intervalSettings: {
                        mode: "Weekly",                        
                        weeklySchedule: {
                            weeks: 1,    // Default value is 1
                            weekDay: [1] // Default value is [1]
                        }
             }
       },
       {
             tabName:Worldwide Car Sales Random data 3, 
             tabIndex:3,
             intervalSettings: {
                        mode: "Monthly",                        
                        monthlySchedule: {
                            day: 1,     // Default value is 1
                            months: 1   // Default value is 1
                        }
             }
       },   
       {
             tabName:Worldwide Car Sales Random data 4,
             tabIndex:4,
             intervalSettings: {
                        mode: "Yearly",                        
                        yearlySchedule: {
                            years: 1,   // Default value is 1
                            day: 1,     // Default value is 1
                            month: 1    // Default value is 1
                        }
             }
       }]     
     });

autoRefreshSettings.isWidgetSpecific `boolean`

Specifies to refresh the data of specific widgets alone in the viewer.

Default value

false

Example

Code snippet for auto refresh widget specific item in the without multi-tabbed dashboard.

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true,  
       autoRefreshSettings:{isWidgetSpecific:true}
     });

Code snippet for auto refresh widget specific item in the multi-tabbed dashboard.

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true,  
       autoRefreshSettings:[{
               tabName:Worldwide Car Sales Random data,
               tabIndex:0,      // 0 indicates the first tab dashboard
               isWidgetSpecific:true
               }]
     });

autoRefreshSettings.showWaitingIndicator `boolean`

Specifies to show the waiting indicator when the data is refreshed.

Default value

false

Example

The following code snippet for auto refresh shows waiting indicator item in the without multi-tabbed dashboard:

$("#container").ejDashboardViewer({   
       enableAutoRefresh:true,   
       autoRefreshSettings:{showWaitingIndicator:true}
     });

The following code snippet for auto refresh shows waiting indicator item in the multi-tabbed dashboard:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true,  
       autoRefreshSettings:[{
               tabName:Worldwide Car Sales Random data,
               tabIndex:0,      // 0 indicates the first tab dashboard
               showWaitingIndicator:true
               }]
     });

autoRefreshSettings.trackData `boolean`

Specifies whether to trigger refreshing process of data in the dashboard viewer when there is any modifications of data in the data source table.

Default value

false

Example

The following code snippet illustrates auto refreshing of track data item in without multi-tabbed dashboard:

$("#container").ejDashboardViewer({     
        enableAutoRefresh:true,
        autoRefreshSettings:{trackData:true}
     });

The following code snippet illustrates auto refreshing of track data item in multi-tabbed dashboard:

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true,  
       autoRefreshSettings:[{
               tabName:Worldwide Car Sales Random data,
               tabIndex:0,      // 0 indicates the first tab dashboard
               trackData:true
               }]
     });

autoRefreshSettings.widgets `array`

Specifies the widget collection that will refresh the data automatically. Set the id as dashboard widget’s Guid.

For DailySchedule API : The dashboard or widget will be refreshed in the specified number of days. If you set number of days as 2 to refresh the dashboard or widget, then the data will be refreshed on 12PM at end of the total days.

For monthlySchedule API : The dashboard or widget will be refreshed in the given day of the specified number of months. If you need to refresh the dashboard or widgets in the last day of [any]month, then set the day value as 32. The month value is arranged in this specific order [January-December —> 1-12] to refresh the data.

For yearlySchedule API: The dashboard or widget will be refreshed in the given day of the month in the specified number of years.

Default value

[]

Example

Example for auto refresh interval settings in the without multi tabbed dashboard:

To get the widget’s Guid, refer to getCurrentDashboardDetails

Code snippet for hourlySchedule API interval settings for widget specific data refresh.

$("#container").ejDashboardViewer({    
       enableAutoRefresh:true, 
       autoRefreshSettings:{
             isWidgetSpecific:true,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Hourly",                                          
                        hourlySchedule: {
                            hours: 0,   // Default value is 0
                            minutes: 0, // Default value is 0
                            seconds: 30 // Default value is 30
                        }
                    }
             }]
       }
     });

Code snippet for dailySchedule API interval settings for widget specific data refresh.

$("#container").ejDashboardViewer({   
       enableAutoRefresh:true,        
       autoRefreshSettings:{
             isWidgetSpecific:true,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                             mode:"Daily",
                             dailySchedule: {
                                days: 1 // Default value is 1
                        }
                     }
             }]
       }
     });

Code snippet for weeklySchedule API interval settings for widget specific data refresh.

$("#container").ejDashboardViewer({   
       enableAutoRefresh:true,   
       autoRefreshSettings:{
             isWidgetSpecific:true,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",         // set the Guid of the dashboard widget
                     intervalSettings:{
                             mode:"Weekly",
                             weeklySchedule: {
                                weeks: 1,       // Default value is 1
                                weekDay: [1]    // Default value is [1]
                        }
                     }
             }]
       }
     });

Code snippet for monthlySchedule API interval settings for widget specific data refresh.

$("#container").ejDashboardViewer({   
       enableAutoRefresh:true,   
       autoRefreshSettings:{
             isWidgetSpecific:true,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",           // set the Guid of the dashboard widget
                     intervalSettings:{
                             mode:"Monthly",
                             monthlySchedule: {
                                day: 1,     // Default value is 1
                                months: 1   // Default value is 1
                        }
                     }
             }]
       }
     });

Code snippet for yearlySchedule API interval settings for widget specific data refresh.

$("#container").ejDashboardViewer({   
       enableAutoRefresh:true,   
       autoRefreshSettings:{
             isWidgetSpecific:true,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",         // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Yearly",                        
                        yearlySchedule: {
                            years: 1,   // Default value is 1
                            day: 1,     // Default value is 1
                            month: 1    // Default value is 1
                        }
                     }
             }]
       }
     });

Example for auto refresh interval settings in multi tabbed dashboard:

The following code snippet illustrates hourlySchedule, dailySchedule, weeklySchedule, monthlySchedule, and yearlySchedule API interval settings:

$("#container").ejDashboardViewer({

       enableAutoRefresh:true, 
       autoRefreshSettings:[{
               tabName:Worldwide Car Sales Random data,
               tabIndex:0,
               widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Hourly",                        
                        hourlySchedule: {
                            hours: 0,   // Default value is 0
                            minutes: 0, // Default value is 0
                            seconds: 30 // Default value is 30
                        }
                     }
             },
             {
                     id:"937d0fa9-0eb1-4b43-8626-d4b8e0f5e625",      // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Daily",                        
                        dailySchedule: {
                            days: 1     // Default value is 1
                        }
                     }
             },
             {
                     id:"878d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Weekly",                        
                        weeklySchedule: {
                            weeks: 1,    // Default value is 1
                            weekDay: [1] // Default value is [1]
                        }
                     }
             }]               
       },
       {
             tabName:Worldwide Car Sales Random data 1,
             tabIndex:1,
             widgets:[{
                     id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Monthly",                        
                        monthlySchedule: {
                            day: 1,     // Default value is 1
                            months: 1   // Default value is 1
                        }
                     }
             },
             {
                     id:"932d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                     intervalSettings:{
                        mode: "Yearly",                        
                        yearlySchedule: {
                            years: 1,   // Default value is 1
                            day: 1,     // Default value is 1
                            month: 1    // Default value is 1
                        }
                     }
             }]                     
       }]     
     });

true

Example

$("#container").ejDashboardViewer({   
       enableClientSideCache:true
       cacheSettings:{enableAutoCleanup:false}
     });

canLoadDataOffline `boolean`

Specifies whether to load the offline data.

Default value

false

Example

$("#container").ejDashboardViewer({   
       canLoadDataOffline:false
     });

Example

$("#container").ejDashboardViewer({
     cssClass: "e-CustomTheme"
     });

customThemeSettings `string`

Used to customize the colors and fonts of dashboard based on given settings.

Default value

Example

$("#container").ejDashboardViewer({  
       enableCustomTheming:true,     
     customThemeSettings:ej.dashboardViewer.customTheme
     });

dashboardData `string`

Sets the layout information and all the widget data present in the current dashboard in the form of string.
To get dashboard data value, refer to getDashboardData

Default value

null

Example

var dashboardObj = $("#dashboard").data("ejDashboardViewer");

     $("#container").ejDashboardViewer({   
        dashboardData: dashboardObj.getDashboardData() // Get the complete information of the currently rendered dashboard
     });

dashboardParameterSettings `object`

dashboardParametersSettings API is used to update the dashboard parameter collection details in viewer. Using this we can modify the design time dashboard parameter settings in viewer.

dashboardParameterSettings.data `array`

List of dashboard parameter data collection will be available in the array (data). Dashboard Parameter list will be available in the array with data.

Default value

[]

Example

$("#dashboard").ejDashboardViewer(
		{
	            dashboardParameterSettings: {
                     "showIcon":true, // to show or hide the dashboard parameter icon
                     "data":[{                         
                         "parameterName":"CustomerId",                        
                         "showInParameterDialog":true,
                         "showInPromptDialog":false,
                         "value":"TRADH",                         
                         }]
                 },
        }
    );

dashboardParameterSettings.data.value

array

The value holds single or collection of parameter values, which replaces the default value collection in the parameter.

Default value

[]

Example

$("#dashboard").ejDashboardViewer(
		{
	            dashboardParameterSettings: {
                     "showIcon":true, // to show or hide the dashboard parameter icon
                     "data":[{                         
                         "parameterName":"CustomerId",                        
                         "showInParameterDialog":true,
                         "showInPromptDialog":false,
                         "value":["TRADH", "HANAR", "FALKO"],                         
                         }]
                 },
        }
    );

string

The value contains the relative date values as input to the parameter to filter the data with date range.

Default value

Example

$("#dashboard").ejDashboardViewer(
		{
	            dashboardParameterSettings: {
                     "showIcon":true, // to show or hide the dashboard parameter icon
                     "data":[{                         
                         "parameterName":"OrderDate",                        
                         "showInParameterDialog":true,
                         "showInPromptDialog":false,
                         "value":"Last 1 Week(s)",                         
                         }]
                 },
        }
    );

For example, if you configure Last 1 Week as filter, you will get the last 1 week data in that widget. After a week, it will show you the previous 1 week data from the date you are viewing. Through this, you will no longer required to set the filter statically and change week by week to see the previous week results.

The following are the different possibilities and use case on relative date values in the dashboard parameter value:

Range	Type	Examples
Current Previous Succeeding Last Next Past Upcoming	Year(s) Quarter(s) Month(s) Week(s) Day(s) Hour(s)	Current Year(s), Previous Month(s), Succeeding Week(s), Last 3 Quarter(s), Next 1 Year(s), Past 2 Week(s), Upcoming 1 Week, Tomorrow, Today, Yesterday
Year to date	-	Year to date
Quarter to date	-	Quarter to date
Month to date	-	Month to date
Week to date	-	Week to date

object

The value also holds the date values as input by representing the start and end dates.

Default value

{}

dashboardParameterSettings.data.value.start `string`

Start date holds the date value in the yyyy/MM/dd format from which the parameter can filter the data with respect to the date-time column assigned to, via the stored procedure data.

Default value

dashboardParameterSettings.data.value.end `string`

End date holds the date value in the yyyy/MM/dd format from which the parameter can filter the data with respect to the date-time column assigned to, via stored procedure data.

Default value

Example

$("#dashboard").ejDashboardViewer(
		{
	            dashboardParameterSettings: {
                     "showIcon":true, // to show or hide the dashboard parameter icon
                     "data":[{                         
                         "parameterName":"OrderDate",                        
                         "showInParameterDialog":true,
                         "showInPromptDialog":false,
                         "value": {"start" : "1996/09/21", "end" : "2018/02/13"},  // DateTime string should be in the format yyyy/MM/dd                
                         }]
                 },
        }
    );

dashboardParameterSettings.showIcon `boolean`

Used to set the dashboard parameter icon for the dashboard. If icon set in visible state, the dashboard parameter data information will be available in dashboard parameter dialog by clicking the dashboard parameter icon in the Dashboard Viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     dashboardParameterSettings:{showIcon:false}
     });

dashboardPath `string`

Sets the Dashboard file path (SYDX). This API can hold absolute path of SYDX file in disk or the URL of SYDX file hosted in a web server (This link should return the SYDX file as stream)

Default value

””

Example

$("#container").ejDashboardViewer({
     dashboardPath: "C:\\Documents\\Sample Dashboard.sydx"
     });

enableAutoRefresh `boolean`

Enables the refreshing of dashboard data on specific intervals automatically.

Default value

false

Example

$("#container").ejDashboardViewer({
     enableAutoRefresh:true
     });

enableClientSideCache `boolean`

Sets the caching of interaction data of Dashboard Viewer in browser.

Default value

false

Example

$("#container").ejDashboardViewer({
     enableClientSideCache:true
     });

enableCustomTheming `boolean`

Specifies whether to apply the custom theme to be applied to the dashboard.

Default value

false

Example

$("#container").ejDashboardViewer({
     enableCustomTheming:true
     });

enableDashboardScaling `boolean`

Specifies whether to render dashboard based on the scaling factor (resolution).

Default value

false

Example

$("#container").ejDashboardViewer({
     enableDashboardScaling:true
     });

enableFilterOverview `boolean`

Specifies whether to show the filter overview in Dashboard Viewer

Default value

true

Example

$("#container").ejDashboardViewer({
     enableFilterOverview:false
     });

enableServerSideCache `boolean`

Sets the caching of data in Dashboard Service.

Default value

false

Example

$("#container").ejDashboardViewer({
     enableServerSideCache:true
     });

enableViewData `boolean`

Specifies enable or disable the view data support in Dashboard Viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     enableViewData: false
     });

enableWidgetMode `boolean`

Specifies enable or disable the widget mode settings in Dashboard viewer.

Default value

false

Example

$("#container").ejDashboardViewer({
     enableWidgetMode:false
     });

Default value

Example

$("#container").ejDashboardViewer({
     filterOverviewSettings:{viewId:""}
     });

filterOverviewSettings.viewName `string`

Name of the saved filter view, this name will be displayed as title for the Applied filters list.

Default value

Example

$("#container").ejDashboardViewer({
     filterOverviewSettings:{viewName:""}
     });

filterPanelSettings `object`

Filter panel settings allows you to apply filters in the dashboard viewer.

filterPanelSettings.state `string`

Specifies to show or hide the filter panel when the state is expanded or collapsed. The size of the dashboard will adjust on its own when the filter panel gets opened/hidden in the viewer.

Default value

collapsed

Example

The following code snippet illustrates expanded state of filter panel while rendering the dashboard:

$("#container").ejDashboardViewer({
     filterPanelSettings:{state:expanded}   // expanded - show the filter panel while rendering the dashboard
     });

filterPanelSettings.filterPanelId `string`

Contains the id attribute of the external div, where the filter panel needs to be rendered.

Default value

Example

$("#container").ejDashboardViewer({
     filterPanelSettings:{filterPanelId:""}
     });

filterPanelSettings.showCloseIcon `boolean`

Enables or disables the filter panel close icon in the dashboard viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     filterPanelSettings:{showCloseIcon:true}
     });

filterPanelSettings.showHeader `boolean`

Enables or disables the filter panel header icon in the dashboard viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     filterPanelSettings:{showHeader:true}
     });

filterPanelSettings.showIcon `boolean`

Specifies whether to show or hide the filter panel toggle icon in the dashboard viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     filterPanelSettings:{showIcon:true}
     });

filterParameters `string`

Specifies the filter that has to be applied to the dashboard.

Default value

null

Example

$("#container").ejDashboardViewer({
     filterParameters: "Continent=Asia,Africa,Europe"
     });

interactionSettings `object`

Interaction settings contain history maintenance property to enable or disable history maintenance in the dashboard viewer.

interactionSettings.multiSelectionInterval `number`

The “multiSelectionInterval” property is used to set the time interval for performing multi selection in widgets filter of the dashboard viewer. The default value of this property is 500 milliseconds.

Default value

500

Example

$("#container").ejDashboardViewer({
     interactionSettings:{multiSelectionInterval:500} // Default values is 500
     });

interactionSettings.allowHistoryMaintenance `boolean`

This property Used to store the current state of the dashboard in browser session storage.

Default value

true

Example

$("#container").ejDashboardViewer({
     interactionSettings:{allowHistoryMaintenance:false}
     });

interactionSettings.handleHistoryEvent `boolean`

This property Used to restrict the browser back and forth button action.

Default value

true

Example

$("#container").ejDashboardViewer({
     interactionSettings:{handleHistoryEvent:false}
     });

Example

The following code snippet illustrates to specifies the localization server path:

$("#container").ejDashboardViewer({
     localeSettings:{resourcePath:"D:\Dashboard\Trunk\Samples\Common\Resources\"}
     });

The following code snippet illustrates to specifies the localization xml resource URL path:

$("#container").ejDashboardViewer({
     localeSettings:{resourcePath:"https://dashboardsdk.syncfusion.com//Resources//", culture:"en-US"}
     });

localeSettings.timeFormat `string`

It is used to convert the date value to given time format in dashboard viewer.

Default value

Example

$("#container").ejDashboardViewer({
     localeSettings:{timeFormat:"HH:MM:SS"}
     });

responsiveSettings `object`

Specifies the responsiveness of the dashboard viewer.

responsiveSettings.showExport `boolean`

Specifies whether to show or hide the Export icon in responsive settings.

Default value

false

Example

$("#container").ejDashboardViewer({
     responsiveSettings:{showExport:false}
     });

responsiveSettings.showMaximize `boolean`

Specifies whether to show or hide the maximize icon in responsive settings.

Default value

false

Example

$("#container").ejDashboardViewer({
     responsiveSettings:{showMaximize:false}
     });

scalingFactor `nullable<int>`

Sets the scaling factor, which helps to render dashboard based on the resolution given, only if enableDashboardScaling sets to true.

Default Value: null

Example

$("#container").ejDashboardViewer({
     scalingFactor: null
     });

selectedTabGuid `string`

Sets the guid that indicates the selected Guid dashboard while rendering multiple dashboards in viewer.

Default value

Example

$("#container").ejDashboardViewer({
     selectedTabGuid:""
     });

selectedTabIndex `number`

Sets a index value that indicates the selected index dashboard with the given index position while rendering multiple dashboards.

Default Value: 0

Example

$("#container").ejDashboardViewer({
     selectedTabIndex:0
     });

selectedTabName `string`

Sets the dashboard name that indicates the selected tab with the given selected dashboard while rendering multiple dashboards in viewer.

Default value

Example

$("#container").ejDashboardViewer({
     selectedTabName:""
     });

serviceUrl `string`

Sets the URL of the Dashboard Service that will be used for processing the viewed Dashboard file.

Default value

The default value of the URL is Empty.

””

Example

$("#container").ejDashboardViewer({
     serviceUrl:"http://localhost:[port]/service.svc"
     });

showGetLinkIcon `boolean`

Specifies whether to show or hide the Get Link icon in viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     showGetLinkIcon:true
     });

showTab `boolean`

Specifies whether to show or hide the tabs when using multiple dashboards in viewer.

Default value

true

Example

$("#container").ejDashboardViewer({
     showTab:true
     });

size `object`

Sets the height and width of the Dashboard Viewer.

size.height `string`

sets the Height of the Dashboard Viewer in % or in pixels.

Default Value

””

Parameters	Type	Description
id	string	Specifies the id of the master widget whose filter need to be removed from the dashboard.
widgetType	string	Specifies the master widget type such as combo box, chart etc.

Parameters	Type	Description
Widget/Dashboard Name	string	Denotes the name of the Dashboard/Widget.
filename	string	Denotes the export Excel Sheet title name.
fileType	string	Denotes the Excel file type such as XLSX or XLS.
hideProgress	bool	The bool value specifies to Show/hide the loading indicator.
isWholeDashboard	bool	The bool value(true/false) that specifies whether to export the whole dashboard or not.
dashboardCollection	array	Contain the collection of Multi tab in an array, that specifies which are the tab to be exported from the dashboard.

Parameters	Type	Description
controlId	string	Returns the name of the Control ID.
canAutoRefresh	boolean	Return the bool value that specifies whether to autorefresh the whole dashboard.

Parameters	Type	Description
viewName	string	Name of the Filter View
viewName	string	Unique ID of the Filter View

Parameters	Type	Description
tabId	string	Id of the tab to be updated
displayName	string	Updated name of the tab

Name	Type	Description
layoutData	array	It holds the information about the layout of the current Dashboard.
model	object	Holds the Dashboard Viewer Object.
tabId	string	Holds the current Dashboard tab id.
wrapperElement	array	Holds the wrapper element of the current Dashboard.
type	string	Returns the name of the event.

Name	Type	Description
data	object	Holds the information about the rendered widget.
model	object	Holds the Dashboard Viewer Object
tabId	string	Holds the current Dashboard tab Id
type	string	Returns the name of the event

Name	Type	Description
dataWidgetId	string	Holds the Id of the particular widget where the context menu is going to open.
menuData	array	Holds the information about the text to be displayed in the context menu
model	object	Holds the Dashboard Viewer's Object.
tabId	string	Holds the id of the current tab of the dashboard.
tabName	string	Holds the name of the current tab of the dashboard.
widgetId	string	Holds the Guid of the Widget.
widgetType	string	Holds the type of the widget on which the right click action is performed.
type	string	Returns the name of the event.

Name	Type	Description
model	object	Holds the Dashboard Viewer model set by the user.
setRequestHeader	void	This method is used for setting the custom header and its value. User can call this method n number of types to set the custom headers. If the given header key is already present in the custom header, then the value alone will be updated.
isHeaderPresent	bool	This method checks whether the given header key is already present in the custom header collection or not.
type	string	Returns the name of the event.

Name	Type	Description
iconsinformation	array	Holds the information about the list of icons to be rendered in the Dashboard.
dashboardPath	string	Holds the current dashboard path.
model	object	Holds the Dashboard Viewer's Object.
tabId	string	Holds the id of the current dashboard tab.
tabName	string	Holds the name of the current dashboard tab.
type	string	Returns the name of the event.

Name	Type	Description
dataSource	array	Holds the information about the widgets configured in the filter panel.
element	object	Holds the current event site UI element.
model	object	Holds the information about the dashboard viewer object.
type	string	Returns the name of the event.

Name	Type	Description
model	object	Returns the Dashboard Viewer model.
datasource	string	Returns the information about the widgets configured in the filter panel.
element	object	Returns the HTML element of DashboardViewer where the filter panel is rendered.
type	string	Returns the name of the event.

Name	Type	Description
errorDialog	string	Holds the HTML content of the Passive error dialog.
model	object	Holds the Dashboard Viewer's Object.
type	string	Returns the name of the event.

Name	Type	Description
data	array	Holds the information about the layout of the Dashboard and the widgets to be rendered.
hasFilterPanel	boolean	Indicates whether the filter panel is present in the dashboard or not.
model	object	Holds the Dashboard Viewer's object.
tabId	string	Holds the id of the current dashboard tab.
type	string	Returns the name of the event.

Name	Type	Description
model	object	Returns the Dashboard Viewer's object.
event	string	Returns the current click event information.
headerText	string	Contains the title of the Dashboard.
name	string	Contains the name of the icon clicked.
target	array	Contains the parent element of the selected icon.
dashboardPath	string	Contains the path of the dashboard file.
tabId	string	Returns the tab id with the given dashboard tab as active.
tabName	string	Returns the tab name with the given dashboard tab as active.
type	string	Returns the name of the event.

Name	Type	Description
args	object	Holds the information about the selected menu item.
reportPath	string	Holds the path of the dashboard file.
dataWidgetId	string	Holds the id of the widget where the menu icon is clicked.
headerText	string	Holds the title of the widget where the menu icon is clicked.
widgetId	string	Holds the guid of the widget where the menu item is selected.
model	object	Holds the Dashboard Viewer's object.
menuItem	object	Holds the DOM element of the selected menu item.
tabId	string	Returns the tab id with the given dashboard tab as active.
tabName	string	Returns the tab name with the given dashboard tab as active.
type	string	Returns the name of the event.

ejDashboardViewer

Syntax

Example

Requires

Members

accessToken string

Default value

Example

allowComment boolean

Default value

Example

autoRefreshSettings object

autoRefreshSettings.tabName string

Default value

Example

autoRefreshSettings.tabIndex number

Default value

Example

autoRefreshSettings.intervalSettings object

Default value

Example

autoRefreshSettings.isWidgetSpecific boolean

Default value

Example

autoRefreshSettings.showWaitingIndicator boolean

Default value

Example

autoRefreshSettings.trackData boolean

Default value

Example

autoRefreshSettings.widgets array

Default value

Example

cacheSettings object

cacheSettings.capacity number

Default value

Example

cacheSettings.cleanupInterval number

Default value

Example

cacheSettings.enableAutoCleanup boolean

Default value

Example

canLoadDataOffline boolean

Default value

Example

commentSettings object

commentSettings.isDashboardCommented boolean

Default value

Example

commentSettings.isWidgetCommented boolean

Default value

Example

commentSettings.widgets array

Default value

Example

cssClass string

Default value

Example

customThemeSettings string

Default value

Example

dashboardData string

Default value

Example

dashboardParameterSettings object

dashboardParameterSettings.data array

Default value

Example

dashboardParameterSettings.data.value

Default value

Example

Default value

Example

Default value

dashboardParameterSettings.data.value.start string

Default value

dashboardParameterSettings.data.value.end string

Default value

Example

accessToken `string`

allowComment `boolean`

autoRefreshSettings `object`

autoRefreshSettings.tabName `string`

autoRefreshSettings.tabIndex `number`

autoRefreshSettings.intervalSettings `object`

autoRefreshSettings.isWidgetSpecific `boolean`

autoRefreshSettings.showWaitingIndicator `boolean`

autoRefreshSettings.trackData `boolean`

autoRefreshSettings.widgets `array`

cacheSettings `object`

cacheSettings.capacity `number`

cacheSettings.cleanupInterval `number`

cacheSettings.enableAutoCleanup `boolean`

canLoadDataOffline `boolean`

commentSettings `object`

commentSettings.isDashboardCommented `boolean`

commentSettings.isWidgetCommented `boolean`

commentSettings.widgets `array`

cssClass `string`

customThemeSettings `string`

dashboardData `string`

dashboardParameterSettings `object`

dashboardParameterSettings.data `array`

dashboardParameterSettings.data.value.start `string`

dashboardParameterSettings.data.value.end `string`

dashboardParameterSettings.showIcon `boolean`

dashboardPath `string`

enableAutoRefresh `boolean`

enableClientSideCache `boolean`

enableCustomTheming `boolean`

enableDashboardScaling `boolean`

enableFilterOverview `boolean`

enableServerSideCache `boolean`

enableViewData `boolean`

enableWidgetMode `boolean`

favoriteSettings `object`

favoriteSettings.enabled `boolean`

favoriteSettings.isFavorite `boolean`

filterOverviewSettings `object`

filterOverviewSettings.showSaveAsIcon `boolean`

filterOverviewSettings.showSaveIcon `boolean`

filterOverviewSettings.showViewSavedFilterIcon `boolean`

filterOverviewSettings.viewId `string`

filterOverviewSettings.viewName `string`

filterPanelSettings `object`

filterPanelSettings.state `string`

filterPanelSettings.filterPanelId `string`

filterPanelSettings.showCloseIcon `boolean`

filterPanelSettings.showHeader `boolean`

filterPanelSettings.showIcon `boolean`

filterParameters `string`