add gauges

CS/AspNetMvcDashboardApp/App_Data/Dashboards/dashboard1.xml

@@ -68,12 +68,33 @@
         <Value DefaultId="DataItem0" />
       </Values>
     </Pie>
+    <Gauge ComponentName="gaugeDashboardItem1" Name="Gauges with modified ticks and font weight" DataSource="DataSource1" DataMember="SalesPerson">
+      <DataItems>
+        <Measure DataMember="Extended Price" DefaultId="DataItem0" />
+        <Measure DataMember="Quantity" DefaultId="DataItem1" />
+      </DataItems>
+      <GaugeElement>
+        <ActualValue DefaultId="DataItem0" />
+        <AbsoluteVariationNumericFormat />
+        <PercentVariationNumericFormat />
+        <PercentOfTargetNumericFormat />
+      </GaugeElement>
+      <GaugeElement>
+        <ActualValue DefaultId="DataItem1" />
+        <AbsoluteVariationNumericFormat />
+        <PercentVariationNumericFormat />
+        <PercentOfTargetNumericFormat />
+      </GaugeElement>
+    </Gauge>
   </Items>
   <LayoutTree>
     <LayoutGroup>
       <LayoutItem DashboardItem="gridDashboardItem1" Weight="63.807415605976757" />
       <LayoutGroup Orientation="Vertical" Weight="136.19258439402324">
-        <LayoutItem DashboardItem="chartDashboardItem1" Weight="136.19258439402324" />
+        <LayoutGroup Weight="136.19258439402324">
+          <LayoutItem DashboardItem="gaugeDashboardItem1" Weight="136.19258439402324" />
+          <LayoutItem DashboardItem="chartDashboardItem1" Weight="136.19258439402324" />
+        </LayoutGroup>
         <LayoutItem DashboardItem="pieDashboardItem1" Weight="136.19258439402324" />
       </LayoutGroup>
     </LayoutGroup>

CS/AspNetMvcDashboardApp/Scripts/WidgetsCustomization.js

@@ -1,35 +1,56 @@
 function onBeforeRender(s, e) {
     var dashboardControl = s.GetDashboardControl();
     var viewerApiExtension = dashboardControl.findExtension('viewerApi');
-    if (viewerApiExtension)
+    if (viewerApiExtension) {
         viewerApiExtension.on('itemWidgetOptionsPrepared', customizeWidgetOptions);
+        viewerApiExtension.on('itemWidgetUpdated', customizeWidget);
+        viewerApiExtension.on('itemWidgetCreated', customizeWidget);
+    };
 }
 function customizeWidgetOptions(e) {
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GridItem) {
         e.options.hoverStateEnabled = true
     };
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.ChartItem) {
-        e.options.tooltip = {
-            enabled: false
-        };
+        e.options.tooltip.enabled = false;
         e.options.animation = {
+            ...e.options.animation,
             enabled: true,
             duration: 1000
         };
         e.options.onArgumentAxisClick = function (info) {
-            info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
+            info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip();
         }
     };
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.PieItem) {
         e.options.legend = {
+            ...e.options.legend,
             visible: true,
             border: {
+                ...e.options.legend.border,
                 visible: true
             }
         };
         e.options.animation = {
+            ...e.options.animation,
             enabled: true,
             duration: 1000
         };
     }
+    if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GaugeItem) {
+        var gaugesCollection = e.dashboardItem.gauges();
+        gaugesCollection.forEach(element => {
+            if (element.actualValue().dataMember() == 'Extended Price') {
+                e.options.scale.tick.tickInterval = 1000
+            }
+        });
+    }
 }
+function customizeWidget(e) {
+    if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GaugeItem) {
+        var gaugesCollection = e.getWidget();
+        gaugesCollection.forEach(element => {
+            element.option('scale.label.font.weight', '600');
+        });
+    }
+}

Readme.md

@@ -1,23 +1,36 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/371736934/21.2.1%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1002174)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->
 
 # Dashboard for MVC - How to access API of underlying widgets
