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>

Problem ChildWindow

Today graced me with this new (ok, kind of new - the verbiage is always the same but never does mean the same depending on how you hold your head or cross your eyes) error:

throw new
Error("Unhandled Error in Silverlight Application Cannot resolve TargetName contentPresenter.  
at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)\n  
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ToggleButton.ChangeVisualState(Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ButtonBase.UpdateStateFlags(Boolean disable)\n  
at System.Windows.Controls.Primitives.ButtonBase.OnIsEnabledChanged(IsEnabledChangedEventArgs e)\n  
at System.Windows.Controls.Control.OnIsEnabledChanged(Control control, EventArgs args)\n  
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)");

Turns out, it wasn't throwing an error based on the button being used to fire the event/open the window nor was it the window itself. It was another control on the page that had a "contentPresenter" that didn't even communicate with the window itself.

It seems that the child window (modal since it is Silverlight) sent all of the controls that were active on the page into the disabled state - and ONE of them had the issue with not being able to find "contentPresenter". So, it was the one user control... all the way over to the right and not talking to the child window that was being the problem child after all.