LineSeries Straight line problem

Hi Jason,

I'm using version 7.0.49.23289 of WPF Elements. I have attached a picture of my issue. I can't seem to get the data to plot correctly. I keep getting a straight line.

I've a feeling I am missing something. Any help would be appreciated.

Thanks.

I seemed to have fixed this. Error on my part of course.

Another question. How do you get a second LineSeries to use the Alternative Axis?

Thanks

Hi,

Good to hear you fixed the issue.

To plot against an alternate axis, first add a ChartAxis to the AlternateYAxis collection. Make sure to set the Title property of the axis. Then, on the LineSeries that you want to plot against the alternate axis, set the YAxisTitle property to be the same as the Title you set on the alternate axis.

Let me know if you have further questions about this and I'll help you out.

-Jason Fauchelle

Thanks for the reply. Worked a treat.

Do you have any examples of a chart with multiple line series and binding? Also, is there any way to make the lines thinner than they are?

Thanks.

Hi,

WPF Elements comes with a sample project called Sample Explorer which will help you out here. An example of multiple line series with bindings can be found in SampleExplorer/Demos/Charts/LineCharts/LineChartDemo.xaml

Customizing the look of the line can be done by setting the LineStyle property of a LineSeries which is also demonstrated in the Sample Explorer demos. Examples of custom line styles can be found in App.xaml such as ShadowLineStyle.

Let me know if you have questions about any of this.

-Jason Fauchelle

Hi Jason,

This is perfect.

Thanks again!!

Hi Jason,

Is there a way to get a label on the axis for every point on the chart? I am using a line series.

Thanks.

Hi,

Yes, you can do this by setting the MajorTickSpacing property on the X ChartAxis to 1 (Or the logical spacing between each point in your line series).

Please let me know if you have questions about this.

-Jason Fauchelle

Hi Jason,

This works for the YAxis but no the XAxis. I am using DateTimeDouble and I need the XAxis to be the time for each point. I can only get them to work when the spacing is high.

I have also ran into another problem. I've provided screenshots. In the first picture it is the chart on initial load. This is not how it is supposed to look but when I zoom into the chart it is fine, see zoom 1 and 2. Also notice that on the first zoom my time changes to its format string along with some number, I'm guessing it is a value from the chart.

Any help on this would be appreciated.

Thanks.

Hi Klogue,

For plotting DateTime data, I'd recommend trying to set the ValueConverter property of the X ChartAxis to be an instance of the DateTimeAxisValueConverter. This should certainly solved the misformatted label, and possibly the initial load issue. Displaying a label for each point is slightly different though, you'll need to calculate the number of ticks between 2 adjacent points. In code, this could be done by creating a TimeSpan object by talking the DateTime difference between 2 points, then get the Ticks value from the TimeSpan, and use that to set the MajorTickSpacing. You could either keep this in code, or once you've calculated the value once, hard-code it. Then, set the LabelStep property of the X ChartAxis to 1, so that a label is displayed for every tick. If you see that a label is not displayed for every point when you zoom, then try setting the AllowMajorTickSpacingZoomAdjustment property to false.

Let me know if this does not produce the behavior you want.

-Jason Fauchelle

Thanks for the reply Jason.

Still can not get the X Axis to have a time for every point. I know that the ticks are 0.100. It doesn't matter what I set the MajorTick spacing to as they always stay the same.

Any ideas?

Thanks again.

Hi Klogue,

0.100 seems a bit low, I would expect it to be over 1, maybe even in the 1000s depending on the units you're working with. If the problem remains, please send me a simple repro project or code snippet and I'll take a look.

-Jason Fauchelle

Hi Jason,

Apologies, I misread the previous post and converted the number further. I have tried all your suggestions but to no avail.

Here is some sample code.

<ms:ChartAxis LabelFormat="{Binding TimeLabel}" Title="{Binding TimeTitle}" Foreground="White" AxisLineStyle="{StaticResource AxisLineStyle}"
                          LabelRotation="90" LabelStep="1" MajorTickSpacing="{Binding MajorTickSpace}" ValueConverter="{StaticResource DateTimeAxisValueConverter}"/>

Note: Ticks are 1000000.

DateTime f = DateTime.FromOADate(42392.5783449074);
            DateTime r = DateTime.FromOADate(42392.5783460648);
            double ticks = r.Subtract(f).Ticks;
            MajorTickSpace = ticks;

I have set MajorTickSpace to be an Int and Double but neither work. I also hard coded the MajorTickSpacing in the XAML. Hopefully these bits of code can help shed some light.

Thanks.

Just adding another question.

How would you go about binding the value in a MarkedStripe? I've tried but again I can't get it to work correctly.

Hi Klogue,

My apologies, turns out the date time axis value converter ignores the MajorTickSpacing property. It has its own options for controlling the ticks. You'll want to set the IntervalUnit and IntervalMagnitude properties on the DateTimeAxisValueConverter. 1000000 ticks is 100 milliseconds, so you can set IntervalUnit to Millisecond, and IntervalMagnitude to 100. DateTimeAxisValueConverter also provides a way to control the unit and magnitude as you zoom, so let me know if you ever want to do this.

The MarkedStripeGrid could have been implemented a bit better. The problem is that MarkedStripe is purely a model object, rather than a framework element. Because of this, binding from the xaml isn't going to work as far as I know. There are 2 options I can think of to work around this:

1. Instead of using MarkedStripeGrid, you could use some StripeLine controls instead to build up the same effect. StripeLine is a Canvas, and so bindings will work fine. You can set the StartValue to be the logical axis plotting point to position the line. Then, if necessary, set the EndValue OR Range properties to create a colored area.

2. If you find it will be easier to continue using MarkedStripeGrid, I would recommend implementing an attached property that you can set on the MarkedStripeGrid. This could bind to a collection in your model that either provides the MarkedStripe model objects, or your own model objects. The attached property would then have the logic to add MarkedStripe instances to the MarkedStripes collection of the grid it's attached to.

Let me know if you have further questions about any of this.

-Jason Fauchelle

Thanks again Jason.

The Stripe line seems to be the best option at the moment only the colours won't set. Each stripe is getting the last Stripes colour. These are all in Chart.BackgroundElements. I'm guessing the background is not per stripe rather the charts background?

<ms:StripeLine Background="LightBlue" StartValue="0" EndValue="2" YAxis="{Binding ElementName=MainY}"/>
            <ms:StripeLine Background="Green" StartValue="2" EndValue="5.5" YAxis="{Binding ElementName=MainY}"/>
            <ms:StripeLine Background="Orange" StartValue="5.5" EndValue="7" YAxis="{Binding ElementName=MainY}"/>
            <ms:StripeLine Background="Red" StartValue="7" EndValue="12" YAxis="{Binding ElementName=MainY}"/>

I set this up as a test that's why the values are hard coded. Cheers.

Hi klogue,

I think you're right about it being the charts background. The Background property is not used on StripeLine, though we probably should have made use of it.

What you'll want is the StripeStyle property. This Style gets applied to a Rectangle, so you'll want to set the Fill property in order to give it some color. You can set the Stroke and StrokeThickness properties if you want to style the edge at each side of the stripe.

Hope that solves the issue. Let me know if you have further questions about it.

-Jason Fauchelle