Tag: Annotations

I am building a real-time graph with CategoryDate X Axis and Numeric Y Axis. I found it hard to understand the Annotation API’s regarding the X and Y positions.

Q1:
Looking at AnnotationsAreEasyFragment, it draw a Horizontal line of (seemingly) full width. it declares

sciChartBuilder.newHorizontalLineAnnotation()
    .withPosition(7d, 2.8d)
    .withStroke(2, ColorUtil.Orange)
    .build()

i can under Y = 2.8d, but what is the X=7d for? and in the next Horizontal line which is short, it declares .withPosition(5d, 3.2d)?? X=5d and X=7d gives such a big difference.

Q2:
Since i am using CategoryDateAxis, referring to InteractionWithAnnotationsFragment to draw a vertical line at a specific date/time, there is a short line vertical line on 3rd Dec with the code

sciChartBuilder.newVerticalLineAnnotation()
    .withX1(20).withY1(35d).withY2(33d)
    ...

Since its a date axis, i would expect it to accept a Date.class (or long in millis) instead of .withX1(20). It doesnt even make sense! How exactly do i create full height vertical line at a specific date/time?

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?

Is there a way to draw an svg formatted annotation onto a chart for WPF?

I have found references/examples for it in javascript here . . .

https://www.scichart.com/documentation/js/current/Tutorial%2006%20-%20Adding%20Annotations.html

but not for any other platform.

I downloaded the SciChartTeam SciChart version 6.4.0.13633 release from Git , thinking I would be able to get myself educated regarding Composite Annotations , which is something that has been requested by our field engineers.
The reference however given in the xaml file gives me :

Resources/ExampleSourceFiles/AnnotateAChart/CompositeAnnotations/CompositeAnnotationsView.xaml.txt

within the solution. That reference does not include any source files (see attached image)

Since Composite Annotations is fairly complex, code examples and a working example solution, showing Composite Annotations implemented would be extremely helpful for me. Is there a running example I can download / view/ interact with ?

Appreciate support in this matter

Thank you

Anders

I’m using a chart as a way to visualise a series of time-based tasks on a “timeline”, not unlike a Gantt chart (is there anything SciChart can’t be used for?!). I do this using annotations that the user can move and resize, actually custom “box” annotations that can only be dragged and resized horizontally. Image attached if interested.

When a user starts moving or resizing an annotation, I bring it to the front to ensure that it remains visible even if it ends up overlapping another annotation, using:

Panel.SetZIndex(annotation, Int.MaxValue);
For every other annotation
    Panel.SetZIndex(annotation, 0);

Finding this approach was a bit of a happy accident so I’m wary of continuing to use this technique in case it breaks in a future version. I’m assuming this code works because annotations reside in a parent container that inherits from Panel? Do you see any issues using the above or is there a “better” way to change an annotation’s Z-Index?

I have an application for which the VerticalLineAnnotation is a near perfect fit. However, to make it easier to add these annotations from the AnnotationCreatioinModifier, I would like to derive a new annotation class from VerticalLineAnnotation with a couple of new dependency properties, and new label style using these properties. Is this possible? I’ve looked through the forum and existing examples, and can’t find relevant examples. Can you point me in the right direction?

Bill

Hi;

If I remember good, in a old version of SciChart it was possible to draw custom annotation in chart with a “pen”, like in Paint.

In the current version is it possible? And if yes, how do it please?

Regards;
Damien

Hi,

I’m trying to follow the instructions here: https://www.scichart.com/documentation/v5.x/Tutorial%2007%20-%20Adding%20Annotations.html
to create a subclass of CustomAnnotation. I have copied the attributes given in the example (VerticalAnchorPoint=”Bottom” HorizontalAnchorPoint=”Center”) but I still get the error “An attribute name is missing” on anything I put after the attributes. Are there other attributes that may be required for CustomAnnotation, not given in this example?

Thanks,
Rachel

Hi,

I am currently adding a Vertical Slice Modifier with just on Vertical Line inside of it.
The idea is to create a vertical cursor to display Y values for a given X value.
As my chart is a real time chart, I don’t want my cursor position changed expect on user interaction, I set to Relative the CoordinateMode property of my Annotation.

<s:VerticalSliceModifier Name="sliceModifier" ShowTooltipOn="Always" IsEnabled="True">
                    <s:VerticalSliceModifier.VerticalLines>
                        <s:VerticalLineAnnotation IsEditable="True" X1="0.5" Stroke="#D62D15" CoordinateMode="Relative"/>
                    </s:VerticalSliceModifier.VerticalLines>
                </s:VerticalSliceModifier>

The vertical line is correctly displayed at the centre of the surface but point markers and tooltips are not displayed at the line position, it seems the relative coordinate mode is not handle on this area.

Thanks for your help
Jean-Charles

Hi all, how i can add annotation on the columns of a chart?

