Pre loader

Tag: 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 votes
15k views

I am showing tooltip with CursorModifier. My tooltip bigger than SciChartSurface and I am using ClipModifierSurface=”False” in order to show whole tooltip. But in this case axis labels and scroll bar are on top of tooltip.
Described problem can be seen on Featured Apps > Scientific Charts > Oscilloscope Demo.
Is there any way to bring tooltip on top of chart surface?

Thanks
Samvel

0 votes
5k views

Hello,

I am trying to set the interval on the x-axis in a polar plot but it doesn’t appear to be accepting it and plotting accordingly. My axis definition is quite simple:

<s:SciChartSurface.XAxis>
       <s:PolarXAxis Name="TFxAxis" MajorDelta="15"/>
</s:SciChartSurface.XAxis>

I am plotting angles and radii so one data point might be (45, 1) and the next (50, 2) and so on where my visible range is TFxAxis.VisibleRange = new DoubleRange(-180.0, 180.0). Very simple plot but it keeps returning to a default of 1 on my MajorDelta for the x-axis and then showing major axes at 50 degree intervals. I’ve tried a variety of solutions but nothing seems to work properly.
Thanks,
Christina

0 votes
12k views

in IOS SDK there are SCIAxisRangeSyncronization and SCIAxisAreaSizeSyncronization for dealing with axis sync. I would like to ask are there any similar classes in Android to do this ? Thanks.

  • Ray Hung asked 7 years ago
  • last active 7 years ago
0 votes
14k views

I have a few problems that I’m trying to address with y-axis labelling.

  1. I am including a y-axis on the left side of my graph but want the text of the labels to be right-aligned. Each label uses two lines of text. How can I do that?
  2. I want the margin of the text to be a specific width so that I can line up the y-axis of multiple scichart surfaces that are stacked vertically. How can I set each of my scichart surfaces to use a particular margin for the y-axis labelling?
  3. The y-axis label text will wrap when I don’t want it to (see attached image — The text of the label should be “1m \n Left” and I am currently seeing “1m \n Lef \n t”). How do I turn off the wrapping of text on the y-axis?

———-

This is how I am currently implementing the y-axis:

NumericAxis(context).apply {
    drawLabels = true
    axisAlignment = AxisAlignment.Left
    this.labelProvider = labelProvider
    this.tickProvider = tickProvider
    drawMajorBands = false
    drawMajorTicks = false
    drawMinorTicks = false
    drawMajorGridLines = false
    drawMinorGridLines = false
    isLabelCullingEnabled = false
    visibleRange = DoubleRange(
            dataRange.first,
            dataRange.second
    )
    autoRange = AutoRange.Never
    tickLabelStyle = FontStyle(
            TypefaceManager.obtainTypeface(context, CustomTypeface.PROXIMA_NOVA_REG),
            context.resources.getDimension(R.dimen.results_screen_graph_labels_text_size),
            Color.LTGRAY
    )
}
0 votes
11k views

Hello,

I have the problem, that sometimes only one label is shown on the X-Axis even when there is space to show some more, than only one.
The property “IsLabelCullingEnabled” would show them all, but than it is ugly if there is not enough space.
So what can I do to have some more Labels shown?

In the Screenshots you can see that with only a few pixels more, more labels are shown, but the could have been also shown with less pixels (Especially Label “1” and “22” could have been shown).

0 votes
15k views

Hi,

I have some charts binded to a viewmodel. I wanted to produce a bar chart, so I want to modify the AxisAlignment.

If I specify a hardcoded alignment in the XAML, it works fine.

If I bind the alignment to the viewModel, the chart does not render, and I get the following error in the output:

 SciChartSurface didn't render, because an exception was thrown:
      Message: The specified Visual and this Visual do not share a common ancestor, so there is no valid transformation between the two Visuals.

