Is that possible for Tonado Plot?

Hi There,

My customer has a request on how to draw the Tornado bar graph.

As in the attached graph image, the different color represent the input parameter's positive and negative impact on the a function. They are not necessary the same number i.e. Price of Product A has 40.0 positive impact and 50. negative impact.

Can we draw same tornado graph in the Chart? What do I need to do for these request?

Thanks a lot

Gordon

Hello Gordon

In the next nightly build, it will be possible to get Tornado-like charts by using bar series. You can split the data into 2 series. For example, looking at your image, you'd have a red series and a blue series. Set the Orientation of the bar series to Horizontal, and also set the BarRenderingMode to Overlap when you get the next nightly build. Here is a simple example:

<ms:Chart>
  <ms:BarSeries ItemsSource="{Binding Data1}" Orientation="Horizontal" BarRenderingMode="Overlap" SeriesBrush="#CF2842" />
  <ms:BarSeries ItemsSource="{Binding Data2}" Orientation="Horizontal" BarRenderingMode="Overlap" SeriesBrush="#0566B7" />
</ms:Chart>

Let me know if you have further questions about this.

Jason Fauchelle

Hi Jason,

I tried Dec. 7 nightly build, it is not what we want.

Please see the attached file.

Run the application and click on Tornado button.

The graph is not the same as in the one in the image I posted before.

If we can move the Y-Axis from 0 to some reference number, like say 2, then it may work: i.e.:

if the value is smaller than 2, it is on left of the Y-Axis and the values bigger than 2 it will be on right of the y-Axis. And the bar length will be |value-2|.

I tried both BarSeries and FloatingBarSeries, none of them work. You may need to change it back to BarSeries in the attached project.

Thanks

Gordon

Hello Gordon

For this scenario, you can set the BarSeries.BaseLine property to 2. This will mean anything less than 2 will start at 2 and extend leftwards. Anything greater than 2 will start at 2 and extend to the right. A vertical black line will also be rendered at the X = 2 mark. This property is already available in the version you have, no need to wait for the nightly. Note that since you demo has random data, 2 bars can sometimes appear on the same side making it look strange. With real data it will look right.

Optionally, you can set the YAxis.AxisLineStyle property to be a style that targets Border, and set the visibility or BorderBrush to hide the Y axis line.

Let me know if there are other details you want to sort out.

Jason Fauchelle

Thanks Jason, It is working as you said.

I have a question about the label the bar, on left bar, I want the label on the left, the right bar has the label on right. I have hacked way as below, but if the label has more didigt it will not look right. Do you have any smarter way to make it to the left?

Here is my hacked way:

<Style x:Key="DataLabelStyleLeft" TargetType="ms:DataLabel">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid Margin="-40,0,20,0">
                            <Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1">
                                <Border Background="White" Opacity="0.3" Margin="1" />
                            </Border>
                            <TextBlock Text="{Binding DependentData, Converter={StaticResource StringConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                           Margin="0,2,4,2" Foreground="{TemplateBinding Foreground}" Opacity="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style> 

Hello Gordon

This was a bug with using the baseline property on a horizontal bar series. This will be resolved in the next nightly build.

Jason Fauchelle

Hi Jason,

Everything looks fine, but one small problem, when the user set the YAxis's IsReversed = true, then the bar disappeared.

Is this fixable?

Thanks Gordon

Thanks for pointing this out Gordon.

This bug will be resolved in the next nightly build.

Jason Fauchelle

Thanks, seemed it is fixed