Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andy
55
Gradient Gauge
posted

I have take over some code froma nother developer and need some help formatting a gauge.  I have a gauge that has red/yellow/green. I would like the gauge to be gradient from the red to the yellow.  I have tried using the gradient fill, but it never looks right.

Here is what I have now.

Here is what I want:

 

Here is the definition:

 <igGauge:UltraGauge ID="UltraGauge" runat="server"

BackColor="Transparent"

Height="170px"

Width="195px" >

<DeploymentScenario FilePath="DesktopModules\Dentscape\GaugeImages" ImagePipeURL="" />

<Gauges>

<igGaugeProp:RadialGauge Bounds="0, 25, 0, 0" Square="False">

<dial endangle="380" innerextent="-12" startangle="160">

<BrushElements>

<igGaugeProp:BrushElementGroup><BrushElements>

<igGaugeProp:SimpleGradientBrushElement StartColor="DarkGray" EndColor="DimGray" RelativeBounds="0, 0, 100, 100" RelativeBoundsMeasure="Percent"></igGaugeProp:SimpleGradientBrushElement>

<igGaugeProp:SimpleGradientBrushElement StartColor="64, 64, 64" EndColor="LightGray" RelativeBounds="2, 2, 96, 96" RelativeBoundsMeasure="Percent"></igGaugeProp:SimpleGradientBrushElement>

<igGaugeProp:SimpleGradientBrushElement StartColor="White" EndColor="Black" RelativeBounds="3, 3, 94, 94" RelativeBoundsMeasure="Percent"></igGaugeProp:SimpleGradientBrushElement>

</BrushElements>

</igGaugeProp:BrushElementGroup>

</BrushElements>

<StrokeElement>

<BrushElements>

<igGaugeProp:RadialGradientBrushElement SurroundColor="237, 241, 245" CenterPoint="73, 52" FocusScales="0.92, 0.92"></igGaugeProp:RadialGradientBrushElement>

</BrushElements>

</StrokeElement>

</dial>

<overdial bounds="0, 0, 0, 70" boundsmeasure="Percent" cornerextent="0" innerextent="-26">

<StrokeElement Thickness="0"></StrokeElement>

</overdial>

<scales>

<igGaugeProp:RadialGaugeScale StartAngle="160" EndAngle="380">

<MajorTickmarks StartWidth="2" StartExtent="64" EndExtent="70">

<StrokeElement Color="DimGray">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="Transparent"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</StrokeElement>

</MajorTickmarks>

<MinorTickmarks StartWidth="2" Frequency="0.25" StartExtent="68" EndExtent="71">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="Transparent"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</MinorTickmarks>

<Labels Orientation="Horizontal" SpanMaximum="20" Extent="82" Font="Franklin Gothic Medium, 20px">

<Shadow Depth="2">

<BrushElements>

<igGaugeProp:SolidFillBrushElement></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</Shadow>

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="Transparent"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</Labels>

 

<Markers>

<igGaugeProp:RadialGaugeNeedle MidExtent="52" EndExtent="61" StartWidth="2" MidWidth="3" WidthMeasure="Percent" Value="40">

<Anchor Radius="14" RadiusMeasure="Percent" SpokeDepth="99">

<BrushElements>

<igGaugeProp:SimpleGradientBrushElement GradientStyle="BackwardDiagonal" StartColor="Silver" EndColor="White"></igGaugeProp:SimpleGradientBrushElement>

</BrushElements>

<StrokeElement Thickness="0" Color="64, 64, 64"></StrokeElement>

</Anchor>

<BackAnchor Radius="20" RadiusMeasure="Percent">

<BrushElements>

<igGaugeProp:SimpleGradientBrushElement GradientStyle="BackwardDiagonal" StartColor="DimGray" EndColor="White"></igGaugeProp:SimpleGradientBrushElement>

</BrushElements>

<StrokeElement Thickness="2">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="DimGray"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</StrokeElement>

</BackAnchor>

<StrokeElement Color="DimGray">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="60, 60, 60"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</StrokeElement>

<BrushElements>

<igGaugeProp:SimpleGradientBrushElement GradientStyle="BackwardDiagonal" StartColor="White" EndColor="White"></igGaugeProp:SimpleGradientBrushElement>

</BrushElements>

</igGaugeProp:RadialGaugeNeedle>

</Markers>

<Ranges>

<igGaugeProp:RadialGaugeRange InnerExtentStart="0" InnerExtentEnd="0" OuterExtent="94" StartValue="0" EndValue="33.3">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="238, 0, 0"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

<StrokeElement Thickness="0" Color="180, 180, 180"></StrokeElement>

</igGaugeProp:RadialGaugeRange>

<igGaugeProp:RadialGaugeRange InnerExtentStart="0" InnerExtentEnd="0" OuterExtent="94" StartValue="33.4" EndValue="66.6">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="254, 212, 0"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</igGaugeProp:RadialGaugeRange>

<igGaugeProp:RadialGaugeRange InnerExtentStart="0" InnerExtentEnd="0" OuterExtent="94" StartValue="66.7" EndValue="100">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="47, 141, 0"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</igGaugeProp:RadialGaugeRange>

