Tag: MVVM

Hello,

how can i implement a vertically stacked y axis chart like in your example (WPF Chart Vertically Stacked YAxis) with MVVM and a varying number of y axes. Your example has a fixed number of y axes and the needed YAxesPanel is directly implemented in your xaml code. What is the best way to achieve the same result with a varying number of y axis?

Best regards
Alexander

Hi! I have problems with visible range managing of a polar plot

The code in xaml:

<s:SciChartSurface graphModule:PlotLengthHelper.PlotLength="{Binding PlotLength, Mode=OneWayToSource,   UpdateSourceTrigger=PropertyChanged}" 
                       x:Name="ChartSurface"
                       SizeChanged="ChartSurface_OnSizeChanged"
                        ChartTitle="{Binding ChartTitle}"
                       s:ThemeManager.Theme="BrightSpark"
                        Annotations="{s:AnnotationsBinding Annotations}"
                       RenderableSeries="{s:SeriesBinding Series}"
                       XAxes="{s:AxesBinding XAxes}"
                       YAxes="{s:AxesBinding YAxes}"

First example. The code of the axis:

    var yAxis = new PolarYAxisViewModel {AutoRange = AutoRange.Never};
    YAxes.Add(yAxis);

Changing the VisibleRange of the axis has no any effect on the visible range of the graph. It sets automatically in the very first time and remains the same.

Second example.

    var yAxis = new PolarYAxisViewModel {AutoRange = AutoRange.Always};
    YAxes.Add(yAxis);

Changing the data (using line series) again has no any effect on the visible range of the graph. Again, it sets automatically in the very first time and remains the same.

Any suggestion on how to fix it? Especially the first case is required. Thanks.

How can I apply my style and template to my axes if I created the axes as NumericAxisViewModel in code and bound them to my SciChartSurface in my xaml view?

Regards,
Roland

Hello support team.

I have a question about the resampling modes and their behavior.
I have a LineRenderableSeries with the resampling mode.mid. Therefore, depending on the zoom level and available pixels of the display screen, the information of the min and max values are lost. I had the idea to create a second LineRenderableSeries with the Opacity 0.5 and the ResamplingMode.Min Max. Thus I have behind the main line with the resampling mode.mid a “cloud” with the MinMax info. This allows the user to see this information as well. However, I would deactivate this cloud if it is not necessary due to the zoom level and the pixels.
How can I request this from SciChartControl? Or does it make more sense to use a different functionality?
I use the Mvvm classes LineRenderableSeriesViewModel, and XyDataSeries.

Thank you very much!

Hi,
I’m experimenting with the LegendModifier and want to control which RenderableSeries are shown via the “LegendItemTemplate” approach. The idea is to add a specific tagging class to the RenderableSeries.DataSeries.Tag and use the content inside the LegendItemTemplate which I define in the Window.Resouces.

The tagging Class:

public class DataSeriesTag
{
    public string LegendText { get; set; }
    public bool ShowLegend { get; set; }
}

The LegendItemTemplate:
<Window.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

            <!--<CheckBox Width="16" Margin="5,0,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                IsChecked="{Binding RenderableSeries.IsVisible, Mode=TwoWay}"
                Visibility="{Binding RenderableSeries.DataSeries.Tag.ShowLegend, Converter={dxmvvm:BooleanToVisibilityConverter}}" />-->

            <s:PointMarker Grid.Column="1" Margin="5,0,0,0" Width="40" Height="10" VerticalAlignment="Center" HorizontalAlignment="Center"
              DataContext="{Binding RenderableSeries}"
              DeferredContent="{Binding LegendMarkerTemplate}"
              Visibility="{Binding ShowSeriesMarkers, RelativeSource={RelativeSource AncestorType=s:SciChartLegend}, Converter={dxmvvm:BooleanToVisibilityConverter}}" />

            <TextBlock Margin="5,0,5,0"
     Grid.Column="2"
     HorizontalAlignment="Left"
     Text="{Binding RenderableSeries.DataSeries.Tag.LegendText}" />

        </Grid>
    </DataTemplate>
</Window.Resources>

As long as I declare the SciChartSurface.ChartModifier in XAML, it works perfect.
The proplem raises when I bind the ModifierGroup to a ViewModel Property and try to build the LegendModifier there. How can I assign the LegendItemTemplate in the ViewModel?:

