Silverlight Toolkit LineSeries connects data points randomly

Question

I am trying to render a line chart but the LineSeries is connecting the data points randomly each time I make it redraw the graph.

My items source is a typed List of my custom classes that have 2 properties, one for the x-axis and one for the y-axis (both are 'double' values). The values of these properties do not change and are loaded once.

My lines have several straight, vertical line jumps, i.e. the x-axis value is the same for 3 or 4 points, but the y-value changes. It properly connects these dots with a straight, vertical line.

But the odd thing is that it randomly uses any of the data points for the connection from the left and another one for the connection to the right.

I would assume that it uses the first point based on the order of the items source for the connection from the left and the last point for the connection to the right.

The items source is always in the same order, which is also the order in which I want them to be connected.

I tried attaching images, but am not allowed to ... So only a textual description is possible.

        LineSeries ser = new LineSeries();
        Chart.Series.Add(ser);
        ser.DependentValuePath = "YAxis";
        ser.IndependentValuePath = "XAxis"
        ser.ItemsSource = data.Coordinates;

Does anybody know why this is happening? Thanks for any suggestions.

Answer 1

Its because the chart is Independent value based not Dependent value based. I had a similar issue with my "strip chart". It's as designed. Think of your chart as an x vs y plot flipped sideways. Now you can see how it plots. Changing the order of the points based on y doesn't do anything.

I don't think Telerik has this limitation.

Answer 2

I had a similar issue in creating a strip style chart. Luckily, one of my co-workers noticed that silverlight charts all run left to right - which effects how it plots the different plots provided.

Simply rotating the chart seemed like the best idea - but it still had a few issues with charting (and my legend was also rotated).

I'm not much of a C# coder, so I created a control template in the Chart's style. I went into the template and rotated the edgepanel of the chart. Below is a very brief and generic example:

<Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="charting:Chart">
         <Border Background="{TemplateBinding Background}" 
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
              <Grid>

I'm not putting all of the code in here, but the full template for the chart can be found at http://silverlight.codeplex.com/SourceControl/changeset/view/80285#778932

                   <chartingprimitives:EdgePanel x:Name="ChartArea" 
                                       Style="{TemplateBindingChartAreaStyle}"
                                       RenderTransformOrigin="0.5,0.5">
                        <chartingprimitives:EdgePanel.RenderTransform>
                            <CompositeTransform Rotation="90"/>
                        </chartingprimitives:EdgePanel.RenderTransform>        
                   </chartingprimitives:EdgePanel>
                     <Grid x:Name="PlotArea" Canvas.ZIndex="-1"
                           RenderTransformOrigin="0.5,0.5" />
                     <Border Canvas.ZIndex="10" BorderBrush="Gray" 
                             BorderThickness="1"/>
              </Grid>
          </Border>
      </ControlTemplate>
    </Setter.Value>
</Setter>

This way the entire plotting area of the chart has been flipped, allowing the chart to plot downward instead of forcing the data to plot to the right. (I was having the same issue with the lines not plotting correctly and being erratic on what order it wanted to connect the points in)

It helped with my chart (there was tweaking needed, but this gives the general idea of what I was able to figure out). Hope it is somewhat helpful to you.