Here we use a TextAnnotation as follows

 var textAnnotation = new TextAnnotation
                                 {
                                     Name = seriesAnnotationParameter.Name,
                                     Text = seriesAnnotationParameter.Text,
                                     ToolTip = seriesAnnotationParameter.ToolTip,
                                     XAxisId = XAxisId,
                                     YAxisId = YAxisId,
                                     X1 = seriesAnnotationParameter.X1,
                                     Y1 = seriesAnnotationParameter.Y1,
                                     HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                                     VerticalAnchorPoint = VerticalAnchorPoint.Center,
                                     TextAlignment = TextAlignment.Center,
                                     Foreground = new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0x00, 0x00)),
                                     Opacity = 0.5,
                                     BorderThickness = new Thickness(1),
                                     CornerRadius = new CornerRadius(1),
                                     IsEditable = false
                                 };

It works perfectly all-rite when you attach it to the chart the first time as in attached image TextAnnotation_Good.png. However, after zooming in or zooming out, the annotation is resized to undesirable sizes as in attached image TextAnnotation_Bad.png.

How to make TextAnnotation to resize itself based on the size of text inside it ?

This is a very special TextAnnotation centered around a x,y coordinate. There is never X2,Y2 for this use case.

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);

I am working on an MVVM application that has a dozen or so view models, each having multiple XY data series that are being displayed in a chart. Now I need to add annotations to the charts for some of the view models. I have some code up and running but am running into a few issues and I wanted to see if you have any suggestions for a way forward.

The first issue relates to performance. Each data series (~100K data points) can have several thousand annotations associated with it. In the app, the view models are all created in memory and the user can change between them by selecting one in a list box (see attached image). Once the number of annotations starts to get into the thousands, I start to notice a delay when switching between data models where one of them contains annotations. If I click a different item in the list box, it takes a few seconds before the selection actually changes and the chart is updated. The delay seems to be more pronounced when switching FROM a view model that has annotations TO one that does not contain them. The delay increases with the number of annotations. I’m not sure if there is anything that can be done about this but thought I would check.

The second issue relates to how the view models are created. Because I am loading data for ALL of the view models into memory, I am trying to create them asynchronously in a background thread as much as possible so the UI remains responsive. That was fine when I was just dealing with the XY data, but it is causing problems for the annotations. If I try to create the CustomAnnotation objects in a background thread I get an error “The calling thread must be STA, because many UI components require this.” Do you have any suggestions for how to create lots of annotations while keeping the UI responsive?

Thanks,
Scott

Greetings!

I am interested in drawing lines segments/cylinders on a WPF 3D plot in a manner that allows them to be selected or allow hit testing. I have looked at:

1) Selecting a vertex on a SciChart3DSurface, but I need to select the line
2) Drawing CylinderPointMarker3D’s but I need to set the length of each one

These lines only need to be drawn in the XY, XZ, and YZ planes so I have thought about using the ImpulseRenderableSeries3D but I need to control where the line segments start and end – and this doesn’t look like it allows control of the start.

Any ideas?

–Jonathan

Hi,

I’m looking for an annotation that have text and a line or rectangle (like in commix speech balloon) that are anchored to a point on the chart.
Is there such a build in annotation or do I have to build it myself?

Hi,

I am working on a live graph similar to the sparse impulse series 3D and would like to add live annotations to the plotted data points to display the Y axis value.

Does the SciChart3DSurface support annotations?

If not I would like to instead use the TooltipModifier3D, but would like to force the tooltip to be displayed all the time and reduce the amount of data displayed to a single Y-Axis value. Does this sound reasonable.

Thanks

Marc

When I enter PathAnnotation in the xaml, I get the error “The type ‘s:PathAnnotation’ was not found.” I do have the following Annotation types available:
– AxisMarkerAnnotation
– BoxAnnotation
– CustomAnnotation
– HorizontalLineAnnotation
– LineAnnotation
– LineArrowAnnotation
– SeriesValueAxisMarkerAnnotation
– TextAnnotation
– VerticalLineAnnotation

I want to be able to make a star shape annotation, and PathAnnotation seemed to be the only way to do this. Please let me know if there’s another way to do this.

Thanks,
Rachel

Hi,

Can you please tell me how to change selection points of annotation?

Thanks in advance.

Regards,
Batyr

I add a LineAnnotation programmaticly to my surface and want to readjust it just like in the Examples Suite via clicking and draging the ends of the annotation.
As long as i dont use a Theme everything works fine. But when applying a custom theme the Manipulation points are not there anymore (and not only visualy, clicking at the end of the line also does not work. Furthermore the mousecursor does not change to a cross when hovering above the annotation end).

This is my Custom theme code:

<ResourceDictionary  x:Class="Reprocess.SciChartDisplay.CustomTheme"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >       

<!--  *************************  -->
<!--  Colors and Brushes  -->
<!--  *************************  -->