Stack Trace:    at System.Windows.Media.Visual.TransformToVisual(Visual visual)
   at A.cac257c85637821690b32a44bda9b120f.cd0eaed29fc1e87dfe7aa912a7f678b57(FrameworkElement c5aaca7e2018a1512249ec2e2170b4cc6, UIElement c708323fb6eac118d4fd2c5913dc2a6ed)
   at A.cac257c85637821690b32a44bda9b120f.cd0eaed29fc1e87dfe7aa912a7f678b57(FrameworkElement c5aaca7e2018a1512249ec2e2170b4cc6, IHitTestable cc9d5fbe91f2861ee865bbb5439d3b84d)
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.GetAxisOffset()
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.GetAxisParams()
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.OnBeginRenderPass()
   at A.cda144392e546b245ef5bb1ee71f22b3a.c64a51c8ba6b7cbda8b9d9380d6337036(ISciChartSurface c17037e8328cd0abc02d2a6957dfa450c, RenderPassInfo c16b8d70d2b6ecad8f9fca7ac3f5177b8)
   at A.cda144392e546b245ef5bb1ee71f22b3a.c1a2306a5cc0452a04d135e77f0de4ff1(ISciChartSurface c17037e8328cd0abc02d2a6957dfa450c, Size cacf0a4a95d1143f0c11e20d4508e7132)
   at A.cda144392e546b245ef5bb1ee71f22b3a.RenderLoop(IRenderContext2D renderContext)
   at Abt.Controls.SciChart.Visuals.SciChartSurface.ca065c0b671221e0e603d0e9bf2792494()

This is the axis XAML:

 <s:SciChartSurface.XAxis>
                                    <s:NumericAxis AxisAlignment="{Binding XAxisAlignment}" LabelProvider="{Binding LabelProvider}" AutoTicks="False" MajorDelta="1" MinorDelta="1" DrawMinorGridLines="False">
                                    </s:NumericAxis>
                                </s:SciChartSurface.XAxis>

                                <s:SciChartSurface.YAxis>
                                    <s:NumericAxis AxisAlignment="{Binding YAxisAlignment}" AxisTitle="Number of crimes" GrowBy="0,1"/>
                                </s:SciChartSurface.YAxis>

And the properties I’m binding to:

public AxisAlignment XAxisAlignment { get; private set; }

public AxisAlignment YAxisAlignment { get; private set; }

Any help is appreciated.

Thanks,
Charbel

  • cabdo asked 10 years ago
  • last active 10 years ago
1 vote
8k views

I am currently following the tutorial at the page listed here.

https://www.scichart.com/documentation/win/current/webframe.html#Tutorial%2003b%20-%20Adding%20Series%20to%20a%20Chart%20with%20MVVM.html

Instead of using the given values to add to the series, I am using very small values like so:

var lineData = new XyDataSeries<double, double>() { SeriesName = "Testing Series" };
lineData.Append(0, 0);
lineData.Append(1, 0.001);
lineData.Append(2, 0.002);

However the axis ticks do not display a high enough resolution as shown in the image attached. Each one will show either 0, 0.001 or 0.002 and no further. I have tried changing the axis MinorDelta and MajorDelta to smaller values but this has not worked. Is there any way to fix this?

  • Hamza Butt asked 2 years ago
  • last active 2 years ago
0 votes
12k views

Hi there,

I’m trying to display little icons as axis labels using the LabelProvider API and NSAttributedString (with NSTextAttachmet). Is this supported? Here’s a minimal example:

import UIKit
import Foundation
import SciChart
import SciChart.Protected.SCILabelProviderBase

class ViewController: UIViewController {

    private lazy var chart: SCIChartSurface = {
        let c = SCIChartSurface(frame: .zero)
        c.xAxes.add(items: SCINumericAxis())

        let yAxis = SCINumericAxis()
        yAxis.labelProvider = SymbolLabelProvider()
        c.yAxes.add(items: yAxis)
        return c
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        SCIChartSurface.setRuntimeLicenseKey(myLicenseKey)

        view.addSubview(chart)
        chart.translatesAutoresizingMaskIntoConstraints = false
        let guide = self.view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            chart.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
            chart.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
            chart.topAnchor.constraint(equalTo: guide.topAnchor),
            chart.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
        ])
    }
}

class SymbolLabelProvider: SCILabelProviderBase<SCINumericAxis> {

    lazy var numberFormatter: NumberFormatter = {
        let f = NumberFormatter()
        f.allowsFloats = true
        f.maximumFractionDigits = 2
        return f
    }()

    init() {
        super.init(axisType: ISCINumericAxis.self)
    }

