Pre loader

Vertically stacked Y-Axis

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hello, I’m looking to do something similar to your example titled “WPF Chart Vertically Stacked YAxis”, but I’d like to be able to hide a data series and associated axis based on check boxes, and have the remainder of the series fill the empty space.

Do you have any example of something like this?

Thanks.

Version
6
  • You must to post comments
0
0

Hi Aaron

We dont have an example, but I’ve created you one as it’s quite simple to achieve.

VerticallyStackedAxis requires that you template the left or right axis panel template in order to show the axis one on top of another. Also, you need some code to dynamically add/remove (or show hide) axis. Like this.

<Window x:Class="WpfApp33.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        xmlns:wpfApp33="clr-namespace:WpfApp33"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ItemsPanelTemplate x:Key="DynamicPanel">
            <UniformGrid Columns="1"/>
        </ItemsPanelTemplate>

        <wpfApp33:MainViewModel x:Key="vm"/>
    </Window.Resources>

    <Grid DataContext="{StaticResource vm}">

        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <Button Content="Add Series" Command="{Binding AddSeriesCommand}"/>
            <Button Content="Remove Series" Command="{Binding RemoveSeriesCommand}"/>
        </StackPanel>

        <!--  Create the chart surface  -->
        <s:SciChartSurface x:Name="sciChart"
                           Grid.Row="1"
                            YAxes="{s:AxesBinding YAxis}"
                            RenderableSeries="{s:SeriesBinding Series}"
                            LeftAxesPanelTemplate="{StaticResource DynamicPanel}">

            <!--  Create an X Axis with Growby  -->
            <s:SciChartSurface.XAxis>
                <s:NumericAxis />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RubberBandXyZoomModifier IsXAxisOnly="True" />
                    <s:ZoomExtentsModifier />
                    <s:CursorModifier ShowAxisLabels="False" ShowTooltip="False" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>
    </Grid>
</Window>


    public class MainViewModel : BindableObject
    {
        public MainViewModel()
        {

        }

        public ICommand AddSeriesCommand => new ActionCommand(() =>
        {
            var axisId = Guid.NewGuid().ToString();
            Series.Add(new LineRenderableSeriesViewModel() { DataSeries = GetData(), YAxisId = axisId});
            // important, left alignment has been templated as vertically stacked axis
            YAxis.Add(new NumericAxisViewModel() { Id = axisId, AxisAlignment = AxisAlignment.Left}); 
        });

        public ICommand RemoveSeriesCommand => new ActionCommand(() =>
        {
            if (Series.Count > 1)
            {
                Series.Remove(Series.Last());
                YAxis.Remove(YAxis.Last());
            }
        });

        public ObservableCollection<IAxisViewModel> YAxis { get; } = new ObservableCollection<IAxisViewModel>();

        public ObservableCollection<IRenderableSeriesViewModel> Series { get; } = new ObservableCollection<IRenderableSeriesViewModel>();

        private IDataSeries GetData()
        {
            var xyDataSeries = new XyDataSeries<double>();
            var random = new Random((int)DateTime.UtcNow.Ticks);
            var phase = (random.NextDouble() + 0.5) * 10;
            for (int i = 0; i < 100; i++)
            {
                xyDataSeries.Append(i, Math.Sin(i * phase));
            }

            return xyDataSeries;
        }
    }

The Axis Panel template is a UniformGrid, which automatically spaces out elements equally. I have set it to one column and unlimited rows.

The SciChartSurface binds to ViewModel YAxis and RenderSeries properties, and finally buttons add/remove one series per axis.

This code has also been pushed to our Customer Examples at Github. under DynamicVerticallyStackedAxis.

hope this helps!

-Andrew

  • You must to post comments
0
0

Thanks Andrew.

I’ll take a look at your solution in a bit. In the mean time I also got the effect I was looking for using styles and data triggers combined with some checkboxes.

Thanks again.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies