Pre loader

Tag: Axes

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

1 vote
2k views

Hi, I want to create info boxes between xAxis and chart, info box will contain text, but the width/position of the box will be base on the xAxis and should sync with the chart (zoom etc). For example, if xAxis is from 1-100, and the first info box start from 1 to 10, then the width/position of the box should cover from 1-10, and if I zoom between 1-10, then info box should also sync and expand.

So far, I have created it using horizontal stacked xAxes and custom axis layout strategy provided by you. But the issue is that the stacked xAxes are not sync with the chart, for now, to make it seem sync, I am recalculating stacked axis length when zoom. But the issue comes when there should be gap between the info boxes, for example, if xAxis is 1-100 and the first box is 1-10 and the second box is 20-40, then there is a gap of 10 between the first and second. Right now, those gap are filled using empty xAxes, but they are not correct. When there is gap, the position of the boxes are wrong.

  • First image is my current implementation of it using custom axis layout and stacked xAxes.
  • Second image is how it look when zoomed
  • Third image is the gap issue with the current implementation
  • Fourth image is how the correct implementation should look like.

Codesanbox example:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

  • Nung Khual asked 7 months ago
  • last active 7 months ago
1 vote
6k views

Hi,

I have used WPF Chart Vertically Stacked YAxis example:
WPF Chart Vertically Stacked YAxis | Fast, Native, Charts for WPF (scichart.com)

and WPF Chart Multiple YAxis example:
WPF Chart Multiple YAxis | Fast, Native, Charts for WPF (scichart.com)

I have managed to achieve both individually but now essentially I would like to combine them.

I have been trying to alter the Right Axes Panel Template to allow this but it seems to only allow one or the other.

My main difference from the examples is that I have a collection of Yaxes of NumericAxisViewModel type in my viewmodel that is decided by the user at runtime before creating the chart and so is not defined in the xaml and bound with the YAxes property on the surface using AxesBinding.

I want to be able to vertically stack some of the Yaxes and have the rest stack horizontally side by side on the same axis alignment side, in my case the right side.

Is this something that is possible? If so how do I achieve this?

Let me know if you need any more info.

Cheers,
Grahame

0 votes
9k views

Hello SciChart-Team,
we had the requirement to show the zero line when there are negative values ​​in the chart.
We noticed the following things, especially in connection with the main grid lines.
There are some side effects at certain sizes of the window:
When the gridlines are on(see screenshot 1):
1. Grid line and tick are not on the same level (Only for certain sizes)
2. The grid line and horizontal annotation line (green) are not aligned either (Only at certain sizes)
3. The axis line (defined via BorderThickness) is also not aligned with the grid line (regardless of the size of the control).And the bottom tick is never aligned with the major grid line

If the major grid lines are switched off, the zero annotation line is not aligned to the ticks for certain sizes of the control (see screenshot 2)

It looks like different algorithms were used to calculate the line position of the ticks, grid lines and line annotations.

The problem was detected on the monitor with 100% scaling. On a 4K monitor with scaling > 100%, the problem became even more apparent

Do you have any suggestion how to solve the problem?

I’ve attached a modified example project in which the behavior can be reproduced.

Regards
Silvester Schneidt

0 votes
7k views

Currently we have two graph surfaces with two Y axes on each side and we need all of the Y axes to have fixed width size. Until now we were achieving that like this:
topGraphSurface.LeftAxisAreaForcedSize = 45;
topGraphSurface.RightAxisAreaForcedSize = 45;
bottomGraphSurface.LeftAxisAreaForcedSize = 45;
bottomGraphSurface.RightAxisAreaForcedSize = 45;

but since updating to the new SciChart v3 we get the error “SciChartSurface does not contain a definition for (Left)AxisAreaForcedSize”. I couldn’t find any information about this in the Migration guide, so is there a way to achieve this in the new version?

0 votes
7k views

Does SciChart provide a built-in way to display multiple data series on the same 3D chart where the series do not share a common unit or order of magnitude? On a 2D chart I would use a second y-axis via the YAxes collection but I can’t find an equivalent property on the SciChart3DSurface class.

0 votes
4k views

We have 2 graph surfaces with 2 Y axes on each side, but the label formatting of the axes is different. That makes the axes widths different and therefore both the graphs appear as they have different widths. Is there a way to make the axis widths fixed so the graphs can be the same size?

1 vote
10k views

How to programmatically add Scrollbars to MVVM instantiated axes?

I added DateTimeAxisViewModel and NumericAxisViewModel to my code. That works from so far. A way to add scrollbars i couldnt find a some tries.

Are there some ways to get this done? Maybe change the templates of the axes or the chart?

Best regards

0 votes
0 answers
9k views

