Telerik blogs

Create Blood Pressure Chart with RadChart for Silverlight

Evgenia-Milcheva by Evgenia Milcheva
September 14, 2011 Web 0 Comments


This blog post will demonstrate how to achieve blood pressure graph visualization with the use of a RangeBar Chart type. Blood pressure is measured as two separate values - systolic (maximum) and diastolic (minimum). A common way to visualize these measures is a vertical bar with an arrow pointing the systolic (maximum) and an up arrow for the diastolic (minimum) respectively. It is measured several times over a period, as it’s important (from a clinical standpoint) to track any change in the values.

For the purpose the default RangeBar’s Style is retemplated. The Width of the Bars (“PART_DefiningGeometry”) is reduced so that they appear as Lines. Additional lines at high and low values are drawn with the use of Polylines and negative Margins. The retemplated Style should look like this:

  1. <Style x:Key="BloodPressureStyle" TargetType="telerik:RangeBar">
  2.             <Setter Property="Template" >
  3.                 <Setter.Value>
  4.                     <ControlTemplate TargetType="telerik:RangeBar">
  5.                         <Grid Opacity="0" x:Name="PART_MainContainer">
  6.                             <Polyline Height="20"
  7.                                       Margin="0,-20,0,0" VerticalAlignment="Top"
  8.                                       Points="0.25,0 0.5,1 0.75,0"
  9.                                       Stretch="Fill"
  10.                                       Stroke="Black"
  11.                                       MaxWidth="30"
  12.                                       StrokeThickness="3" />
  13.                             <Rectangle x:Name="PART_DefiningGeometry"
  14.                                        Height="{TemplateBinding ItemActualHeight}"
  15.                                        Width="3"
  16.                                        Style="{TemplateBinding ItemStyle}" />
  17.                             <Polyline Height="20" Margin="0,0,0,-20" VerticalAlignment="Bottom"
  18.                                       Points="0.25,1 0.5,0 0.75,1"
  19.                                       Stretch="Fill"
  20.                                       Stroke="Black"
  21.                                       MaxWidth="30"
  22.                                       StrokeThickness="3" />
  23.  
  24.                             <Grid.RenderTransform>
  25.                                 <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
  26.                             </Grid.RenderTransform>
  27.                         </Grid>
  28.                     </ControlTemplate>
  29.                 </Setter.Value>
  30.             </Setter>
  31.         </Style>

Additionally the color of the Bars is set to Black as the one for the Lines that we just added.

Voilà - the result:

Capture

The full source code can be downloaded from here.

Happy data visualizing Smile!

XAML
Evgenia-Milcheva
About the Author

Evgenia Milcheva

Front-End Developer
Telerik XAML Team

Comments

Comments are disabled in preview mode.