Downward Plotting Silverlight Chart

Previously I had finally figured out how to reverse a chart without having to use any C# code behind (which I was VERY happy about). Unfortunately, I needed the chart to actually graph top to bottom - and that solution was not working. The lines were very choppy and the points were not being connected in order. 

No one was happy about that at all.

One of my co-workers (ty Hank) noticed that all of the Silverlight charts defaulted to plotting all of the series from left to right, so the actual plotting area of the chart needed to be rotated by 90 degrees.

By going into the control template of the chart, I was able to rotate the plotting area containing the series (and the axis too).

Below is an example of the default chart, and to the right of it is the styled chart that now flows from top to bottom. 

The styles (and there are 3, one for each axis and one for the chart itself). All XAML though :D

 

The code below is for the right chart only. The one on the left is the default Silverlight styling

 

<toolkit:Chart Canvas.Left="472" Canvas.Top="-4" Height="487" Width="494" Style="{StaticResource FlippedChartStyle}" Background="Ivory">
                <toolkit:Chart.Axes>
                    <chartingToolkit:LinearAxis x:Name="This1"
                                                Minimum="0"
                                                Maximum="12"
                                                Interval="2" Style="{StaticResource SideAxisStyle}"
                                                Orientation="X">
                    </chartingToolkit:LinearAxis>

                    <!-- Focusing on the Y Axis to reverse -->
                    <chartingToolkit:LinearAxis x:Name="This2"
                                                Minimum="0" Maximum="25"
                                                Orientation="Y"
                                                RenderTransformOrigin="0.5,0.5"
                                                Style="{StaticResource BottomAxisStyle}">

                    </chartingToolkit:LinearAxis>
                </toolkit:Chart.Axes>

                <toolkit:Chart.Series>
                    <toolkit:LineSeries Title="Reversed"
                                        x:Name="ReversedLine2"
                                        IndependentValuePath="X"
                                        DependentValuePath="Y"
                                        RenderTransformOrigin="0.5,0.5">
                        <toolkit:LineSeries.ItemsSource>
                            <PointCollection>
                                <Point>0,1</Point>
                                <Point>2,2</Point>
                                <Point>3,4</Point>
                                <Point>5,8</Point>
                                <Point>8,18</Point>
                                <Point>9,22</Point>
                                <Point>12,25</Point>
                            </PointCollection>
                        </toolkit:LineSeries.ItemsSource>
                    </toolkit:LineSeries>
                </toolkit:Chart.Series>
            </toolkit:Chart> 

Below are the styles that were used to create the chart on the right. These are in the ResourceDictionary for this project/solution.

<Style x:Key="BottomAxisStyle" TargetType="toolkit:LinearAxis">
        <Setter Property="ShowGridLines" Value="True"/>
        <Setter Property="Orientation" Value="Y"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="Location" Value="Left"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="MajorTickMarkStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                    <Setter Property="X2" Value="2"/>
                    <Setter Property="Y2" Value="2"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="AxisLabelStyle">
            <Setter.Value>
                <Style TargetType="toolkit:AxisLabel">
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                    <Setter Property="FontFamily" Value="Arial"/>
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="FontSize" Value="8"/>
                    <Setter Property="Margin" Value="0,0,3,0"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <CompositeTransform Rotation="90" />
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SideAxisStyle" TargetType="toolkit:LinearAxis">
        <Setter Property="Orientation" Value="X"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="ShowGridLines" Value="True"/>
        <Setter Property="MajorTickMarkStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Transparent"/>
                    <Setter Property="X2" Value="0.5"/>
                    <Setter Property="Y2" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="AxisLabelStyle">
            <Setter.Value>
                <Style TargetType="toolkit:AxisLabel">
                    <Setter Property="FontSize" Value="8"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <CompositeTransform ScaleY="1" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>


    <Style x:Key="FlippedChartStyle" TargetType="toolkit:Chart">
        <Setter Property="Palette">
        <Setter.Value>
        <toolkit:ResourceDictionaryCollection>
        <ResourceDictionary>
            <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                <GradientStop Color="#FF9DC2B3"/>
                <GradientStop Color="#FF1D7554" Offset="1"/>
            </RadialGradientBrush>
            <Style x:Key="DataPointStyle" TargetType="Control">
                <Setter Property="Background" Value="{StaticResource Background}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Control">
                            <Grid Height="0" Width="0"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="DataShapeStyle" TargetType="Shape">
                <Setter Property="Stroke" Value="{StaticResource Background}"/>
                <Setter Property="StrokeThickness" Value="1"/>
                <Setter Property="StrokeMiterLimit" Value="1"/>
                <Setter Property="Fill" Value="{StaticResource Background}"/>
            </Style>
        </ResourceDictionary>
        </toolkit:ResourceDictionaryCollection>
        </Setter.Value>
        </Setter>       
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="toolkit:Legend">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </Setter.Value>
        </Setter>       
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="toolkit:Title">
                    <Setter Property="FontSize" Value="6"/>
                    <Setter Property="FontFamily" Value="Arial"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                </Style>
            </Setter.Value>
        </Setter>       
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:Chart">
                    <Grid x:FieldModifier="PlottedCharts" HorizontalAlignment="Center" VerticalAlignment="Center"
                          Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">                       
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>                       
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>                                              
                            <chartingPrimitives:EdgePanel Margin="30" x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"
                                                          RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Background="Ivory"
                                                          VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <chartingPrimitives:EdgePanel.RenderTransform>
                                    <!--<CompositeTransform ScaleX="1" ScaleY="-1"/>-->
                                <CompositeTransform Rotation="90"/>
                            </chartingPrimitives:EdgePanel.RenderTransform>                                                      
                                <Grid x:Name="PlotArea" Canvas.ZIndex="-1" Background="Ivory" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"/>
                                <Border Canvas.ZIndex="10" BorderBrush="Gray" BorderThickness="0.25" Margin="0"/>
                            </chartingPrimitives:EdgePanel>                          
                    </Grid>
                 </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>