We are using the candlestick chart, and scrolling off the ends of the plotted data behaves very strangely:
– If I scroll slowly, the chart expands, anchored to the end of the data set (this is expected)
– If I scroll quickly, it lets me scroll beyond the end of the data set
– Once I have scrolled of the end of the data set, touching the screen again jumps back to the data set
– If I scroll slowly so the chart is expanding, and then release touch, the chart continues to move with inertia. If I clock again it jumpos back to expanding mode.

The combination of all these behaviours makes a very confusing and unsatisfying user experience.

Is there a way to change the behaviour? I had a look at https://www.scichart.com/documentation/ios/v2.x/api/dir_2dcc4ec269b335aa862d36c6f6e3093f.html but can’t find anything that might.

We have set:
xAxis is a SCIDateTimeAxis
xAxis.VisibleRange to desired range
xAxis.VisibleRangeLimit = range.Clone() where range is desired range
xAxis.VisibleRangeLimitMode = SCIRangeClipMode.inMax (I guess it should be called minMax but something broke in the build?)
xAxis.AutoRange = SCIAutoRange.Never

with chart modifiers:
– new SCIZoomPanModifier()
– new SCIZoomExtentsModifier()
– new SCIPinchZoomModifier()

Thanks,

Dan

0 votes
9k views

I’ve had great success showing pixel values of a 2D image using the UniformDataSeries3D type. What I’d like to do now is display a subset of the pixel values in an image using a rectangular region of interest. However, it seems that the axes always start from 0. If I want to have the axes to not begin at value 0, will I have to calculate points for the whole image and zoom in? Or is there a way to set what the starting value of the axes are (while still indexing the values at index 0)

0 votes
0 answers
12k views

I have a Chart with two Y-Axes, one on the left and one on the right for a SeriesvalueModifier.
i need to bind the VisibleRange to a Property in the ViewModel. Everything works fine, except for if i zoom via the MouseWheelZoomModifier.
It looks like the Chart gets “stretched” in Y direction. I guess the modifier zooms on both axes, so the property they are both bound to gets two updates, one for each axis.
When i bind the VisibleRange of Axis[A] to theVisibleRange of Axis[B] which is bound to the property also won’t work.
Do you have any idea how this could be fixed ?

what i want to achieve is this behavior:

https://www.scichart.com/questions/question/faq-how-to-have-two-yaxis-on-left-and-right-with-the-same-visiblerange-mirrored-yaxis

 Axis[A]
            <s:NumericAxis
                x:Name="NumericAxis_Mass"
                x:Key="NumericAxis_Mass"
                Id="NumericAxis_Mass"
                AxisTitle="{ext:Localization Chart_Axis_PartialPressure}"
                GrowBy="0.1,0.1"
                VisibleRange="{Binding YVisibleRange,
                                Mode=TwoWay,
                                UpdateSourceTrigger=PropertyChanged,
                                NotifyOnSourceUpdated=True,
                                NotifyOnTargetUpdated=True}" 
                AutoRange="{Binding AnalysesAutoRange_y,
                           Mode=TwoWay,
                           UpdateSourceTrigger=PropertyChanged,
                           NotifyOnSourceUpdated=True,
                           NotifyOnTargetUpdated=True}"
                AxisAlignment="Left"
                Style="{StaticResource Chart.NumericAxis.Style}" />

Axis[B]
                <s:NumericAxis
                x:Key="NumericAxis_Mass_Empty"
                x:Name="NumericAxis_Mass_Empty"
                GrowBy="0.1,0.1"
                TextFormatting="0.00E+00"
                VisibleRange="{Binding YVisibleRange,
                                Mode=TwoWay,
                                UpdateSourceTrigger=PropertyChanged,
                                NotifyOnSourceUpdated=True,
                                NotifyOnTargetUpdated=True}"            
                AutoRange="{Binding AnalysesAutoRange_y,
                           Mode=TwoWay,
                           UpdateSourceTrigger=PropertyChanged,
                           NotifyOnSourceUpdated=True,
                           NotifyOnTargetUpdated=True}"
                AxisAlignment="Right"
                Style="{StaticResource Chart.NumericAxis.Style}"
                DrawLabels="False"
                DrawMajorBands="False"
                DrawMajorGridLines="False"
                DrawMajorTicks="False"
                DrawMinorGridLines="False"
                DrawMinorTicks="False"
                Margin="35,0,0,0"
                Width="auto" />
  • Dirk Heyne asked 7 years ago
  • last active 7 years ago
1 vote
10k views

I want to put multiple Line Charts on a standard WPF TabControl. One Chart per tab.
Each tab should show a different chart with, in general, a different range on its X axis.
After a chart on a tab has been panned or zoomed, then after switching to another tab and then returning to the original tab, then the original X axis values should be preserved.
My problem is that I end up with a behaviour that looks like all the charts share one X axis.

So my question is how can I achieve the desired behaviour?
I did try databinding XAxis and, later, XAxes, but I ended up with the same behaviour.
Thanks in advance to anyone that can help me out with this.

