Chart question

Hi,

I'm trying to create a chart that contain a line chart and also has various vertical lines to indicate event in time. I know how to add the line chart but what should I use to add the lines? Also, I want the Y value to go from the top to bottom of the graph automatically.

Thanks in advance,

Doug

Hi Doug,

Vertical lines can be drawn by adding StripeLine instances to the chart. Here's an example:

<ms:Chart>
  <ms:Chart.BackgroundElements>
    <ms:StripeLine StartValue="45" Orientation="Vertical">
      <ms:StripeLine.StripeStyle>
        <Style TargetType="Shape">
          <Setter Property="StrokeThickness" Value="3" />
          <Setter Property="Stroke" Value="Red" />
        </Style>
      </ms:StripeLine.StripeStyle>
    </ms:StripeLine>
  </ms:Chart.BackgroundElements>
</ms:Chart>

Depending on if you want the lines to be infront or behind the plotted data, you'd add the StipeLine objects to either the Chart.ForegroundElements or Chart.BackgroundElements collections respectively.

The StartValue for vertical lines should be set to the X value where you want the line to be positioned. When using these on a DateTime axis, the StartValue will need to be the Ticks value of the DateTime where it should be drawn. The line will automatically be drawn from the top to the bottom of the chart viewport.

Let me know if you have further questions about this.

-Jason Fauchelle

Hi Jason,

That works great at plotting the lines on the chart.

Is there a way to add a StripeLine Title or something so it shows up in the legend?

Thanks again,

Doug

Hi Doug,

No sorry, there currently isn't a way to list stripe lines in the legend. You'll need to customize the look of the legend to add custom items such as stripe line titles.

Slightly unrelated, but though I'd point it out in case you need it - you can set the Content and ContentTemplate properties on each StripeLine so that it displays a title (or anything you want) right next to the line.

-Jason Fauchelle

Hi Jason,

I was able to use the StripeLine object but had 2 things I'd like but not sure if its built into the object. If its not build in could you give me an example of how to do it?

1. For a vertical line, is there a way to tell the text to draw the "Content" horizontally instead of vertically?
2. Is there a way to shade the graph in between the StartValue and EndValue with a brush?

Thanks again,

Doug

I'm also using the StripeLine object for a vertical line, but would like to specify where the Content is placed. For a vertical StripeLine, the StartValue fixes it to my x-axis, but I need a way to fix the Content of the StripeLine to my y-axis.

For example, I'm letting the user click on a chart and place a StripeLine, and I'd like the Content to be placed right where the user clicked, and for the label to stay in the correct place on the y-axis when I resize the chart. (See attachment).

Does this make any sense, and if so, is this possible?

Thanks! Leah

Hi Doug,

1) The content can be made horizontal by setting the ContentTemplate and then putting a LayoutTransform on it:

<DataTemplate>
  <TextBlock Text="{Binding}">
    <TextBlock.LayoutTransform>
      <RotateTransform Angle="90" />
    </TextBlock.LayoutTransform>
  </TextBlock>
</DataTemplate>

There is not much control over the position though aside from setting the margin.

2) The area between the lines can be shaded by setting the StripLineStyle - which you're probably doing - and set the Fill property in the style to be the brush you want.

Leah,

The easiest way to control the position of the label relative to the Y axis unfortunately would be to create your own custom control similar to the StripeLine. I've attached the source code of the StripeLine class to help with this. The positioning of the content for vertical lines is right at the bottom of the file.

Let me know if you have further questions.

-Jason Fauchelle

Thanks Jason, when I try to use the StripeLine.cs file, it's not finding AxisRendered or ConvertLogicalToPhysical for the YAxis and XAxis. I have the latest nightly build, any ideas?

Sorry Leah,

These are internal. Instead of AxisRendered, try RangeChanged. And instead of ConvertLogicalToPhysical on the axis, get the first DataSeries from the chart (in the StipeLine_Loaded method) and then you can use the ConvertLogicalToPhysicalPoint method on the series.

This is our FindAncestor method in case you need it:

public static T FindAncestor<T>(DependencyObject from)
  where T : class
{
  if (from == null || !(from is Visual))
  {
    return null;
  }

  T candidate = from as T;
  if (candidate != null)
  {
    return candidate;
  }

  return FindAncestor<T>(VisualTreeHelper.GetParent(from));
}

-Jason Fauchelle

Hi Jason, I was able to get this to work using the StripeLine and setting the content to my own custom Canvas. It took some doing but it's working great.

I also let my users save their data by serializing it using a BinaryFormatter, and would also like to serialize the StripeLines, but they are not marked [Serializable]. Would it be possible to make StripeLine serializable and put it in a nightly build?

(I'm rooting for Jason Day at The Open Championship, if that has any pull!!!)

Thanks, Leah

Hi Leah,

I'm not so sure about marking it as serializable due to it being a UI element (Canvas) rather than a model. I should have made it as a model to begin with really. I hope you can find another way to serialize it - either manually by getting the few properties from them and serializing it, or better yet by creating a serializable model to back it. Sorry I couldn't be of more help here. Let me know if you have further questions as you work on this.

-Jason Fauchelle

No problem, I think I can figure it out, this would've just been the easy way. :) I'm thinking I can save the location and then serialize the content, it shouldn't be hard. Appreciate the response!