make a Bar Graph that change his color and height on a value

06-01-2007 6:39 AM |

Hello.
Has someone an example for me (or an site with info) how to made a Bar Graph that change his color and heigt on a value.
For example: the value range is from 0 - 100.
On 0      the height is 0  and the color is (no color possible, but set to green)
On 50    the height is 10 and the color is set to yellow
On 100  the height is 20 and the color is set to Red ( for warning)

And on the value the collor has to change from green into yellow form yellow into red. So that on each value the height and color changes.
Something like a  LinearGradientBrush on the site http://msdn2.microsoft.com/en-us/library/bb412383.aspx
Is it something like a rectangle on your screen.filled with LinearGradientBrush and let as many see as what the value is.
Something like the frame from the crol bar.on http://silverlight.net/samples/1.0/Video-Library/default.html 
This can be done with : Clip="m 0,0 l 1020.3,0, 0,228.5, -1020.3,0 z">
Maybe I've told the answer already, but maybe someone had saw this in an example or on a site.
Please let me know, else I have to made it like this poor way.

bye

 

Re: make a Bar Graph that change his color and height on a value

06-01-2007 7:44 AM |

Hello.
I've got this code:
<Canvas Canvas.Left="0" Canvas.Top="0"  Clip="m 0,0 l 50,0, 0,100, -50,0 z">

The 50 is for the width and the 100 is for the height.
Now I want to change the value 100.
Does anyone know how I can do this (dynamic) that I set this value to another value that change all the time?
I'm still bussy to made an bar graph.

for the one how is experimentate to made a bar graph also copy this code:
 <!-- Clipping Bar graph-->
    <Canvas Canvas.Left="0" Canvas.Top="0.6" Clip="m 0,0 l 50,0, 0,100, -50,0 z">
     
  <!-- This rectangle is painted with a vertical linear gradient. -->
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
        <GradientStop Color="Green" Offset="-0.2" />
        <GradientStop Color="Yellow" Offset="0.4" />
        <GradientStop Color="Orange" Offset="0.7" />
        <GradientStop Color="Red" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

On this site: http://silverlight.net/samples/1.0/Silverlight-Pad/default.html
and then press load. Now you can change the value 50 and 100 and you can see what happend.

bye