Multiple Y axes?

Hi,

I'm wondering if it is possible to specify two Y axes (left and right) for the chart control?

I have a customer that wants a line chart with three lines; two of which correspond to the left Y axis, one to the right.

Kind regards.

Hello

Yes this is a built in feature, here is some example code:

<ch:Chart Title="Multiple Y Axis">
    <ch:LineSeries SeriesBrush="Red" />
    <ch:LineSeries SeriesBrush="Green" />
    <ch:LineSeries SeriesBrush="Blue" YAxisTitle="Secondary" />
    <ch:Chart.XAxis>
        <ch:ChartAxis Minimum="0" Maximum="7" Title="X Axis" />
    </ch:Chart.XAxis>
    <ch:Chart.YAxis>
        <ch:ChartAxis Minimum="0" Maximum="10" Title="Y Axis" />
    </ch:Chart.YAxis>
    <ch:Chart.AlternativeYAxes>
        <ch:ChartAxis Minimum="0" Maximum="1" Title="Secondary" />
    </ch:Chart.AlternativeYAxes>
</ch:Chart>

This chart has been set up with 3 line series. An extra axis has been added to the AlternateYAxes collection property. Notice that the blue line series YAxisTitle property has been set to be the same name as the additional Y axis. ("Secondary") This specifies which Y axis the series will be plotted against. Any axis added to the AlternateYAxes collection will be aranged on the right hand side of the chart. Note that you probably want to change the Minimum and Maximum axis values from this example code. (Or remove these properties completly so that they will be set automatically by the chart control).

Let us know how it goes.
 - Jason 

Oh, that's excellent, exactly what I was looking for. Thanks a lot!

Hi again,

It seems I have some problems linking a series to the alternative Y axis. When I do so (providing the YAxisTitle attribute to the LineSeries element), all the values are disregarded it seems - that is, I get a flat line at zero. When I omit the YAxisTitle attribute, the values for the series are plotted as they should.

Here's the code I'm using. The Values property contains a list of elements where X is a string representation of a timestamp and Value is a double. Any help would be greatly appreciated.

Am I doing something wrong? Or could it be a bug?

<ch:Chart Title="{Binding Path}">
            <ch:LineSeries ItemsSource="{Binding Sensor1.TimeSeries.Values}" XBinding="{Binding X}" YBinding="{Binding Value}" SeriesBrush="LightGreen"/>
            <ch:LineSeries ItemsSource="{Binding Sensor2.TimeSeries.Values}" XBinding="{Binding X}" YBinding="{Binding Value}" SeriesBrush="Pink"/>
            <ch:LineSeries ItemsSource="{Binding Sensor3.TimeSeries.Values}" XBinding="{Binding X}" YBinding="{Binding Value}" SeriesBrush="LightBlue" YAxisTitle="Temperature"/>
            <ch:Chart.XAxis>
                <ch:ChartAxis Title="Time" />
            </ch:Chart.XAxis>
            <ch:Chart.YAxis>
                <ch:ChartAxis Title="Pressure" />
            </ch:Chart.YAxis>
            <ch:Chart.AlternativeYAxes>
                <ch:ChartAxis TitleVisibility="Visible" Title="Temperature" />
            </ch:Chart.AlternativeYAxes>
        </ch:Chart>

Hello

Thanks for pointing this out. Turns out there was a bug with automatically setting the minimum and maximum values of an alternate axis. This bug has now been fixed and you can get this update through the nightly builds from tomorrow the 19th of August. Nightly builds can be found on the downloads page: http://www.mindscapehq.com/products/phone-elements/nightly-builds

Alternativly, you can set the minimum and maximum values of the axes manually if these values are know.

Let us know how it goes
 - Jason 

Thanks a lot, it now seems that I get correct scaling of the y-axis - although the text for the alternative axis still disappears? Also, I have problems changing colors for the alternative axis using the AxisLineStyle. The bizarre thing is that I can change the color of the tick marks, but not the line it seems. I am trying to create a black-on-white chart. The code I have is this:

<ch:Chart.AlternativeYAxes>
                <ch:ChartAxis Title="Temperature">
                    <ch:ChartAxis.AxisLineStyle>
                        <Style TargetType="Border">
                            <Setter Property="BorderBrush" Value="Black" />
                            <Setter Property="BorderThickness" Value="1"/>
                        </Style>
                    </ch:ChartAxis.AxisLineStyle>
                    <ch:ChartAxis.MajorTickMarkStyle>
                        <Style TargetType="Border">
                            <Setter Property="BorderBrush" Value="Black" />
                            <Setter Property="BorderThickness" Value="1"/>
                        </Style>
                    </ch:ChartAxis.MajorTickMarkStyle>
                </ch:ChartAxis>
            </ch:Chart.AlternativeYAxes>

Any help would be greatly appreciated.

Thanks again,

Einar

Hello Einar

By default, alternate axis titles are not displayed. You can display the title by setting the TitleVisibility property on the ChartAxis.

Styling the axis line of an alternate axis was missing functionality. I have fixed this now and an update will be available through the nightly builds from tomorrow the 31st of August.

Also, the best way to change the color of the axis lines and tick marks is to simply set the Background property rather than both the BorderBrush and BorderThickness.

 - Jason

Hi Jason,

Thanks again for excellent support! I've updated the code as suggested and eagerly await the next nightly build! :-)