Alternative Y-Axes questions

Hello

We are using the Graph component in WPF Elements 6.0.2734.23168.

We would like to show our alternative axes as an overlay over the graph as opposed to have them placed on the side of the graph (left,right etc..). Is this possible? See screen shot for this (graphallhorizontal.png).

Also, we would like to show all the Y-axes at the same time vertically on the left where all corresponding lines are plotted correctly to each axes. See screen shot for this as well (graphallvertical.png).

Best regards Nicklas

Hello Nicklas

You can achieve graph/horizontal by setting the Placement property of each alternative Y axis to be Overlay.

Unfortunately graph/vertical is not yet a built in feature. You could achieve this by creating 5 chart controls and stack them on top of each other. You'd need to style the stacked charts to hide the X axis (or make it look like a dotted line) and set the padding and so on to get the look that you want. You'd then need to do things like synching the panning operations across all charts. The background Grid could be tricky. Either have a background grid on each chart, or have a global grid in the background.

I've made a note of this scenario as a possible feature to add in a future version. Let me know if you need halp as you work on this.

-Jason Fauchelle

Hello

We really need to be able to implement the graph/vertical functionality in our application. We humbly request that this feature is implemented in the near future.

We have multiple use cases for this feature in our application. It is not just a question of presentation - it is tightly connected to the functionality we want to achieve.

Best regards
Nicklas

Hello Nicklas

I have boosted the priority of this request for you so that I will get it done sooner. I won't start this straight away, but I am aiming to get it done by the end of March. I will keep you posted on how it goes.

Regards

-Jason Fauchelle

Hello Jason

That sounds great. Looking forward to seeing the results.

Best regards
Nicklas

Hello Nicklas

I've been working on a high priority project recently which is almost done. I am hoping to work on the axis stacking feature early next week. Keep in mind that if it turns out to be too complicated to implement, I will need to put it on the backlog for now. I do have a good plan of action though. Will let you know how it goes soon.

-Jason Fauchelle

Hello Jason

Looking forward to seeing the results.

/N

Hello Nicklas

The axis stacking feature will be available in the next nightly build. You can stack the axes by setting the new StackIdentifier property of all the Y axes that you want to stack (including the primary YAxis). The position of the stack (left / right) will be based on the position of the first axis in the stack. The axes are stacked from bottom to top in the order they are added to the Chart. You can not currently stack axes that are overlaying the chart, also, IsReversed will not work correctly on stacked axes.

Below is some sample code that stacks the primary Y axis with an alternate Y axis. There are 2 series, the first series (red) is plotted on the primary Y axis. The second series (green) is plotted against the alternate axis based on the YAxisTitle property. Both the YAxis and the alternate Y axis have the StackIdentifier set to "1". This can be whatever you want. The Placement of the alternate axis is set to Left so that it is rendered facing the correct way (I may make this automatic in the future - as the base of the stack will already be on the Left).

<ms:Chart Title="Stack Axes" Grid.Row="1" LegendPosition="None">
  <ms:LineSeries ItemsSource="{Binding Data1}" SeriesBrush="Red" />
  <ms:LineSeries ItemsSource="{Binding Data2}" SeriesBrush="Green" YAxisTitle="Alt" />
  <ms:Chart.ForegroundElements>
    <ms:ChartGrid />
    <ms:ChartGrid YAxis="{Binding ElementName=Axis1}" />
  </ms:Chart.ForegroundElements>
  <ms:Chart.AlternativeYAxes>
    <ms:ChartAxis Name="Axis1" StackIdentifier="1" Title="Alt" TitleVisibility="Collapsed" Foreground="Green" Placement="Left" />
  </ms:Chart.AlternativeYAxes>
  <ms:Chart.YAxis>
    <ms:ChartAxis StackIdentifier="1" Foreground="Red" />
  </ms:Chart.YAxis>
</ms:Chart>