-<!-- run online -->
-**[[Run Online]](https://codecentral.devexpress.com/371736934/)**
-<!-- run online end -->
 
-The following example shows how to customize options of underlying widgets in ASP.NET MVC. For this, you need to handle the [onItemWidgetOptionsPrepared](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions?p=netframework#js_devexpress_dashboard_viewerapiextensionoptions_onitemwidgetoptionsprepared) event.
+The following example shows how to customize options of underlying widgets in ASP.NET MVC.
 
+Use the [ViewerApiExtension.on](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_on) and [ViewerApiExtension.off](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_off) methods to subscribe and unsubscribe from the events.
+
+The Web Dashboard renders an underlying widget as follows:
+
+1. The Web Dashboard loads the widget’s default configuration.
+
+    The [onItemWidgetOptionsPrepared](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions#js_devexpress_dashboard_viewerapiextensionoptions_onitemwidgetoptionsprepared) event is raised. Handle this event to customize the DevExtreme widget’s options before the widget is rendered.
+
+1. The Web Dashboard renders the UI component with the configured options.
+
+    The [onItemWidgetCreated](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions#js_devexpress_dashboard_viewerapiextensionoptions_onitemwidgetcreated) event is raised. It occurs once for each UI component when the dashboard is loaded to the client. You can use this event to customize the UI component instance.
+
+1. The UI component is updated (for example, when you apply filters or change parameter values).
+
+    The [onItemWidgetUpdated](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions#js_devexpress_dashboard_viewerapiextensionoptions_onitemwidgetupdated) event is raised. It occurs every time the UI component should be re-rendered. 
+
 The customized options are listed below:
 
 - The hovered grid row is highlighted in the underlying [dxDataGrid](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxDataGrid/).
 - A standard tooltip that appears when a user hovers over a chart's series point is disabled. 
 - A custom tooltip appears when a user clicks a label on the chart's argument axis. The [onArgumentAxisClick](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxChart/Configuration/#onArgumentAxisClick) property executes a function that invokes the custom tooltip.
-- The [animation](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxChart/Configuration/animation/) is enabled for the [dxChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxChart/) and [dxPieChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxPieChart/) widgets.
-- The [dxPieChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxPieChart/) widget displays a legend.
+- The [animation](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxChart/Configuration/animation/) is enabled for the [dxChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxChart/) and [dxPieChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxPieChart/) UI components.
+- The [dxPieChart](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxPieChart/) UI component displays a legend.
+- The font weight and an interval between major ticks are modified in the [dxCircularGauge](https://js.devexpress.com/DevExtreme/ApiReference/UI_Components/dxCircularGauge/) UI component.
 
 ## Files to Review
 

VB/AspNetMvcDashboardApp/App_Data/Dashboards/dashboard1.xml

@@ -68,12 +68,33 @@
         <Value DefaultId="DataItem0" />
       </Values>
     </Pie>
+    <Gauge ComponentName="gaugeDashboardItem1" Name="Gauges 1" DataSource="DataSource1" DataMember="SalesPerson">
+      <DataItems>
+        <Measure DataMember="Extended Price" DefaultId="DataItem0" />
+        <Measure DataMember="Quantity" DefaultId="DataItem1" />
+      </DataItems>
+      <GaugeElement>
+        <ActualValue DefaultId="DataItem0" />
+        <AbsoluteVariationNumericFormat />
+        <PercentVariationNumericFormat />
+        <PercentOfTargetNumericFormat />
+      </GaugeElement>
+      <GaugeElement>
+        <ActualValue DefaultId="DataItem1" />
+        <AbsoluteVariationNumericFormat />
+        <PercentVariationNumericFormat />
+        <PercentOfTargetNumericFormat />
+      </GaugeElement>
+    </Gauge>
   </Items>
   <LayoutTree>
     <LayoutGroup>
       <LayoutItem DashboardItem="gridDashboardItem1" Weight="63.807415605976757" />
       <LayoutGroup Orientation="Vertical" Weight="136.19258439402324">
-        <LayoutItem DashboardItem="chartDashboardItem1" Weight="136.19258439402324" />
+        <LayoutGroup Weight="136.19258439402324">
+          <LayoutItem DashboardItem="gaugeDashboardItem1" Weight="136.19258439402324" />
+          <LayoutItem DashboardItem="chartDashboardItem1" Weight="136.19258439402324" />
+        </LayoutGroup>
         <LayoutItem DashboardItem="pieDashboardItem1" Weight="136.19258439402324" />
       </LayoutGroup>
     </LayoutGroup>

VB/AspNetMvcDashboardApp/AspNetMvcDashboardApp.vbproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props" Condition="Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" />
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
@@ -226,6 +226,7 @@
     </None>
     <Content Include="App_Data\NWind.mdf" />
     <Content Include="Content\DashboardThumbnail\dashboard1.png" />
+    <Content Include="Scripts\WidgetsCustomization.js" />
     <Content Include="Views\Web.config" />
     <Content Include="Web.config" />
     <Content Include="Views\_ViewStart.vbhtml" />
@@ -295,4 +296,4 @@
     </PropertyGroup>
     <Error Condition="!Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props'))" />
   </Target>
-</Project>
+</Project>

VB/AspNetMvcDashboardApp/Scripts/WidgetsCustomization.js

@@ -1,35 +1,56 @@
 function onBeforeRender(s, e) {
     var dashboardControl = s.GetDashboardControl();
     var viewerApiExtension = dashboardControl.findExtension('viewerApi');
-    if (viewerApiExtension)
+    if (viewerApiExtension) {
         viewerApiExtension.on('itemWidgetOptionsPrepared', customizeWidgetOptions);
+        viewerApiExtension.on('itemWidgetUpdated', customizeWidget);
+        viewerApiExtension.on('itemWidgetCreated', customizeWidget);
+    };
 }
 function customizeWidgetOptions(e) {
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GridItem) {
         e.options.hoverStateEnabled = true
     };
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.ChartItem) {
-        e.options.tooltip = {
-            enabled: false
-        };
+        e.options.tooltip.enabled = false;
         e.options.animation = {
+            ...e.options.animation,
             enabled: true,
             duration: 1000
         };
         e.options.onArgumentAxisClick = function (info) {
-            info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
+            info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip();
         }
     };
     if (e.dashboardItem instanceof DevExpress.Dashboard.Model.PieItem) {
         e.options.legend = {
+            ...e.options.legend,
             visible: true,
             border: {
+                ...e.options.legend.border,
                 visible: true
             }
         };
         e.options.animation = {
+            ...e.options.animation,
             enabled: true,
             duration: 1000
         };
     }
+    if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GaugeItem) {
+        var gaugesCollection = e.dashboardItem.gauges();
+        gaugesCollection.forEach(element => {
+            if (element.actualValue().dataMember() == 'Extended Price') {
+                e.options.scale.tick.tickInterval = 1000
+            }
+        });
+    }
 }
+function customizeWidget(e) {
+    if (e.dashboardItem instanceof DevExpress.Dashboard.Model.GaugeItem) {
+        var gaugesCollection = e.getWidget();
+        gaugesCollection.forEach(element => {
+            element.option('scale.label.font.weight', '600');
+        });
+    }
+}

config.json

@@ -1,4 +1,4 @@
 {
-  "runOnWeb": true,
+  "runOnWeb": false,
   "autoGenerateVb": false
 }