silverlightchartssilverlight-3.0silverlight-toolkitcolumn-chart

Silverlight 3 Toolkit Chart Not all Columns show


I can't seem to find the solution to this strange problem. I have a Silverlight 3 toolkit Column chart that doesn't show all the columns. I have a data set of 10 columns and it only shows 7.

image of the graph:

<UserControl x:Class="graph.bd" 
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
<UserControl.Resources>
    <Style x:Key="ColorByGradeColumn" TargetType="DVC:ColumnDataPoint">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DVC:ColumnDataPoint">
                    <Border  Background="{Binding ColColor}" 

                     BorderBrush="{Binding ColColor}" 

                     BorderThickness="0.5">

                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<!-- canvases and other code goes here... -->
<DVC:Chart x:Name="Graphic" Width="350" Height="250" Background="Transparent">

                        <DVC:Chart.Series>
                            <DVC:ColumnSeries Title="Fras"
                            IndependentValueBinding="{Binding ColName}"
                            DependentValueBinding="{Binding ColValue}"                                             
                            DataPointStyle="{StaticResource ColorByGradeColumn}"
                                              >
                                <DVC:ColumnSeries.IndependentAxis>
                                    <DVC:CategoryAxis Orientation="X">
                                        <DVC:CategoryAxis.AxisLabelStyle>
                                            <Style TargetType="DVC:AxisLabel">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="DVC:AxisLabel">
                                                            <Grid Width="70" ShowGridLines="True"  Height="8" Background="Transparent" 

                                                         HorizontalAlignment="Left"  VerticalAlignment="Bottom">
                                                                <TextBlock x:Name="YAxisTitle" HorizontalAlignment="Center" VerticalAlignment="Center"  Text="{Binding}" RenderTransformOrigin="0.5,0.5" FontSize="8">
                                                            <TextBlock.RenderTransform>                
                                                            <RotateTransform Angle="270" CenterX="5"/>
                                                             </TextBlock.RenderTransform>
                                                                </TextBlock>
                                                                <Grid.RenderTransform>
                                                                    <RotateTransform Angle="60" ></RotateTransform>
                                                                </Grid.RenderTransform>
                                                            </Grid>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </DVC:CategoryAxis.AxisLabelStyle>
                                    </DVC:CategoryAxis>
                                </DVC:ColumnSeries.IndependentAxis>
                            </DVC:ColumnSeries>
                        </DVC:Chart.Series>
                        <DVC:Chart.PlotAreaStyle>
                            <Style TargetType="Grid">
                                <Setter Property="Background" Value="Black" />
                            </Style>
                        </DVC:Chart.PlotAreaStyle>
                        <DVC:Chart.LegendStyle>
                            <Style TargetType="DV:Legend">
                                <Setter Property="Width" Value="0"/>
                                <Setter Property="Height" Value="0"/>
                            </Style>
                        </DVC:Chart.LegendStyle>
                        <DVC:Chart.Foreground>
                            <SolidColorBrush Color="White"></SolidColorBrush>
                        </DVC:Chart.Foreground>

                    </DVC:Chart>

My data set is made of just 3 values: the main number which is an integer and is how high the column is, and a name for the columns which is a string and I can't show in the picture, as well as a color for the columns which binds on the style and can change on the code behind.

I also can't upgrade to silverlight 4 or higher because this page with the columns is embebed in another page which runs only on silverlight 3

EDIT: I actually have another 3 graphs in the page which work without problems, only this one is having issues. all four have the exact same code in the .xaml (obviously with different x:name) and all 4 have very similar code in the xaml.cs. Please someone help, I really need to get this issue fixed. I can provide more code if needed.

EDIT2:

I think what is happening is one of the columns is getting behind or on top of the others, but I don't understand why. None of the other graphs has this issue.


Solution

  • Okay, so I found out what was wrong. It turns out it was the data, one of the 10 rows that are loaded had the same value on the column that is the X axis but diffent Y value, so the chart was displaying both columns as one.

    I am quite embarrassed, but I hope this will help someone out one day.