legendModifier = new LegendModifier(){
            ShowLegend = true,
            ShowVisibilityCheckboxes = false,
            LegendItemTemplate = ??????
        };
        TheModifiers.ChildModifiers.Add(legendModifier);

Kind regards
Martin

Hi,

CompositeAnnotation works perfectly and easy to use, but I need it in MVVM. CompositeAnnotationViewModel looks the same, but it is not visible. This is my code:

AnnotationViewModels.Add(new CompositeAnnotationViewModel()
{
    Annotations = new ObservableCollection<IAnnotationViewModel>()
    {
        new VerticalLineAnnotationViewModel
        {
            VerticalAlignment = VerticalAlignment.Stretch,
            Stroke = Colors.Blue,
            StrokeThickness = 2,
            IsEditable = true,
            StrokeDashArray = new DoubleCollection() { 2, 2 },
            CoordinateMode = AnnotationCoordinateMode.Relative,
            X1 = 0
        },
        new VerticalLineAnnotationViewModel
        {
            VerticalAlignment = VerticalAlignment.Stretch,
            Stroke = Colors.Blue,
            StrokeThickness = 2,
            IsEditable = true,
            StrokeDashArray = new DoubleCollection() { 2, 2 },
            CoordinateMode = AnnotationCoordinateMode.Relative,
            X1 = 1
        }
    },
    IsEditable = true,
    X1 = 3,
    X2 = 5
});

What is my mistake?

Getting an exception when trying to add tooltip template MVVM style to a blox plot. The chart also contains a scatter plot which should not be styled. That works fine, hoverwer, when I move the mouse over a box in the box plot, the exception is thrown.

I want to keep the styling, I just want to write something different than the default text.

The template:

  <DataTemplate DataType="scalarPlot:ToolTipData" x:Key="BoxSeriesTooltipTemplate">
    <TextBlock>
      <Run Text="Max:      " />
      <Run Text="{Binding Maximum}" />
      <LineBreak />
      <Run Text="P90:       " />
      <Run Text="{Binding P90}" />
      <LineBreak />
      <Run Text="Median: " />
      <Run Text="{Binding Median}" />
      <LineBreak />
      <Run Text="P10:       " />
      <Run Text="{Binding P10}" />
      <LineBreak />
      <Run Text="Min:       " />
      <Run Text="{Binding Minimum}" />
      <LineBreak />
    </TextBlock>
  </DataTemplate>

The binding:

      <Style TargetType="s:BaseRenderableSeries" x:Key="BoxSeriesStyle">
        <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource BoxSeriesTooltipTemplate}"/>
        <Setter Property="s:TooltipModifier.IncludeSeries" Value="True"/>
      </Style>

The modifier:

<s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
        <s:TooltipModifier IsEnabled="True" ShowTooltipOn="Always" ReceiveHandledEvents="True" TooltipLabelDataContextSelector="{Binding ToolTipDataContext}"/>
      </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>

The view model:

    private static IRenderableSeriesViewModel CreateBoxPlotViewModel(BoxPlotDataSeries<int, float> boxPlotDataSeries)
    {
        return new BoxPlotRenderableSeriesViewModel
        {
            DataSeries = boxPlotDataSeries,
            Stroke = Colors.SteelBlue,
            Fill = new LinearGradientBrush(Colors.White, Colors.LightSteelBlue, new System.Windows.Point(0, 0), new System.Windows.Point(0.5, 1)),
            StyleKey = "BoxSeriesStyle"
        };
    }

The data context selector:

    public Func<SeriesInfo, object> ToolTipDataContext
    {
        get
        {
            return seriesInfo =>
                   {
                       return seriesInfo switch
                       {
                           BoxPlotSeriesInfo boxInfo =>
                               new ToolTipData
                               {
                                   Fill = seriesInfo.Fill,
                                   Stroke = seriesInfo.Stroke,
                                   Maximum = (float) boxInfo.MaximumValue,
                                   P90 = (float) boxInfo.UpperQuartileValue,
                                   Median = (float) boxInfo.MedianValue,
                                   P10 = (float) boxInfo.LowerQuartileValue,
                                   Minimum = (float) boxInfo.MinimumValue
                               },
                           _ => seriesInfo
                       };
                   };
        }
    }