In the image you posted, it looks like there are grid lines for each individual stacked axis - each grid line lines up with a tick mark on each axis. This is good as our ChartGrid works in the same way. To get a similar effect to the image you posted, you can add multiple ChartGrid instances to the ForegroundElements collection - one for each axis. By default they will map to the primary X and Y axes. For each grid that is not to use the default axes, you can manually set YAxis to point to the alternate axis you want. This can be done with a simple ElementName binding as seen in the above code. One issue is that the vertical grid lines extend their respective rendering areas, which means you can't really set them to have a dash-dot pattern because they will all overlap and probably make a solid line. If you want vertical dash dot lines, set the dash dot on the first grid, and then set the color of the vertical lines on all the other grids to be transparent.

You may notice the grid lines can quite often be 1 pixel off from the corresponding tick marks. This is because the height of each axis is generally never an integer which makes pixel precision difficult. The vertical position of the rendered data can also be a pixel off, but the logical data they hold as well as tooltips, labels and data annotations will always be correct.

I hope this meets the requirements of your application.

-Jason Fauchelle

Hello Jason

This looks really promising. I have a question though, how can i sync a collection of chartgrids to our chart? we already have a custom foreground element applied to it. Is it possible to synchronize it the same way we synchronize data series but we make a distinction on the type of the object we want to synchronize, i.e. only chartgrid objects....?

Basically I want to be able to add chart grids dynamically as we add data series dynamically from code.

It all seems to work if i keep the chart data static, but as soon as i try to add series, axes and chartgrids dynamically it all goes wrong and the chart won't plot any data. If i skip the stack identifier i seem to get it to plot all axes with their grids in the same area, you can tell by the minor tick marks (see attached screen shot), but when i add the stack identifier it won't plot any data.

//Nicklas

Hello Nicklas

Thanks for pointing out the stacking issue. There was a minor bug preventing this from being updated when adding a stacked axis dynamically. This will be resolved in the next nightly build.

I have not tried to sync a collection of chart grids, but it should be easy enough. You just need to add or remove grids from the BackgroundElements collection. This is an ObservableCollection so should update the visuals dynamically. An MVVM approach to this would be to create an attached property for the Chart control which can keep this in sync. Hope that helps.

-Jason Fauchelle

Hello Jason

I can get it to work now if I only use the "Vertical axes" mode. Problems occur though when I try to switch between different axes modes, for example between "Normal", "Overlay" and "Vertical stack". I have attached some screen shots that illustrate the problem, they are numbered from 1 to 5 to indicate the chronology:

Step 1: Normal axes mode Step 2: Overlay mode Step 3: Vertical stack where the charts don't seem to stack the charts as it should (it worked when I only used this mode from the beginning though) Step 4: Back to Overlay mode. I get a small extra axis, see red marking in screen shot. Step 5: Back to Normal mode, the extra axis is still there.

I have also attached a text file the show a bit of the logic behind the axes mode switch.

//N

Thanks for the code and screenshots Nicklas

Switching between axis modes will be improved in the next nightly build. I was unable to reproduce the issue with the small extra axis. This may be caused by the way you are updating the alternative axes collection. If this is not solved in the next nightly build, debug the chart while it is displaying the extra axis and see if the alternative axes collection is what you'd expect. If you need assistance, please send some more code or a repro project.

-Jason Fauchelle

Hello Jason

It works better but still has some issues.

I have email you a small sample project regarding this issue.

Best regards Nicklas

Hello Nicklas

Thanks for sending me the repro project, this was a huge help. these remaining issues will be resolved in the next nightly build.

-Jason Fauchelle

Hello Jason

I have some questions regarding the vertical axes mode. I've attached a screenshot, RadarPlotTickMarksGrid.png, where I've marked out three issues.

