Support for Multiple Pointers in Radial Gauge ?

4 posts, 0 answers
  1. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 19 Oct 2012 Link to this post

    Hi,
         I have just installed the Q3 release and started jumping for joy when I saw the gauge components. However when I started to do a quick test to see if I can dump the other control suite I have to use for radial gauges I could not see a way to add a second pointer.

    Is this possible ?

    Thanks

    Chris
  2. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 22 Oct 2012 Link to this post

    You can add an identical gauge inside the first one with only the pointer visible.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 22 Oct 2012 Link to this post

    Hi Caesar,
          thanks for your reply. I can't find any documentation about adding child gauges or about hiding everything except the pointer, have you got an example of what you are talking about ?

    Thanks

    Chris
  5. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 22 Oct 2012 Link to this post

    Hi,
             I have now got this sorted, so I thought I would post my results to help out other who are in this situation. I basically just created two gauges and overlapped them within in container. If there is a better way I would be happy to use that instead, but for now this is working for me. I'm sure there is some redundant mark up too please feel free to correct it :).

    <style>
           #gaugecontainer {
               background-image: url(/Images/Gauge_blue_200.png);
               background-position: 0, 0;
               height: 200px;
               position: relative;
               width: 200px;
           }
     
           #gaugetitle {
               position: absolute;
               top: 150px;
               left: 75px;
               font-size: smaller;
               font-weight: bold;
           }
           .gaugetest {
               left: 18px;
               position: absolute !important; /* override the inline style of the gauge */
               top: 10px;
           }
       </style>
     
    <div id="gaugecontainer">
           <div id="gaugetitle">Overall</div>
           <telerik:RadRadialGauge ID="RadRadialGauge1" runat="server"
    CssClass="gaugetest" Width="168px" Height="168px" >
               <Pointer Color="Fuchsia" Value="2">
                   <Cap Color="black" Size="0.1" />
               </Pointer>
               <Scale Min="1" Max="5" MajorUnit="1" MinorUnit="0.2"
    EndAngle="240" StartAngle="-60">
                   <MinorTicks Color="Black" Width="0.4"/>
                   <MajorTicks Color="Black" Width="0.7" />
                   <Labels Visible="False" />
                   <MajorTicks Visible="False" />
                   <Ranges>
                       <telerik:GaugeRange Color="Red" From="1" To="2"/>
                       <telerik:GaugeRange Color="Orange" From="2" To="3"/>
                       <telerik:GaugeRange Color="Yellow" From="3" To="4"/>
                       <telerik:GaugeRange Color="Green" From="4" To="5"/>
                   </Ranges>
               </Scale>
           </telerik:RadRadialGauge>
           <telerik:RadRadialGauge ID="RadRadialGauge2" runat="server"
    CssClass="gaugetest" Width="168px" Height="168px">
               <Pointer Color="Green" Value="4">
                   <Cap Color="black" Size="0.1" />
               </Pointer>
               <Scale Min="1" Max="5" MajorUnit="1" MinorUnit="0.2"
    EndAngle="240" StartAngle="-60">
                   <MinorTicks Color="Black" Width="6"/>
                   <MajorTicks Color="Black" Width="12" />
                   <Ranges>
                       <telerik:GaugeRange Color="Red" From="1" To="2"/>
                       <telerik:GaugeRange Color="Orange" From="2" To="3"/>
                       <telerik:GaugeRange Color="Yellow" From="3" To="4"/>
                       <telerik:GaugeRange Color="Green" From="4" To="5"/>
                   </Ranges>
               </Scale>
           </telerik:RadRadialGauge>
       </div>

    I have also attached the background image and a shot of the finished article.

    Chris 
Back to Top