<!--  Chart Brushes  -->
<SolidColorBrush x:Key="TickTextBrush" Color="Black"/>
<SolidColorBrush x:Key="MajorGridLineBrush" Color="LightGray"/>
<SolidColorBrush x:Key="MinorGridLineBrush" Color="LightGray"/>
<SolidColorBrush x:Key="SciChartBackground" Color="White"/>
<SolidColorBrush x:Key="GridBorderBrush" Color="#102A47"/>
<SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent"/>
<SolidColorBrush x:Key="RolloverLineBrush" Color="#33FD9F25"/>
<SolidColorBrush x:Key="CursorLineBrush" Color="#996495ED"/>
<SolidColorBrush x:Key="RubberBandFillBrush" Color="#33333399"/>
<SolidColorBrush x:Key="RubberBandStrokeBrush" Color="#77999999"/>
<SolidColorBrush x:Key="LegendBackgroundBrush" Color="AliceBlue"/>

<SolidColorBrush x:Key="LabelBackgroundBrush" Color="#AA6495ED"/>
<SolidColorBrush x:Key="LabelBorderBrush" Color="#FF6495ED"/>
<SolidColorBrush x:Key="LabelForegroundBrush" Color="Black"/>

<SolidColorBrush x:Key="TextAnnotationForeground" Color="#EEEEEE"/>
<SolidColorBrush x:Key="TextAnnotationBackground" Color="#AA6495ED"/>

<Color x:Key="AxisBandsFill">White</Color>

<!--  Default Series Colors  -->
<Color x:Key="UpWickColor">Gray</Color>
<Color x:Key="DownWickColor">Gray</Color>
<SolidColorBrush x:Key="UpBodyBrush" Color="Gray"/>
<SolidColorBrush x:Key="DownBodyBrush" Color="Gray"/>

<Color x:Key="UpBandSeriesLineColor">#22117711</Color>
<Color x:Key="DownBandSeriesLineColor">#22111111</Color>
<Color x:Key="UpBandSeriesFillColor">Black</Color>
<Color x:Key="DownBandSeriesFillColor">Red</Color>

<LinearGradientBrush x:Key="MountainAreaBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="Gray" Offset="0"/>
    <GradientStop Color="#000710" Offset="1"/>
</LinearGradientBrush>

<Color x:Key="MountainLineColor">Black</Color>
<Color x:Key="LineSeriesColor">Black</Color>
<Color x:Key="ColumnLineColor">#11FFFFFF</Color>
<SolidColorBrush x:Key="ColumnFillBrush" Color="#11FFFFFF"></SolidColorBrush>

<Brush x:Key="OverviewFillBrush">White</Brush>


<Brush x:Key="ScrollbarViewportBackgroundBrush">White</Brush>

<LinearGradientBrush x:Key="DefaultColorMapBrush">
    <GradientStop Offset="0" Color="White"/>
    <GradientStop Offset="0.5" Color="White"/>
    <GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>

Any suggestions?

I’m trying to create a few ChartSurface’s which show same elements but with different visible ranges.
If i share DataSeries by binding to SeriesSource this works. But if i try to binding Annotations to a few ChartSurface’s i see annotations only on last chart. If i manually create copy of annotations that everything works but takes a long time.
Is there any way to binding Annotations to a few Charts?

I am placing annotations at the top of every bar in a stacked bar graph (and a standard bar graph on another screen) showing the total of all the stacked bars by iterating through my data, generating the sum, and placing it at the correct x,y (an incredibly manual process that seems like there should be much easier to do but I found no other way to do it – if there is a better way, I would love to hear it, but that’s a secondary issue and not my current problem).

I also have a legend where the user can select / deselect series.

When the user selects/deselects a series from the legend, I need to hide all my annotations and then recreate them because the sums of the stacked bars has changed (or if no bars are showing, remove my annotation completely). My assumption is I could reiterate through my data and check series to see if they are visible (isVisible) and recalculate the sums and recreate the annotations (another very manual process but I can probably work it out).

My primary problem is I see no way for me to intercept that this legend event occurred. The series get hidden internally and I never have a chance to do anything with the annotations. It seems like this may be doable on other platforms but I’m at a loss on iOS. There is no delegate / block event handler / etc.

Any thoughts?

Greetings, I wonder if is it any way to save the annotations that I do in the charts?
Because when I leave the chart the annotations gone.

Hi,

I’m trying to add a small image as an annotation to the chart, but I couldn’t make it work… most likely doing something wrong, but I can’t quite figure out how this should be done. This is the direction I went for:

public void AddIcon()
    {
        Image image = new Image();
        BitmapImage icon= new BitmapImage();
        icon.UriSource = new Uri(@"D:\icon.png", UriKind.Absolute);


        image.Source = icon;

        var annotation = new CustomAnnotation()
        {
            X1 = 0,
            Y1 = 0,
            Content = image,
        };
        ChartAnnotations.Add(annotation);
    }

What am I doing wrong? is there a proper and simple way to add image annotations to the chart in an MVVM manner?

Thank you!

I need to update a lot of annotations. Not so much. Remove and add about 10-100 annotations per action. And it takes a lot of time. I’ve already tried all the recommendations with SusppendUpdates etc, but the result is the same.

I don’t need the flexibility of UIElements. I’m using it as markers only.

So, maybe it is possible to implement annotations as a series with a custom point marker. I need a vertical dashed line with text, like in screenshot. Is there a way to do it?

I want to add annotations programmatically. I need to add line with arrow and textbox at Y1 and X1 of a line. It creates pointed annotation.