I am directly editing my XyDataSeries on a chart by using my mouse. As the mouse moves I edit either the x or y value of a point using the methods

    public void SetPointYValueAt(IDataSeries series, int index, double newValue)
    {
        series.YValues[index] = newValue;
        series.InvalidateParentSurface(RangeMode.None);
    }

    public void SetPointXValueAt(IDataSeries series, int index, double newValue, double xMin, double xMax)
    {
        var xValue = newValue;

        // limit x values to keep them sorted
        if (xValue < xMin) xValue = xMin;
        if (xValue > xMax) xValue = xMax;
        series.XValues[index] = xValue;

        series.InvalidateParentSurface(RangeMode.None);
    }

With this code I am not getting an update at my ViewModel:

    public IDataSeries<double, double> MyDataSeries
    {
        get { return _myDataSeries; }
        set
        {
            _myDataSeries = value;
            OnPropertyChanged("MyDataSeries");
        }
    }

Here is my XAML:

            <sciChartExtensions:StepLineRenderableSeries x:Name="HResitivitySeries" IsDigitalLine="True" DataSeries="{Binding MyDataSeries, Mode=TwoWay}">

Where StepLineRenderableSeries is derived from FastLineRenderableSeries with IsDigitalLine = true and the HitTest method overridden.

How can I get MyDataSeries to update?

Hi
I’m trying to use AvaloniaUI with .NET Core 3.1 to create an application using SciChart, but I get XAMLIL error when trying to add a SciChartSurface following the code from the tutorial. I used a standard Avalonia MVVM Application template when creating the project.

This is the code:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             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"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="FF_DataVis_Avalonia_MVVM.Views.TabControlView">

    <Grid>
        <!-- Bind to ChartViewModel.ChartTitle etc -->
        <s:SciChartSurface ChartTitle="{Binding ChartTitle}">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>
</UserControl>

And the error I get is:
“XAMLIL: Unable to resolve type SciChartSurface from namespace http://schemas.abtsoftware.co.uk/scichart Line 27, position 4″
which is the first s:SciChartSurface entry.

Any ideas what might be wrong? Does SciChart not work with any framework regardless of using .NET Core 3.0?
I have tried changing between Core 3.0 and 3.1, which does nothing.

Hi sir,

We would like to build a real time updated stackedcolumn chart in mvvm mode.
Is that possible? (x-axis on the left side)(y-axis on the bottom side which can keep update with only 10mins range)

I wonder can I use the StackedColumnRenderableSeriesForMvvm?
I found out this control but have no idea how to use it…

Hello support team,

We have to realize the following request:
– Yt chart with DateTime as X-axis and double values on the Y-axis
– The chart should display a user-defined area on startup (e.g. 20 sec) After the chart has run for 20 seconds ( i.e. 20 seconds), the animated scrolling should start. By default, the chart behaves as follows: The X-axis area fills up to 20 seconds and then starts scrolling. We want the chart to display 20 seconds on the X-axis at the start and fill up.

I am aware that I can implement this behavior myself. However, the question arises whether I can realize this directly with a basic functionality.

Thank you!

Hi,

I’ve been finding lots of examples of creating Custom Chart Modifiers however they are not using a SciChartGroup using a DataTemplate and not in a MVVM scenario.

I know MVVM is the preferred structure for WPF solutions, however it does introduces some complexities as well as using DataTemplates of a SciChartGroup, therefore, would someone please be so kind as to point me in the right direction for an example or two so that I can see how this all could work together?

I’m looking at Custom Chart Modifiers by use of a CustomModifier class. As this will give me the most flexibility in terms of what I would like to do in the future and I would also like to be able to switch between modifiers, such as Panning, Zooming and drawing annotations onto the chart.

Thanks everyone!

David

P.S. Andrew, if this requires a developer on your side to hash this out for an hour or so, let me know and I’ll be more than happy to pay for it.

When I select a series/plot, I would like to identify where it came with more than just the Name member. How can I do that?

Background:
I have a list of unsigned integer values taken from a data logger. I bundle the values up in a class with some other information, such as the name of the sample and an ID string.

Since I can’t data bind to the logged samples as-is, I convert them to a SciChart friendly “LineRenderableSeriesViewModel” and add them to a list of “ObservableCollection” that I data bind to a SciChart.

ViewModel.cs:

// Where "loggedSamples" is a SamplesContainer 
//class SamplesContainer
//{
//    public string Name;
//    public string ID;  **<=== I want to get this somehow when I select something**
//    public Uint16 data {get;set;}
//}