<igGaugeProp:RadialGaugeRange InnerExtentStart="0" InnerExtentEnd="0" StartValue="0" EndValue="100">

<BrushElements>

<igGaugeProp:RadialGradientBrushElement CenterColor="150, 255, 255, 255" SurroundColor="Transparent" CenterPoint="90, 31"></igGaugeProp:RadialGradientBrushElement>

</BrushElements>

</igGaugeProp:RadialGaugeRange>

</Ranges>

<BrushElements>

<igGaugeProp:SolidFillBrushElement></igGaugeProp:SolidFillBrushElement>

</BrushElements>

<Axes>

<igGaugeProp:NumericAxis EndValue="100" TickmarkInterval="0"></igGaugeProp:NumericAxis>

</Axes>

</igGaugeProp:RadialGaugeScale>

 

 

<igGaugeProp:RadialGaugeScale StartAngle="180" EndAngle="360">

<MajorTickmarks>

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="Transparent"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</MajorTickmarks>

<Labels SpanMaximum="20" Extent="70" Font="Arial, 18px, style=Bold, Italic">

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="White"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</Labels>

<Axes>

<igGaugeProp:NumericAxis EndValue="100" TickmarkInterval="0"></igGaugeProp:NumericAxis>

</Axes>

</igGaugeProp:RadialGaugeScale>

</scales>

<strokeelement thickness="0"></strokeelement>

</igGaugeProp:RadialGauge>

<igGaugeProp:SegmentedDigitalGauge Bounds="12, 25, 0, 0" CornerExtent="10" Digits="3"

BoundsMeasure="Pixels"

Margin="40, 62, 40, 26, Percent" Mode="FourteenSegment" Square="True" Text="93.4">

<unlitbrushelements>

<igGaugeProp:SolidFillBrushElement Color="Transparent"></igGaugeProp:SolidFillBrushElement>

</unlitbrushelements>

<fontbrushelements>

<igGaugeProp:SolidFillBrushElement Color="Black"></igGaugeProp:SolidFillBrushElement>

</fontbrushelements>

<BrushElements>

<igGaugeProp:SimpleGradientBrushElement GradientStyle="BackwardDiagonal" StartColor="White" EndColor="Gainsboro"></igGaugeProp:SimpleGradientBrushElement>

</BrushElements>

<StrokeElement>

<BrushElements>

<igGaugeProp:SolidFillBrushElement Color="150, 150, 150"></igGaugeProp:SolidFillBrushElement>

</BrushElements>

</StrokeElement>

</igGaugeProp:SegmentedDigitalGauge>

</Gauges>

</igGauge:UltraGauge>

 

 

  • 20
    posted

    Hi FierceMuppet,

    Is igGauge a third part component ??

    how could have access to it... excuse me for such simple question.. new to gauge chart.

    Thanks.

    Tanya

     

  • 10880
    posted

    I used two multipstoplineargradients.  You may have to play with it a little to suit your needs.

    <igGauge:UltraGauge ID="UltraGauge1" runat="server" BackColor="Transparent"
                Height="250px" Width="250px" ForeColor="ControlLightLight">
                <Gauges>
                    <igGaugeProp:RadialGauge MarginString="2, 2, 2, 2, Pixels">
                        <Dial EndAngle="380" InnerExtent="-12" StartAngle="160">
                            <BrushElements>
                                <igGaugeProp:BrushElementGroup>
                                    <BrushElements>
                                        <igGaugeProp:MultiStopLinearGradientBrushElement Angle="319">
                                            <ColorStops>
                                                <igGaugeProp:ColorStop Color="254, 0, 0" />
                                                <igGaugeProp:ColorStop Color="232, 0, 0" Stop="0.388601035" />
                                                <igGaugeProp:ColorStop Color="254, 254, 0" Stop="0.4918033" />
                                                <igGaugeProp:ColorStop Color="254, 254, 0" Stop="1" />
                                            </ColorStops>
                                        </igGaugeProp:MultiStopLinearGradientBrushElement>
                                        <igGaugeProp:MultiStopLinearGradientBrushElement Angle="36">
                                            <ColorStops>
                                                <igGaugeProp:ColorStop Color="Transparent" />
                                                <igGaugeProp:ColorStop Color="Transparent" Stop="0.4507772" />
                                                <igGaugeProp:ColorStop Color="254, 254, 0" Stop="0.544041455" />
                                                <igGaugeProp:ColorStop Color="27, 164, 0" Stop="0.6580311" />
                                                <igGaugeProp:ColorStop Color="62, 186, 0" Stop="1" />
                                            </ColorStops>
                                        </igGaugeProp:MultiStopLinearGradientBrushElement>
                                    </BrushElements>
                                </igGaugeProp:BrushElementGroup>
                            </BrushElements>
                            <StrokeElement Alignment="Outset" Thickness="0">
                                <BrushElements>
                                    <igGaugeProp:SolidFillBrushElement Color="Silver" />
                                </BrushElements>
                            </StrokeElement>
                        </Dial>
                        <Scales>
     
                        </Scales>
                    </igGaugeProp:RadialGauge>
                </Gauges>
            </igGauge:UltraGauge>