    override func formatLabel(_ dataValue: ISCIComparable!) -> ISCIString! {

        let intValue = Int(dataValue.toDouble())
        let font = UIFont.init(descriptor: axis.tickLabelStyle.fontDescriptor, size: UIFont.systemFontSize * 4)

        if intValue.isMultiple(of: 2) {
            let i = UIImage(systemName: "circle", withConfiguration: UIImage.SymbolConfiguration(font: font))
            return NSAttributedString(attachment: NSTextAttachment(image: i!))
        } else {
            let attributes: [NSAttributedString.Key: Any] = [
                .font: font,
                .foregroundColor: UIColor.yellow,
            ]
            return NSAttributedString(string: numberFormatter.string(for: dataValue.toDouble())!, attributes: attributes)
        }
    }
}

See attached screenshot for the result.

If this is not supported: any suggestions / ideas for a workaround?

Thanks
—Matthias

0 votes
13k views

Hi, I want to color the axis label by its value,
eg. value< 0 -> show with red color
value = 0 -> show grey color
value > 0 -> show green color

similar to this question, but in android platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!

  • may lym asked 6 years ago
  • last active 6 years ago
0 votes
16k views

It seems that if the axis is collapsed, all associated annotation labels are not visible (but their annotation line is visible).
Is there property or the like that will allow labels to be shown which are associated with a collapsed axis?

1 vote
17k views

I made an example based on the “Vertically Stacked Axes” from SciChart Examples. The main difference is that I can add DataSeries / YAxes on the fly.

The problem is that when I set VisibleRange and VisibleRangeLimit it does not crop the trace (as you can see on the Tan traces that are drawn on the whole surface).

Is there any way to crop the traces to VisibleRange of corresponding Axis?

  • Jan Kaiser asked 9 years ago
  • last active 9 years ago
0 votes
24k views

I have a YAxis(NumericAxis) that indicates price, now I want to set different color to the label text(please see the uploaded image):

I’ve seen the ILabelProvider, but it seems to set string format.
How should I do?

  • Yuhang Ji asked 8 years ago
  • last active 8 years ago
1 vote
9k views

Hello,

Currently I am using ViewportManager.AnimateZoomExtents to animate the data to fit the size of the graph. However, the animation causes the data to reach the very edge (X-Axis Max and Y-Axis Max). Is there a way that I can use AnimateZoomExtents to animate the data out but leave a 10% gap between the edge and X-Axis/Y-Axis Max?

I was able to do this using the following code, but I lose complete animation (which is what I’m looking for).

AxisYVisibleRange = new DoubleRange(AxisYVisibleRange.Min, AxisYVisibleRange.Max + (AxisYVisibleRange.Max * .10))
ViewportManager.AnimateZoomExtents(AnimateZoomTimeSpan);
0 votes
15k views

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

  • Roland D asked 5 years ago
  • last active 2 years ago
0 votes
0 answers
15k views

Hello,

I’m working with a polar chart and I’m having certain issues with the grid.

I’m trying to get a grid that covers all the surface, but I am not able to get it. I think it’s related to the Polar#Axis.

When I set a -200 margin on the Y axis, the grid lines separate and look like they are starting when I want, but they are not being draw outside the original circle.

When I set a -200 margin on the X axis, the outer circle goes outside the surface (red brush to watch it), but the Y axis does not reach the X axis and still inside the original circle.

Is there any way to get the desired grid?

I attach my code and a few images.

Thanks in advance.

                    <Grid Visibility="{Binding ShowPolarGrid, Converter={StaticResource BooleanToVisibilityConverter}}" >
                        <s:SciChartSurface Name="PolarGrid" 
                               MaxFrameRate="24"
                                  BorderBrush="Lime" BorderThickness="2">
                            <s:SciChartSurface.XAxis>
                                <s:PolarXAxis DrawMajorGridLines="True"
                                  DrawMinorGridLines="{Binding PolarMinorLines}" MinorsPerMajor="2"
                                  DrawMajorTicks="False" 
                                  DrawMinorTicks="False"
                                  AutoRange="Never"
                                  BorderBrush="Red"/>
                            </s:SciChartSurface.XAxis>

                            <s:SciChartSurface.YAxis>
                                <s:PolarYAxis DrawMajorGridLines="True"
                                  DrawMinorGridLines="{Binding PolarMinorLines}" MinorsPerMajor="2"
                                  DrawMajorTicks="False" 
                                  DrawMinorTicks="False" 
                                  VisibleRange="0, 1" 
                                  AutoRange="Never"
                                  MajorDelta="1" />
                            </s:SciChartSurface.YAxis>
                        </s:SciChartSurface>
                    </Grid>
  • S C asked 8 years ago