// Convert Samples => XyDataSeries => LineRenderableSeriesViewModel

SamplesContainer loggedSamples = GetLoggedSample();
XyDataSeries<double, double> xySeries = ConvertSamplesToXyDataSeries(loggedSamples);
xySeries.SeriesName = loggedSamples.Name;

LineRenderableSeriesViewModel lineSeries = new LineRenderableSeriesViewModel() {
    DataSeries = xySeries, StyleKey = "LineStyle", Stroke = Colors.Blue };

RenderableSeriesViewModelForChannels.Add(lineSeries);

MainWindow.xaml:

   <s:SciChartSurface Name="sciChartItemView" Grid.Column="2"
    AllowDrop="True"
    DragDrop.Drop="sciChartItemView_Drop"
    DragDrop.DragEnter="sciChartItemView_DragEnter"
    MinHeight="80"
    s:ThemeManager.Theme="BrightSpark"  
    RenderableSeries="{s:SeriesBinding RenderableSeriesViewModelForChannels}"
    ViewportManager="{Binding SampleSetViewMod.ViewportManager}"                                                                           
    DebugWhyDoesntSciChartRender="True"
    s:SciChartGroup.VerticalChartGroup="sharedYAxisWidth"
    >

    <s:SciChartSurface.XAxis>
        <s:NumericAxis   
        DrawMajorGridLines="True"
        DrawMinorGridLines="False"
        DrawMajorBands="False"  
        VisibleRange="{Binding SampleSetViewMod.SharedXVisibleRange, Mode=TwoWay}"
        Visibility="Hidden" 
        TextFormatting="0.######"/>
    </s:SciChartSurface.XAxis>

    <s:SciChartSurface.YAxis>
        <s:NumericAxis AxisAlignment="Left"
        DrawMajorGridLines="False"
        DrawMinorGridLines="False"
        DrawMajorBands="False"
        Visibility="Visible">
            <s:NumericAxis.GrowBy>
                <s:DoubleRange Min="0.1" Max="0.1" />
            </s:NumericAxis.GrowBy>
        </s:NumericAxis>

    </s:SciChartSurface.YAxis>

    <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup>
            <s:ZoomExtentsModifier XyDirection="YDirection"/>

            <s:ZoomPanModifier ExecuteOn="MouseMiddleButton" XyDirection="XYDirection" ClipModeX="ClipAtExtents" />

            <local:ExtendedMouseWheelZoomModifier />

            <s:RubberBandXyZoomModifier IsEnabled="True"
                IsXAxisOnly="False"
                ReceiveHandledEvents="True" />
            <s:LegendModifier ShowLegend="True" Orientation="Vertical" Margin="10"
                GetLegendDataFor="AllSeries"
                ShowVisibilityCheckboxes="False" 
                HorizontalAlignment="Right"
                LegendPlacement="Inside"
                Background="White"
                />

            <local:ExtendedSeriesSelectionModifier SelectionChanged="SeriesSelectionModifier_OnSelectionChanged">
                <local:ExtendedSeriesSelectionModifier.SelectedSeriesStyle>
                    <Style TargetType="s:FastLineRenderableSeriesForMvvm">
                        <Setter Property="StrokeDashArray" Value="10,5"/>
                    </Style>
                </local:ExtendedSeriesSelectionModifier.SelectedSeriesStyle>
            </local:ExtendedSeriesSelectionModifier>


            <!--<s:CursorModifier x:Name="cursorModifier" IsEnabled="True" />
        <s:RolloverModifier x:Name="rolloverModifier" IsEnabled="True"/>-->
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

