This project is read-only.

How to programmatically add a second Y axis and plot data in the same Chart or Grid

Jan 13, 2012 at 10:24 PM


I have two data sets, that I would like to overlay on a Grid. I would like to plot them on the same Grid, using the same X-axis, but each set would use a different Y-axis. For example, one data set may have Y values that range between 0 to 100, while the other set may have values that range between 1000 to 10,000). The X values for both sets would range from 0 to 100. Y axis labels would be on the right and left sides of the Grid.

I've been able to use one X and Y axis rather easily, following the examples, but I'm not sure how to add a second Y axis and then add my data so it is associated with that second axis.

For my simple chart, my XAML looks like this (abbreviated)

   <Grid x:Name="LayoutRoot" Background="White">
       <d3:Chart Name="chart" BottomTitle="Time" LeftTitle="Value" Margin="0,0,0,24">
           <Grid x:Name="lines" />


My code in MainPage.xaml.cs looks like this (abbreviated):

               var linegraph = new LineGraph();
Coordinates dataSet = GetDataSet();


where Coordinates is my own class that manage a lists of X and Y coordinates.

I was thinking that I need to add another axis to lines.Children and then add additional data to that, but I'm not sure how that is done. Any suggestions would be appreciated.


Jan 14, 2012 at 10:47 AM

Take a look at the "TwoIndependentAxes" sample and see if it helps.   - David

Jan 15, 2012 at 1:10 AM

I did have a look at it. The XAML is different, as follows. This does give me some clues as to what I need to do in C# to accomplish the same thing

    <Grid x:Name="LayoutRoot" Background="White">
        <d3:Figure x:Name="figure">
            <TextBlock d3:Figure.Placement="Top" FontSize="14" Text="Two scales sample" TextAlignment="Center" Margin="5"/>
            <d3:PlotAxis x:Name="leftAxis" d3:Figure.Placement="Left" AxisOrientation="Left" Foreground="Blue"/>
            <d3:PlotAxis x:Name="bottomAxis" d3:Figure.Placement="Bottom" AxisOrientation="Bottom"/>
            <d3:LineGraph x:Name="sinc" Stroke="Blue"/>
            <d3:LineGraph x:Name="xcube" Stroke="Red">
                    <d3:LinearDataTransform Scale="0.001"/>
            <d3:PlotAxis x:Name="rightAxis" d3:Figure.Placement="Right" AxisOrientation="Right" Foreground="Red" YDataTransform="{Binding YDataTransform,ElementName=xcube}"/>

but no luck so far. I'm thinking I need to associate a second PlotAxxis with my data, and I see this XAML

YDataTransform="{Binding YDataTransform,ElementName=xcube}"/

but I'm not sure how to express this in C#.


Jan 19, 2012 at 10:27 PM

So far I've been able to add the Y-axis on the right. But that's about it.

PlotAxis rightAxis = new PlotAxis() { AxisOrientation = AxisOrientation.Right }; 
Figure.SetPlacement(rightAxis, Placement.Right);




Jan 20, 2012 at 2:41 AM


Use injectedPlotter, You can have full control over y axis and your plot area(What you are plotting)



Jan 20, 2012 at 3:35 PM
Edited Jan 20, 2012 at 10:05 PM

Hi Ravi, thanks for your advice. I do need some help. I can't find InjectedPlotter class. Do I need a different version of D3? Right now I'm using DynamicDataDisplay.Silverlight.dll version is 2.0.907.0 but Silverlight support is not a requirement for me. I need a data visualization tool I can run on a Windows desktop and integrate into a test harness for an application I am developing (so I think either WPF or Silverlight will work for me).  Regards, Mark

Never mind... :-) I found the InjectedPlotter in the Nightly build directory of dynamicdatadisplay-31108, so I'm going with WPF and dropping Silverlight version for now.

OK I got this working with the WPF version. I was surprised to find the classes and interfaces are completely different (WPF vs Silverlight).

                    var x = data.X.AsXDataSource();
                    var y = data.Y.AsYDataSource();
                    CompositeDataSource dataSource = x.Join(y);
                    innerPlotter.AddLineGraph(dataSource, this.NextColor, 2, data.Label);

 Thanks for your help!