0 votes
4k views

Hello.
Thanks for previous answer but I can’t check how it work because of new problem. I develop WPF application and try to use MVVM as architecture pattern. In the Model part of my application I used a loop started in the new thread. In that loop I get some data which received to ViewModel and used as chart data. Looks as usual.
But then I tried to set visible range updated object which bound to axis I get exception ‘System.InvalidOperationException: ‘The calling thread cannot access this object because a different thread owns it.’ in my loop. I know it happens in WPF applications and need to use Dispatcher to solve it. But as I know if you try to use MVVM you not needed to use Dispatcher often because WPF-binding in most cases is thread-safe. That happend in my case? How to solve it?
Parts of my code:

XAML

<Window x:Class="HMI.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:localVM="clr-namespace:MyCom.HMI.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <localVM:HMIViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <localVM:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
        <localVM:ProcessStateToColorConverter x:Key="ProcessStateToColorConverter"/>
        <localVM:ProcessStateToStartedConverter x:Key="ProcessStateToStartedConverter"/>
        <localVM:ProcessStateToStoppedConverter x:Key="ProcessStateToStoppedConverter"/>
    </Window.Resources>
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
            <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Width="520">
                <Border DockPanel.Dock="Top" Margin="5" Padding="5" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
                    <StackPanel DockPanel.Dock="left" Orientation="Horizontal" Height="40">
                        <Ellipse Margin="5" Height="20" Width="20" HorizontalAlignment="Left" VerticalAlignment="Center" Stroke="Black" Fill="{Binding ProcessState, Converter={StaticResource ProcessStateToColorConverter}}"/>
                        <Label Content="State" Margin="5" Width="90" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>
                    </StackPanel>
                </Border>
                <Border DockPanel.Dock="Top" Margin="5" Padding="5" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
                    <Grid DockPanel.Dock="Left" Height="300">
                        <s:SciChartSurface ChartTitle="Profil" RenderableSeries="{s:SeriesBinding RenderableSeries}">
                            <s:SciChartSurface.XAxis>
                                <s:NumericAxis AxisTitle="Position, m" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>
                            </s:SciChartSurface.XAxis>
                            <s:SciChartSurface.YAxis>
                                <s:NumericAxis AxisTitle="Size, um" VisibleRange="{Binding YVisibleRange, Mode=TwoWay}"/>
                            </s:SciChartSurface.YAxis>
                        </s:SciChartSurface>
                    </Grid>
                </Border>
            </StackPanel>
...

ViewModel

namespace MyCom.HMI.ViewModel
{
    public class HMIViewModel : BindableBase
    {      
        private readonly HMIModel _model = new();

        public HMIViewModel()
        {
            _renderableSeries = new ObservableCollection<IRenderableSeriesViewModel>();

            ((INotifyCollectionChanged)_model.TestControlData).CollectionChanged += (s, e) =>  { TestControlDataChanged(e); };

            InitCharts();
        }

...

        private ObservableCollection<IRenderableSeriesViewModel> _renderableSeries;
        public ObservableCollection<IRenderableSeriesViewModel> RenderableSeries
        {
            get { return _renderableSeries; }
            set
            {
                SetProperty(ref _renderableSeries, value, nameof(RenderableSeries));
            }
        }

        private IRange _xVisibleRange;
        public IRange XVisibleRange
        {
            get => _xVisibleRange;
            set
            {
                if (_xVisibleRange != value)
                {
                    SetProperty(ref _xVisibleRange, value, nameof(XVisibleRange));
                }
            }
        }

        private IRange _yVisibleRange;
        public IRange YVisibleRange
        {
            get => _yVisibleRange;
            set
            {
                if (_yVisibleRange != value)
                {
                    SetProperty(ref _yVisibleRange, value, nameof(YVisibleRange));
                }
            }
        }

        private XyDataSeries<double, double> _lineDataDiameter1;

...

        private void InitCharts()
        { // TODO
            _lineDataDiameter1 = new XyDataSeries<double, double>()
            { 
                SeriesName = "Diameter1"
            };

            RenderableSeries.Add(new LineRenderableSeriesViewModel()
            {
                StrokeThickness = 2,
                Stroke = Colors.SteelBlue,
                DataSeries = _lineDataDiameter1,
                StyleKey = "LineSeriesStyle"
            });
        }