I’m trying to implement custom annotations using the MVVM pattern. I’ve been using your tutorial as an example (https://www.scichart.com/databinding-annotations-with-mvvm/). Everything works as expected if I manually load some example data to the annotations collection. When I actually try to load the data from our database using async method, the annotations are no longer drawn.

Is this by design or am I doing something wrong? Do you have any suggestions how to load annotations when using async code and MVVM patterns? I haven’t had any problems loading the actual time series on the chart using the same pattern.

I also tried binding the SciChartSurface’s Annotations property to AnnotationCollection and then calling ChartAnnotations.ParentSurface.InvalidateElement(), but the issue still persists.

You can easily reproduce this behavior by adding an async call to the examples’s source code:

private async Task Initialize()
{
    var ds0 = new XyDataSeries<double, double>();
    var someData = new RandomWalkGenerator().GetRandomWalkSeries(200); // RandomWalkGenerator is found in the examples source code

    ds0.Append(someData.XData, someData.YData);

    _chartSeries = new ObservableCollection<IChartSeriesViewModel>();
    _chartSeries.Add(new ChartSeriesViewModel(ds0, new FastLineRenderableSeries()));

    // Now create the labels
    _chartLabels = new List<LabelViewModel>
                       {
                           new LabelViewModel(5, -2.5, "Label0", "Label0 Tooltip!"),
                           new LabelViewModel(20, -2, "Label1", "Label1 Tooltip!"),
                           new LabelViewModel(35, 3, "Label2", "Label2 Tooltip!"),
                           new LabelViewModel(50, 1.5, "Label3", "Label3 Tooltip!"),
                       };

    await Test();

    _chartLabels.Add(new LabelViewModel(65, -0.5, "AFTER ASYNC", "Label4 Tooltip!"));
}

private async Task Test()
{
    await Task.Delay(5000);
}

Using MVVM, I have an AnnotationCollection databound to the SciChartSurface.Annotations. Individual LineAnnotations are added to the collection as the application code runs.

If annotations are added while the chart is displayed, they are all drawn correctly.

However, if the chart page is reloaded (say, the user navigates to a different page and then returns to the chart page), the annotations do not always redraw. If the annotations have AnnotationCanvas set to default (AnnotationCanvas.AboveChart, I believe) they redraw correctly about 50% of the time. If the annotations’ AnnotationCanvas is set to AnnotationCanvas.XAxis, they never redraw.

All the annotations still exist in the ObservableCollection in all these cases, so they shouldn’t need to be re-created.

Is this a bug in SciChart or is there something I may be doing wrong with the annotations?
(There is only one X-Axis so no axisID is necessary.)

LineAnnotation lAnno = new LineAnnotation();
lAnno.CoordinateMode = AnnotationCoordinateMode.RelativeY;
lAnno.Y1 = 0.0;
lAnno.X1 = DataPoints;
lAnno.Y2 = 1.0;
lAnno.X2 = DataPoints;
lAnno.YAxisId = "Counts";
lAnno.Foreground = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromRgb(255, 255, 255));
lAnno.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(96, 255, 0, 0));
lAnno.StrokeThickness = 2;
lAnno.AnnotationCanvas = AnnotationCanvas.XAxis;

Markers.Add(lAnno);

Hi,

Could you provide some Mvvm examples that include:

1) Mvvm bubble chart where the Fill color is defined on the series view model
2) custom tooltips per point where the tooltip string is defined on the point view model

I have both of these kind of working using a workaround based on the obsolete SciChartSurface.SeriesSource property, but now I’m trying to migrate to SciChartSurface.RenderableSeries and the proper Mvvm API and I cannot find all the elements I need.

Cheers
Felix

We’re using ReactiveUI and bindings in code-behind. We’re now upgrading from SciChart v3 to v6 and we’re wondering how to use the SeriesBinding in code-behind like this:

public partial class BarChartView : ReactiveUserControl<sBarChartViewModel>
{
    public BarChartView()
    {
        InitializeComponent();

        this.WhenActivated(disposable =>
        {
            this.OneWayBind(ViewModel,
                            vm => vm.SeriesSource,
                            view => view.BarChart.SeriesSource)
                .DisposeWith(disposable);

            this.OneWayBind(ViewModel,
                            vm => vm.LabelProvider,
                            view => view.FaciesAxis.LabelProvider)
                .DisposeWith(disposable);

            this.OneWayBind(ViewModel,
                            vm => vm.TooltipDataContext,
                            view => view.TooltipModifier.TooltipLabelDataContextSelector)
                .DisposeWith(disposable);

            this.OneWayBind(ViewModel,
                            vm => vm.XAxisRange,
                            view => view.FaciesAxis.VisibleRange)
                .DisposeWith(disposable);
        });
    }
}

Now the IChartSeriesViewModel and SciChartSurface.SeriesSource is deprecated so we have to move to IRenderableSeriesViewModel instead and then bind to SciChartSurface.RenderableSeries. But how can we convert from IRenderableSeriesViewModel to IRenderableSeries here?

Hi,

