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:
Additionally the color of the Bars is set to Black as the one for the Lines that we just added.
Voilà - the result:
The full source code can be downloaded from here.
Happy data visualizing !
Telerik XAML Team
Subscribe to be the first to get our expert-written articles and tutorials for developers!