        private void TestControlDataChanged(NotifyCollectionChangedEventArgs args)
        {
            if (args.Action == NotifyCollectionChangedAction.Add && args.NewItems?.Count > 0)
            {
                var testControlActualState = args.NewItems.Cast<TestControlActualState>();

                List<double> xValues = new();
                List<double> yValuesDiameter1 = new();

                foreach (var item in testControlActualState) 
                {
                    if (item.Diameter1 > 0f)
                    {
                        xValues.Add(item.FiberLength);
                        yValuesDiameter1.Add(item.Diameter1);
                    }
                }

                _lineDataDiameter1.Append(xValues, yValuesDiameter1);

                // TODO
                if (xValues.Count > 0)
                {
                    var cuurMaxValueX = xValues.Max();
                    XVisibleRange.Max = cuurMaxValueX;
                    XVisibleRange.Min = cuurMaxValueX - 7000f > 0 ? cuurMaxValueX - 7000f : 0;
                }

                // TODO
                if (yValuesDiameter1.Count > 0)
                {
                    var cuurMaxValueY = yValuesDiameter1.Max();
                    YVisibleRange.Max = cuurMaxValueY + 50;
                    YVisibleRange.Min = 0;
                }
            }
        }

Model

namespace MyCom.HMI.Model
{
    public class HMIModel : BindableBase, IDisposable
    {
        private readonly ObservableCollection<TestControlActualState> _testControlData;
        internal ReadOnlyObservableCollection<TestControlActualState> TestControlData { get; }

        public HMIModel()
        {
            _testControlData = new ObservableCollection<TestControlActualState>();
            TestControlData = new ReadOnlyObservableCollection<TestControlActualState>(_testControlData);
        }

...

        private void StartPollerThread()
        {
            _pollerCancellationToken ??= new CancellationTokenSource();

            if (!_pollerCancellationToken.IsCancellationRequested)
            {
                Task.Factory.StartNew(() => PollerDoWork(_pollerCancellationToken.Token), TaskCreationOptions.LongRunning);
            }
        }

        private void PollerDoWork(CancellationToken cancellationToken)
        {
            try
            {
                Thread.CurrentThread.Priority = ThreadPriority.Lowest;
                IsPollerStarted = true;

                while (!cancellationToken.IsCancellationRequested && (_isKeepConnection || _countOfTrying <= MAX_COUNT_OF_TRYING))
                {
                    try
                    {
                        _testControlData.Add(_emulator.GetTestControlActualState());

                        if (!_isKeepConnection && _countOfTrying > 0)
                        {
                            Thread.Sleep(_pollerTimeout / REASK_COEFICIENT);
                            continue;
                        }
                    }
                    catch
                    {
                        // Thread must be alive!!! ...ALWAYS!!!
                    }
                    Thread.Sleep(_pollerTimeout);
                }
            }
            finally
            {
                IsPollerStarted = false;
                _pollerCancellationToken = null;
            }
        }
0 votes
0 answers
9k views

Hello. When I try to add to curve some points with very small numbers:

curve.DataSeries = chartData;
chartData.Append(1, -6.525999992441564E-04);
chartData.Append(2, -6.5259999988724722E-04);
chartData.Append(3, -6.52599999843273E-04);
chartData.Append(4, -6.5259999970558607E-04);
chartData.Append(5, -6.5259999978135147E-04);

y axis not shown labels whatever Text Formatting property for this is. What I’m doing wrong? I noticed if I add points with -3 order of value, axis labels will show.
Surface description:

<sc:SciChartSurface>
    <sc:SciChartSurface.RenderableSeries>
        <sc:FastLineRenderableSeries Name="curve"/>
    </sc:SciChartSurface.RenderableSeries>
    <sc:SciChartSurface.XAxis>
        <sc:NumericAxis/>
    </sc:SciChartSurface.XAxis>
    <sc:SciChartSurface.YAxis>
        <sc:NumericAxis TextFormatting="E3" AutoRange="Always" x:Name="yAxis"/>
    </sc:SciChartSurface.YAxis>
</sc:SciChartSurface> 
Showing 51 - 67 of 67 results