Here is the briefest example I could construct that displays the problem.
It simply displays 3 tabs with different ranges of X values and AutoRange set to “Once”.
When it runs, all 3 charts are displayed with the same X axis range which is only correctly autoranged for the first tab.
The attached images are screenshots of the three tabs.

Here is my XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SciTest" xmlns:s="http://schemas.abtsoftware.co.uk/scichart" x:Class="SciTest.MainWindow"
    Title="MainWindow" Height="300  " Width="500">
<Window.DataContext>
    <local:RSeriesSourceList/>
</Window.DataContext>


<DockPanel>
    <TabControl ItemsSource="{Binding}">
        <TabControl.ItemTemplate>
            <!--This dictates what goes in the Tab header-->
            <DataTemplate>
                <TextBlock Text="{Binding Title}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <!--This dictates what goes in the tab page-->
            <DataTemplate>
                <s:SciChartSurface RenderableSeries="{Binding RSeries}">
                    <s:SciChartSurface.XAxes>
                        <s:NumericAxis/>
                    </s:SciChartSurface.XAxes>
                    <s:SciChartSurface.YAxes>
                        <s:NumericAxis AutoRange="Always"/>
                    </s:SciChartSurface.YAxes>
                </s:SciChartSurface>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</DockPanel>

And here is the code-behind for the Data Context

    class RSeriesSource
{
    public String Title { get; set; }
    public ObservableCollection<IRenderableSeries> RSeries{get;set;}
    static Random rnd = new Random(); //for generating example data
    public RSeriesSource()
    {
        RSeries = new ObservableCollection<IRenderableSeries>();
    }
    public static RSeriesSource Example(int n)
    {
        RSeriesSource res = new RSeriesSource();
        res.AddRS(n);
        res.Title = "S" + n.ToString();
        return res;
    }

    FastLineRenderableSeries AddRS(int offset)
    {
        XyDataSeries<Double, Double> Series = new XyDataSeries<Double, Double>();
        for (int ix = 0; ix < 10; ix++)
        {
            Series.Append(offset * 5 + ix, offset + rnd.NextDouble());
        }
        FastLineRenderableSeries res = new FastLineRenderableSeries();
        res.DataSeries = Series;
        //if (yAx != null)
        //    res.YAxisId = yAx.Id; //Use the Id NOT the axis
        RSeries.Add(res);
        return res;
    }
}

class RSeriesSourceList : ObservableCollection<RSeriesSource>
{
    public RSeriesSourceList()
    {
        for (int i = 0; i < 3; i++)
        {
            Add( RSeriesSource.Example(i));
        }
    }
}
0 votes
15k views

Have a good day!
Is there any way to make two and more axis to take place in the same position (one overlays another).
I’ve tried to do this using margin, but the surface had moved to the left border (picture 1).

<visuals:NumericAxis VisibleRange="{Binding YVisibleRange, Mode=TwoWay}" 
                                 Width="40" 
                                 DrawLabels="False" 
                                 DrawMajorBands="False"
                                 DrawMajorTicks="False"
                                 DrawMinorTicks="False"
                                 DrawMinorGridLines="False"
                                 MaxAutoTicks="6"/>         
            <visuals:NumericAxis DrawLabels="True" 
                                 Width="40" 
                                 Id="Chart1"
                                 Margin="0,0,-120,0"
                                 Visibility="Visible"
                                 AutoTicks="True"
                                 MaxAutoTicks="4"/>

            <visuals:NumericAxis DrawLabels="True" 
                                 Width="40"
                                 Id="Chart2" 
                                 Margin="0,0,-120,0"
                                 Visibility="Visible" 
                                 MaxAutoTicks="4"/>

Thanks in advance!

  • Egor asked 9 years ago
  • last active 9 years ago
1 vote
13k views

I need axes as described below. I can either modify your existing axis control or add my own in a canvas next to the SciChartSurface. So far I have been unable to modify your existing axis to fit my needs. A Y axis should look like this typical logarithmic axis (range 2 to 2000):

|-----------------  Resistivity ------------------|
2                                                2000

The specifications are
1.) Tick marks only at the end
2.) Title straddles the axis
3.) One axis per curve on the chart
4.) Axis uses same color as curve
5.) Axis uses same dash pattern as curve
6.) The edge of the chart is not an axis

This is basically a combination of a legend with multiple axes. I have not been able to get this effect with existing controls, so I have started to make my own in a canvas. To do this I need to line up my two tick marks with the edges of the chart. How can I obtain the location of the edges?

1 vote
16k 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 DrawMajorGridLines, DrawMinorGridLines are turned ON the are drawn only at the first trace.

  • Jan Kaiser asked 9 years ago
  • last active 9 years ago
1 vote
17k views

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support-dev.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

  • srillaert asked 10 years ago
  • last active 10 years ago
Showing 15 results

Try SciChart Today

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

Start TrialCase Studies