• (1) The offset between the gridline and the tick mark sometimes get extremely large, 6-7 pixels and not 1-2 pixels which could be expected because of rounding errors.
• (2) It would be very good if the horizontal grid lines only were visible for the tick marks that show values. See my attached screen shots from our old application that is our reference for how we want it to work. RadarPlotTickMarksGridOldChartLarge.png and RadarPlotTickMarksGridOldChartSmall.png. In the larger screen shot you can also clearly see that the grid lines are more evenly distributed over the whole chart, could this be achieved somehow in your chart component?
• (3) What happens here with the grid lines?

Also, if you look at the RadarPlotTickMarksGrid.png screen shot you can see that some of the series lines disappear because they fall on the same pixels as the grid lines. Could it be solved so that the series lines get plotted on top of the grid lines instead of the other way around (z-index?).

Best regards //N

Hello Nicklas

1/ Thanks for pointing this out. This will be resolved in the next nightly build.

2/ To get the chart looking more like your old version, it isn't really a matter of only rendering grid lines on the numbered tick marks, it is a matter of reducing the number of major tick marks so that there is always a label for each major tick mark, and then you can enable the minor tick marks. This will also allow you to make the grid lines more evenly distributed. You can control the spacing between major tick marks by setting the MajorTickMarkSpacing property of each axis. You'll need to write an algorithm that looks at the minimum and maximum of an axis, and determines an appropriate major tick spacing. This would either be 1, or a factor of 10. The Chart control does this, but as you can see it's not quite right for your application as it's adding too many tick marks. You can enable minor tick marks using the MinorTickMarkVisibility and MinorTickMarkCount properties.

3/ This should be the same issue as number 1.

Make sure you are adding the grids to the BackgroundElements collection, not the ForegroundElements.

Let me know if you have further questions.

-Jason Fauchelle

Hello Jason

There seems to be some logic controlling which labels are visible on each axis. Resizing my window changes the number of labels visible but not the number of tick marks. Would it be possible to apply the same logic on the tick marks as on the labels? That way it would be easy to only show tick marks for the visible labels.

Best regards
Nicklas

Hello Nicklas

In the next nightly build of version 6.0 and 7.0, simply set the new IsLabelStepAppliedToTickMarks property of each axis to true. This will cause the tick marks to use the same skipping logic as the labels - thus only showing tick marks for the visible labels.

-Jason Fauchelle

Hello Jason

Great, looking forward to testing it.

Another question. How can I set a margin between each "Chart" when I use the "Vertical axes" option? Now if i have a lot of them they almost blend into each other.

Best regards
Nicklas

Hello Nicklas

I think what you want to do is set the Padding property of the Y axes. In particular, set the Top or/and Bottom of the padding to be 10 or so, this will push the rendering area of that axis inwards by the specified number of pixels. If this causes problems with rendering the grid lines, get the next nightly build as I've fixed a bug related to this.

-Jason Fauchelle

Hello Jason

I got a question regarding the labels on our y axes. As you can see on my two example screen shots that I've attached the labels on the y axes are shown on top of the x axis. They should disappear/be clipped earlier.

Can this be fixed somehow?

Best regards
Nicklas

Hello Nicklas

This will be improved in the next nightly build.

-Jason Fauchelle

Hello Jason

I've discovered some issues with with the vertical axes mode. I've attached some screen shots.

First, as you can see in the notontherightline.png and notontherightline2.png image the series get plotted with an offset to their axis. I've marked some obvious examples. When you have quite alot of axes on a small chart area it would be good if there was clipping/hiding of labels etc when axes comes to close to each other.

In the paddingonaxes.png screen shot you can see that setting a padding on the alternative axes can get all the data series to be pushed down. Also when you set a padding and have a lot of axes on a small area, i.e. you scale the chart down, the clipping/hiding doesn't work that well.

Best regards Nicklas

Hello Nicklas

In the next nightly build, the rendering position of the data will be resolved both when there is Padding applied to the axes or not. We won't be able to implement a way to avoid cross-axis label overlaps right now. I hope the Padding feature will be good enough for now to minimize this.

-Jason Fauchelle