BuyLog In
Ticket T399422
Visible to All Users

Web Gauge Item - Add custom range bars and set custom min and max values

created 9 years ago

Hello DevExpress,

I need to redesign a few Dashboard Gauge widgets to reflect a similar style to what is shown in the attached file, and I want to verify that these options are possible, either through standard configuration, or at least through client side javascript manipulation.

Principally, I need to ensure that I can do the following:

  1. Set custom coloring for certain ranges on my Gauge, to show red (critical), yellow (caution), and green (good) (see the example).
  2. Need to be able to just display the "current" value in the center of the Gauge, not a percentage above or below goal.
  3. To set a specific minimum and maximum range for the Gauge spectrum (pretty certain that this can be easily done through configuration).

Can you take a glance at my attachments and let me know if these items are possible?  And if so, how I would go about these customizations?

Thanks,
Jonathan

Comments (1)
JB JB
Jonathan Barksdale 9 years ago

    Also, would I be able to apply the 3 color ranges to the Linear Vertical or Circular gauge?  Thanks.

    Sign in to comment on this post

    Answers approved by DevExpress Support

    created 9 years ago (modified 9 years ago)

    You can use the following code to configure gauges according to your requirements. This approach is described in the Access to Underlying Widgets help topic.

    JavaScript
    function UpdateGuages(s, e) {  
    if(e.ItemName.indexOf('gauge') >=0)  
    {  
        var gauges = e.GetWidget();  
        $.each(gauges, function (_, gauge) {  
            gauge.option('rangeContainer', {  
                ranges: [  
                    { startValue: 0, endValue: 20000, color: 'dodgerblue' },  
                    { startValue: 20000, endValue: 40000, color: 'lightskyblue' },  
                    { startValue: 40000, endValue: 60000, color: 'yellow' },  
                    { startValue: 60000, endValue: 80000, color: 'orange' },  
                    { startValue: 80000, endValue: 100000, color: 'firebrick' }  
                ]  
            });  
            gauge.option('scale.startValue', 0);  
            gauge.option('scale.endValue', 100000);  
            gauge.option('margin', { left: 7, right: 7 });  
        });  
    }  
}

    This function should be called from the ItemWidgetCreated and ItemWidgetUpdated event handler which can be accessed using the DashboardViewerSettings.ClientSideEvents Property.

      Show previous comments (7)
      DevExpress Support Team 9 years ago

        I am afraid it is not possible to apply theme to a certain dashboard item. You can only customize gauge options to achieve a similar result.
        Please refer to the T374928: Web Gauge Item - How to change gauge background color thread for additional information about appearance customization.

        KP KP
        Konstantin Paradizov 5 years ago

          Hi,

          I know this is an old ticket. However, I would like to know how I should modify web dash viewer settings on the server side to align with my client-side customizations of colored ranges and scale ticks, so that when I click Export to Image or PDF the resulting gauge looks more similar to the client-side version? Right now, when I click export button on the widget, it renders the image without any colored ranges.

          Is there any way to increase thickness of the colored range on the web so it looks more similar to how it looks in WinForms?

          Thanks

          DevExpress Support Team 5 years ago

            The current control version does not provide a public API to customize gauges on export.

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.