I have several chart panes that share a mouse group and a shared visual range (I inject the shared visual range of type IRange in the constructor of the pane view model). I then set the XAxis visual range to the shared visual range inside each pane view model. However, when I use either of the below approaches outside of the pane view model to adjust the min and max of shared visual range, the Xaxis.VisualRange of each pane does not reflect that change.

Approach A: _sharedVisualRange.Min = ….; _sharedVisualRange.Max = …
Approach B: _sharedVisualRange.SetMinMax(….)

Neither approach actually impacts the XAxis.VisualRange.Min/Max.

Initially when I created the XAxis in code I set its VisualRange equal to the shared visual range that was injected via constructor, like :

XAxis = new CategoryDateTimeAxis()
{
……
……
VisualRange = _sharedVisualRange,
…..
};

Please note that all the above refers to code in the view model. I bind the XAxis in the pane view model to the XAxis of the surface in xaml.

My entire synchronization heavily relies on the assumption of this working, but it does not.

Hello,
I am trying to add a BoxAnnotation with MVVM pattern where the X-Axis is a DateTime axis. The annotation can be dragged into the X-direction. I need to know the DateTime of each position while dragging and also the final position(DateTime) of the BoxAnnotation when the drag Ended. I am listening to the DragDelta and DragEnded events in ViewModel. But here I couldn’t able to get the DateTime from X1 and X2 of that annotation model. I am sharing some snippets of my code. Can you please let me know how I can achieve this?

In xaml:

<Style x:Key="_boxAnnotationStyle" BasedOn="{StaticResource AnnotationBaseStyle}" TargetType="scichart:BoxAnnotation">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="scichart:BoxAnnotation">
                    <Border x:Name="PART_BoxAnnotationRoot"
              Margin="{TemplateBinding Margin}"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
<scichart:SciChartSurface x:Name="GraphSurface"
                 Annotations="{scichart:AnnotationsBinding ItsAnnotations}">

                <scichart:SciChartSurface.XAxis>
                    <scichart:DateTimeAxis x:Name="GraphXAxis"
                                           VisibleRange="{Binding ItsTimeVisibleRange, Mode=TwoWay}" />
                </scichart:SciChartSurface.XAxis>

                <scichart:SciChartSurface.YAxes>
                    <scichart:NumericAxis x:Name="GraphYAxis"
                                          VisibleRange="0, 10" />

                </scichart:SciChartSurface.YAxes>
 </scichart:SciChartSurface>

In ViewModel.cs

{
    private DateRange _timeVisibleRange;
    private ObservableCollection<IAnnotationViewModel> _annotations;
    private IAnnotationViewModel _boxAnnotation;
    public ObservableCollection<IAnnotationViewModel> ItsAnnotations
    {
        get
        {
            return _annotations;
        }
    }
    public DateRange ItsTimeVisibleRange
    {
        get { return _timeVisibleRange; }
        set
        {
            if (_timeVisibleRange == value) return;
            _timeVisibleRange = value;
            RaisePropertyChanged(() => ItsTimeVisibleRange);
        }
    }
    .
    .
    .
    _boxAnnotation = new BoxAnnotationViewModel()
        {
            IsEditable = true,
            DragDirections = SciChart.Charting.XyDirection.XDirection,
            X1 = DateTime.UtcNow.AddSeconds(300),
            X2 = DateTime.UtcNow,
            Y1 = 0,
            Y2 = 8,
            StyleKey = "_boxAnnotationStyle"
        };

     _annotations = new ObservableCollection<IAnnotationViewModel>() { };
     _annotations.Add(_boxAnnotation );

     _captureTimeRangeSelectorAnnotation.DragDelta += OnDrag;
     _captureTimeRangeSelectorAnnotation.DragEnded += DragEnded;
       .
       .
       .
    private void DragEnded(object sender, EventArgs e)
    {
         var boxAnnotationModel = sender as BoxAnnotationViewModel;
          // Need to know the DateTime value of X1 and X2
    }
    private void OnDrag(object sender, AnnotationDragDeltaEventArgs e)
    {
         var boxAnnotationModel = sender as BoxAnnotationViewModel;
         // Need to know the DateTime value of X1 and X2
    }
    .....
    .....
}

Hi,

Was hoping you could point me in the right direction. I’m trying to create horizontal line annotations on demand using MVVM but have become stuck. I’ve have them working in MVVM when the chart loads but not when a button is clicked although I have achieved this using code behind.

I’ve tried using an observable collection of AnnotationCollection type but am struggling to add the horizontal lines annotations to it as they are of a different type.

Any pointers in the right direction would be much appreciated!

Thanks,
Tim

Example of MVVM

TradeAnnotations = CreateHorizontalAnnotations();

private AnnotationCollection _annotations;

    public AnnotationCollection TradeAnnotations
    {
        get { return _annotations; }
        set
        {
            _annotations = value;
            OnPropertyChanged("TradeAnnotations");
        }
    }

    private static AnnotationCollection CreateHorizontalAnnotations()
    {
        //var annotations = new AnnotationCollection();

        var annotations = new AnnotationCollection();

        Color strokeColor = (Color)ColorConverter.ConvertFromString("#008B45");
        Brush strokeBrush = new SolidColorBrush(strokeColor);

        HorizontalLineAnnotation annotation = new HorizontalLineAnnotation();

        annotation.ShowLabel = true;
        annotation.LabelPlacement = LabelPlacement.Axis;
        annotation.HorizontalAlignment = HorizontalAlignment.Stretch;
        annotation.IsEditable = true;
        annotation.SnapsToDevicePixels = true;
        annotation.Stroke = strokeBrush;

        annotation.X1 = DateTime.Now;
        annotation.Y1 = 129;

        annotations.Add(annotation);

        return annotations;          
    }

Example of code behind

        private void CreateHorizontalAnnotations(object sender, System.Windows.RoutedEventArgs e)
    {
        //var annotations = new AnnotationCollection();

        var annotationCollection = new AnnotationCollection();

        Color strokeColor = (Color)ColorConverter.ConvertFromString("#008B45");
        Brush strokeBrush = new SolidColorBrush(strokeColor);

        HorizontalLineAnnotation annotation = new HorizontalLineAnnotation();

        annotation.ShowLabel = true;
        annotation.LabelPlacement = LabelPlacement.Axis;
        annotation.HorizontalAlignment = HorizontalAlignment.Stretch;
        annotation.IsEditable = true;
        annotation.SnapsToDevicePixels = true;
        annotation.Stroke = strokeBrush;

        annotation.X1 = DateTime.Now;
        annotation.Y1 = 129;

        this.priceChart.Annotations.Add(annotation);
    }

I’m trying to build a chart control that adheres to MVVM and noticed that I have the option to use NumericAxis or NumericAxisForMvvm, but I’m not sure exactly what the differences would be. I couldn’t really find anything in depth on them in the documentation but maybe I missed something.

Is anyone aware of any differences? I’m assuming NumericAxisForMvvm would be best for what I’m wanting but I’m not exactly sure why.

Thanks!

Hello,

I’m trying to display a vertical line annotation on a chart using MVVM.

In order to make it work I’ve (All the INotifyPropertyChanged are managed via the BaseViewModel)

public class GraphSurfaceBaseViewModel : BaseViewModel
{
    /// <summary>
    /// A list of annotations
    /// </summary>
    public ObservableCollection<IAnnotationViewModel> Annotations { get; private set; }

 ...
}

I create annotation that way

Graph.Annotations.Add(new VerticalLineAnnotationViewModel()
            {
                X1 = TimeOfComment,
                ShowLabel = true,
                StrokeThickness = 2,
                XAxisId = "Xaxis",
                YAxisId = "Yaxis1",
                AnnotationLabels = new ObservableCollection<AnnotationLabel>() { new AnnotationLabel() {Text = "mon test", LabelPlacement = LabelPlacement.TopRight } }

            });

And the binding to the scichartsurface is :

<s:SciChartSurface   
...         
Annotations="{s:AnnotationsBinding Annotations}"            
</s:SciChartSurface>

I’ve double check that my x axis and y axis have the same ID as the annotation.
The problem is I want to display several annotation labels but they are not appearing. I suspect a problem via the AnnotationsBinding which is not taking the AnnotationLabels from the VerticalLineAnnotationViewModel.

What I got :

What I want (paint skill here):

For the what I want, I can draw a simple vertical bar by settings showLabel = false but I suppose that all the label I previously added to the
AnnotationLabels will not be shown, that’s why I let it.

Thank you for any help.

Renaud

Hi there,

I am relatively new to C# and scicharts so you will have to forgive me a little.

In the project I am working on, I am trying to add dynamic renderable series as the user selects items in a tree. I have looked through the online tutorials and forums but still am having trouble. I am creating my own renderable series view model class derived off of LineRenderableSeriesViewModel. I found documentation that I needed to override the ViewType property and set it to a FastLineRenderableSeriesForMvvm.

When I am creating these objects to add to the ObservableCollection which is bound to my scichart surface, I can set the PointMarker and its properties, but not the SelectedPointMarker properties.

XAML:

    <s:SciChartSurface Style="{StaticResource BasicSciChartSurfaceStyleRateVsTime}"
                       ViewportManager="{Binding RateVsTimePlot.Manipulator.Viewport}"
                       Name="RateVsTime" x:FieldModifier="private"
                       ZoomHistoryManager="{Binding RateVsTimePlot.ZoomHistory}"
                       PreviewMouseLeftButtonDown="PreviewRateVsTimeMouseLeftButtonDown"
                       PreviewMouseLeftButtonUp="PreviewRateVsTimeMouseLeftButtonUp"
                       RenderableSeries="{s:SeriesBinding RateVsTimePlot.RenderableSeriesViewModels}"
                       local:YAxesCollectionBehaviour.AxisSource="{Binding RateVsTimePlot.YAxesViewModels}"
                       local:YAxesCollectionBehaviour.AxisStyle="{StaticResource AxisStyle}"/>         

Style:

<Style x:Key="ProdLineStyle" TargetType="s:FastLineRenderableSeriesForMvvm">
    <Setter Property="s:TooltipModifier.IncludeSeries" Value="False"/>
    <Setter Property="SelectedPointMarker">
        <Setter.Value>
            <s:EllipsePointMarker Fill="{Binding SeriesColors.ProductionColor}"
                                  Stroke="{Binding SeriesColors.ProductionColor}"
                                  Width="6" Height="6">
            </s:EllipsePointMarker>
        </Setter.Value>
     </Setter>
</Style>

ViewModel :

        var renderableSeries = new GenericRenderableSeriesViewModel
        {
            DataSeries = dataSeries.DataSeries,
            YAxisId = dataSeries.AxisId,
            IsSelected = IsSelected,
            SeriesColors = _dataColors[fluidRateType],
            DisplayEnabled = AnalysisInteractionMode.IsLineManipulationDisabled,
            PointMarker = new EllipsePointMarker(),
            StyleKey = "ProdLineStyle"
        };

        renderableSeries.SetRenderableSeriesColorSettings();

        renderableSeries.DataSeries.SeriesName = fluidRateType.ToString();
        return renderableSeries;

public void SetRenderableSeriesColorSettings()
    {
        Stroke = SeriesColors.ProductionColor;

        if (PointMarker == null) return;

        PointMarker.Stroke = SeriesColors.ProductionColor;
        PointMarker.Fill = SeriesColors.ProductionColor;
        PointMarker.Height = PointNonSelectedHeight;
        PointMarker.Width = PointNonSelectedWidth;
    }

When I run my app, I see what I am expecting by default, but when I do a point selection rectangle, the behavior is not correct. I only see the line. The points with in the rectangle disappear.

I am trying to move away from having the style set the selectedPointMarker, and doing it through code in the view model just like the function above as users will be able to change these properties in the future. But so far I haven’t found a way to do either.

Am I using the correct classes, or do I need to override something else? Any ideas or suggestions would be greatly appreciated

Thanks
Rylan

Hi SciChart team,

I have built a xyscatter chart with DateTime type X-Axis and Double type Y-Axis,
and built boxannotations to mark areas.

May I set the x-Axis value in the tooltip?
Or can I show properties of each item which means every point in the xyscatterseries, and customize the tooltip content style like adding the description of every properties.

Hi,

I am developing an MVVM WPF application and need to access the SelectedPointMarkers property of DataPointSelectionModifier from the ViewModel.

From looking at the DataPointSelectionModifier documentation (https://www.scichart.com/documentation/win/current/webframe.html#DataPoint%20Selection.html) I can see how you can get the X and Y coordinate values of a selected point in a view, by binding the PointMarkersSelectionModifier to a listbox.

However this doesn’t really help me, I need to get the coordinates of the SelectedPointMarker into a property inside the ViewModel that can be accessed, rather than just binding to a listbox in the view itself.

I’ve also looked at this similar post: (https://www.scichart.com/questions/wpf/i-want-to-bind-selectedpointmarkers-of-datapointselectionmodifier), but I had no luck getting Kenishis solution to work in my case.

How can i do this?

Thanks.