Forums

Hello,
I’ve been looking for the documentation of how to customize the look of the chart. I have a black/dark gray checker pattern that seems to be the default. I would like to:
1. Change the background to white, no checkerboard pattern
here is the documentation for chart background but it does not show me how to change it to white. https://www.scichart.com/documentation/ios/v2.x/webframe.html#The%20SciChartSurface%20Type.html
I have found through experimentation the I can call

surface.backgroundColor

But that just changes the axis background color

2. Make the text larger on the axis.
here is the documentation for the axis https://www.scichart.com/documentation/ios/v2.x/webframe.html#Adding%20an%20Axis%20to%20a%20SciChartSurface.html
I see these lines that were provided but they won’t compile because Xcode doesn’t know what defaultFontSize is and there are no other references to it and I still don’t see a way to set the size.

textFormat.fontName = SCSFontsName.defaultFontName
textFormat.fontSize = SCSFontSizes.defaultFontSize

I think it would be helpful to create a walkthrough for iOS that shows how to customize the background and axis. I’ve looked through the samples provided but the files are huge and I get lost trying to figure it out.
Thanks,
Warren

Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.

**Requirements: **

• Assume that x-axis is Time and y-axis is prices.
• There are multiple series in the chart (e.g., Bid Price, Ask Price)
• Allow user to select a time on xAxis using CTRL + CLICK
• When the user selects the time, show the rollover line and the tooltip for all series at the selected time
• This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.

I started inheriting the RolloverModifier but couldn’t find an appropriate method to show the tooltip.

So, I started implementing the above feature using CustomModifierBase2d and adding a VerticalLineAnnotation for the rollover line. But again, struggling with the tooltip.

If someone could help me out or give me pointers, that would be highly appreciated.

Best Regards,
Sachin Patel.

Hello,

I am trying to evaluate Scichart for purchase. I am using live data (17 Channels, many samples per second) to draw FastLineRenderableSeries (0-100% on the y axis, time on the x axis). I have everything working satisfactorily using the MVVM pattern. I have tried the HighQualityRenderSurface and Direct3D10RenderSurface.

Are these renderers actually working or am I still using the software renderer?

I need to draw a translucent rectangle on the chart to indicate a “Good” range of values of y values (say 40-50%).

If I use annotations to draw a rectangle, everything slows down and it is unusable. If I use immediate mode drawing and the HighQualityRendererSurface it is kind of OK. If i use immediate mode drawing and the Direct3D10RenderSurface the rectangle and the series lines alternately flash slowly and it is unusable.

How can I draw a rectangle on the screen using live data and get good performance? Do I need the license for this to work well?

Thanks.

Hi,

In the interface IRenderableSeriesViewModel an IncludeLegend property would be helpful (analogous to LegendModifier.IncludeSeriesProperty). Otherwise you have to override the LegendModifier.GetSeriesInfo method and implement the logic yourself.

regard
Tobias

Hello again!

I’ve got a problem with LineAnnotation display on the axis: it is blurry (image 1). I have tried to use UseLayoutRounding/SnapsToDevicePixels properties from this post https://www.scichart.com/questions/question/2-1-1-lines-are-sometimes-blurry-when-added-to-modifier-surface, but it doesn’t work. Any ideas to make this LineAnnotation look like other annotation on surface?

Thanks in advance!

Hi, I’m using the trial version for Xamarin. We wish to develop a mobile app which will have charting capabilities similar to our existing desktop application. I’ll provide an example of what we do (3 screenshots attached), can you please tell me if SciChart can do the same?

In #1 you see an FFT chart.
We select a data point by touching the screen.
In #2 you see a vertical blue line over the selected data point, plus 5 equidistant markers to the right.
We click a button to move right.
In #3 you see the 5 markers have moved to the right, the distance between them has increased slightly.

Is this something that SciChart can handle? Easily? With difficulty?
We want to write all the code in the common Xamarin project only (i.e. no iOS or Android specific code).

Thanks very much,
Wayne

Hello,

we are building an application where Charts are created/placed by the user in a form of editor.

We observed that the creation of the first Chart takes between 1 to 3 seconds (depending on the system) but the creation of subsequent Charts takes virtually no time (as it should be).

We assume that the creation of the first Chart involves some kind of time consuming initialization that is later used in the creation of subsequent Charts.

So we have researched if there is a way to do this initialization at the start of our application, so the user is not inconvenienced by a three second waiting time while placing the first Chart.

We discovered the “LoadLibrariesAndLicenseAsync”-function. However, it looks like it has no measurable effect.

Maybe we are using it wrong?

Here is an example code to illustrate the problem in a condensed manner:

Two charts are created and each time the time it takes to create them is measured.

The first creation takes about 1600 milliseconds, the second one only 2.

How can we make both creations only take a few milliseconds?

Thank you.

        // SciChartSurface.SetRuntimeLicenseKey("our key");

         await SciChart.Charting.Visuals.SciChart2DInitializer.LoadLibrariesAndLicenseAsync(
           "our key",
            null); //...does not seem to work

        Stopwatch sw = new Stopwatch(); 
        sw.Restart();//start stopwatch

        //creating the first Scichart with test data:

        SciChartSurface sciChartSurface = new SciChartSurface();

        XyDataSeries<double, double> xyDataSeries = new XyDataSeries<double, double>();
        xyDataSeries.AcceptsUnsortedData = true;
        FastLineRenderableSeries fastLineRenderableSeries = new FastLineRenderableSeries();
        fastLineRenderableSeries.DataSeries = xyDataSeries;
        sciChartSurface.RenderableSeries.Add(fastLineRenderableSeries);

        NumericAxis m_xAxis = new NumericAxis();
        NumericAxis m_yAxis = new NumericAxis();
        m_yAxis.AutoRange = AutoRange.Always;
        sciChartSurface.XAxis = m_xAxis;
        sciChartSurface.YAxis = m_yAxis;

        using (xyDataSeries.SuspendUpdates())
        {
            for (int i = 0; i < 100; i++)
                xyDataSeries.Append(i, Math.Sin(i));
        }

        Screen.Children.Add(sciChartSurface);//add first Scichart to grid
        sciChartSurface.Margin = new Thickness(0, 0, 500, 0);

        MessageBox.Show("time: "+sw.ElapsedMilliseconds); //////////  1610 Mlliseconds
        sw.Restart();//restart stopwatch

        //creating the second Scichart with test data:

        SciChartSurface sciChartSurface2 = new SciChartSurface();

        XyDataSeries<double, double> xyDataSeries2 = new XyDataSeries<double, double>();
        xyDataSeries2.AcceptsUnsortedData = true;
        FastLineRenderableSeries fastLineRenderableSeries2 = new FastLineRenderableSeries();
        fastLineRenderableSeries2.DataSeries = xyDataSeries2;
        sciChartSurface2.RenderableSeries.Add(fastLineRenderableSeries2);

        NumericAxis m_xAxis2 = new NumericAxis();
        NumericAxis m_yAxis2 = new NumericAxis();
        m_yAxis2.AutoRange = AutoRange.Always;
        sciChartSurface2.XAxis = m_xAxis2;
        sciChartSurface2.YAxis = m_yAxis2;

        using (xyDataSeries2.SuspendUpdates())
        {
            for (int i = 0; i < 100; i++)
                xyDataSeries2.Append(i, Math.Sin(i));
        }

        Screen.Children.Add(sciChartSurface2);//add second Scichart to grid
        sciChartSurface2.Margin = new Thickness(500, 0, 0, 0);

        MessageBox.Show("time: "+sw.ElapsedMilliseconds); //////////////////////////// 2 Mlliseconds

Hello,

When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

Imagine I have a chart with a RolloverModifier, such that I see the point marker, and also a CursorModifier so I see the axis labels with the exact value I’m hovering.
This chart has the axis title hidden, and also the labels hidden, so I can really only see them trough the CursorModifier axis labels.
Since the axis title and labels are hidden, the axis labels spawn inside the chart, and the point marker from the RolloverModifier may be drawn on top of the labels.

I’d like to properly control drawing order here, so my axis labels get prioritised.
Is there a way to do so?

Codepen example: https://codepen.io/jrfv/full/VwqVBdo

Hello,

I need to display realtime chart with 20 series of data. My data is arriving at 500Hz. When I’m displaying this data, I find that after a while SciChart hangs with what appears to be a deadlock.

I’ve read as much as I can find about realtime graphing with SciChart and I started with tutorial 4 – Adding Realtime Updates. This article (https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread) suggests that SciChart is thread safe so I tried using a second thread to feed data into a graph. My only change was to move from the main thread timer in the example to a GCD timer running at 500Hz. With this, I’m easily able to reproduce the deadlock in around 1.5 seconds.

Here is the main thread which is attempting to render:

Thread 1 Queue : com.apple.main-thread (serial)
#0  0x0000000192bc8c20 in __psynch_rw_rdlock ()
#1  0x0000000192ae4864 in _pthread_rwlock_lock_wait ()
#2  0x0000000192ae47fc in _pthread_rwlock_lock_slow$VARIANT$mp ()
#3  0x0000000104a93828 in -[SCIRenderableSeriesLock initWithRenderableSeries:] ()
#4  0x0000000104ab742c in -[SCIRenderSurfaceRenderer p_SCI_updateCoreData:renderPassState:viewportSize:] ()
#5  0x0000000104ab6f4c in -[SCIRenderSurfaceRenderer p_SCI_renderLoop:assetManager:renderPassState:] ()
#6  0x0000000104ab6dc4 in -[SCIRenderSurfaceRenderer onDrawWithContext:andAssetManager:] ()
#7  0x00000001049c50c0 in -[SCIRenderSurfaceDrawable2D drawFrameIn:withDrawableSize:] ()
#8  0x0000000104ad4db8 in -[SCITwisterRendererBase drawFrameIn:withDrawableSize:] ()
#9  0x00000001049e56c8 in -[SCIMetalRenderer drawFrameIn:withDrawableSize:] ()
#10 0x0000000104a25b70 in -[SCIMetalRenderSurfaceBase draw] ()
#11 0x00000001999861ec in -[CALayer display] ()
#12 0x00000001999984d4 in CA::Layer::layout_and_display_if_needed(CA::Transaction*) ()
#13 0x00000001998e11d8 in CA::Context::commit_transaction(CA::Transaction*, double) ()
#14 0x000000019990ab78 in CA::Transaction::commit() ()
#15 0x000000019990b58c in CA::Transaction::observer_callback(__CFRunLoopObserver*, unsigned long, void*) ()
#16 0x0000000192d50fbc in __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ ()
#17 0x0000000192d4beb0 in __CFRunLoopDoObservers ()
#18 0x0000000192d4c32c in __CFRunLoopRun ()
#19 0x0000000192d4bc38 in CFRunLoopRunSpecific ()
#20 0x000000019d39a38c in GSEventRunModal ()
#21 0x0000000196e7c444 in UIApplicationMain ()
#22 0x00000001042cc478 in main at /Users/mall/Downloads/SciChart.iOS.Examples-SciChart_v3_Release/tutorials/tutorials-2d/Tutorial 04 - Adding Realtime Updates/Tutorial 04 - Adding Realtime Updates/AppDelegate.swift:5
#23 0x0000000192bd38f0 in start ()

and here is my worker thread adding data to a series:

Thread 11 Queue : com.apple.root.default-qos.overcommit (concurrent)
#0  0x0000000192bc8c20 in __psynch_rw_rdlock ()
#1  0x0000000192ae4864 in _pthread_rwlock_lock_wait ()
#2  0x0000000192ae47fc in _pthread_rwlock_lock_slow$VARIANT$mp ()
#3  0x0000000104ac1518 in -[SCIXDataSeries p_SCI_searchDataIndexOn:xMinAsDouble:xMaxAsDouble:downSearchMode:upSearchMode:] ()
#4  0x0000000104ac1368 in -[SCIXDataSeries getIndicesXRange:xMinAsDouble:xMaxAsDouble:isCategoryAxis:] ()
#5  0x0000000104ac1b34 in -[SCIXDataSeries getWindowYRangeWithXCoordCalc:getPositiveRange:] ()
#6  0x0000000104aceddc in -[SCIRenderableSeriesBase getYRange:positive:] ()
#7  0x00000001049b25ac in -[SCIRangeCalculationHelper2DBase getWindowedYRangeWithXCalculators:] ()
#8  0x0000000104a05f84 in -[SCIAxisBase getWindowedYRangeWithXRanges:] ()
#9  0x00000001049f4184 in -[SCIChartSurface p_SCI_zoomExtentsYWithCalculators:andDuration:] ()
#10 0x00000001049f3d14 in -[SCIChartSurface p_SCI_zoomExtentsWithDuration:] ()
#11 0x00000001042c79e8 in closure #1 in ViewController.handleTimer() at /Users/mall/Downloads/SciChart.iOS.Examples-SciChart_v3_Release/tutorials/tutorials-2d/Tutorial 04 - Adding Realtime Updates/Tutorial 04 - Adding Realtime Updates/ViewController.swift:84
#12 0x00000001042c7500 in thunk for @escaping @callee_guaranteed () -> () ()
#13 0x0000000104abdae0 in +[SCIUpdateSuspender usingWithSuspendable:withBlock:] ()
#14 0x00000001042c7824 in ViewController.handleTimer() at /Users/mall/Downloads/SciChart.iOS.Examples-SciChart_v3_Release/tutorials/tutorials-2d/Tutorial 04 - Adding Realtime Updates/Tutorial 04 - Adding Realtime Updates/ViewController.swift:79
#15 0x00000001042c9250 in partial apply ()
#16 0x00000001042cb1e4 in closure #1 in closure #1 in RepeatingTimer.timer.getter at /Users/mall/Downloads/SciChart.iOS.Examples-SciChart_v3_Release/tutorials/tutorials-2d/Tutorial 04 - Adding Realtime Updates/Tutorial 04 - Adding Realtime Updates/RepeatingTimer.swift:26
#17 0x00000001042c7500 in thunk for @escaping @callee_guaranteed () -> () ()
#18 0x0000000107093730 in _dispatch_client_callout ()
#19 0x0000000107096390 in _dispatch_continuation_pop ()
#20 0x00000001070a9614 in _dispatch_source_invoke ()
#21 0x00000001070a4d74 in _dispatch_root_queue_drain ()
#22 0x00000001070a5698 in _dispatch_worker_thread2 ()
#23 0x0000000192aeab38 in _pthread_wqthread ()

Here is my version of the ViewController class from Tutorial 4 with the GCD timer (note that it uses RepeatingTimer class found here: https://gist.github.com/danielgalasko/1da90276f23ea24cb3467c33d2c05768) – my changes are marked with the //MALL comment:

import UIKit
import SciChart

class ViewController: UIViewController {

    //MALL
    private var timer = RepeatingTimer(timeInterval: 1.0/500.0)

    private let pointsCount = 200
    private var count: Int = 0

    private let lineData = SCIDoubleValues()
    private lazy var lineDataSeries: SCIXyDataSeries = {
        let lineDataSeries = SCIXyDataSeries(xType: .int, yType: .double)
        lineDataSeries.seriesName = "Line Series"
        lineDataSeries.fifoCapacity = 300
        return lineDataSeries
    }()
    private let scatterData = SCIDoubleValues()
    private lazy var scatterDataSeries: SCIXyDataSeries = {
        let scatterDataSeries = SCIXyDataSeries(xType: .int, yType: .double)
        scatterDataSeries.seriesName = "Scatter Series"
        scatterDataSeries.fifoCapacity = 300
        return scatterDataSeries
    }()

    private var surface: SCIChartSurface {
        return view as! SCIChartSurface
    }

    override func loadView() {
        viewRespectsSystemMinimumLayoutMargins = false
        view = SCIChartSurface()
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let xValues = SCIIntegerValues()
        for i in 0 ..< pointsCount {
            xValues.add(Int32(i))
            lineData.add(sin(Double(i) * 0.1))
            scatterData.add(cos(Double(i) * 0.1))
            count += 1
        }
        lineDataSeries.append(x: xValues, y: lineData)
        scatterDataSeries.append(x: xValues, y: scatterData)

        let lineSeries = SCIFastLineRenderableSeries()
        lineSeries.dataSeries = lineDataSeries

        let pointMarker = SCIEllipsePointMarker()
        pointMarker.fillStyle = SCISolidBrushStyle(colorCode: 0xFF32CD32)
        pointMarker.size = CGSize(width: 10, height: 10)

        let scatterSeries = SCIXyScatterRenderableSeries()
        scatterSeries.dataSeries = scatterDataSeries
        scatterSeries.pointMarker = pointMarker

        let legendModifier = SCILegendModifier()
        legendModifier.orientation = .horizontal
        legendModifier.position = [.bottom, .centerHorizontal]
        legendModifier.margins = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)

        SCIUpdateSuspender.usingWith(self.surface) {
            self.surface.xAxes.add(items: SCINumericAxis())
            self.surface.yAxes.add(items: SCINumericAxis())
            self.surface.renderableSeries.add(items: lineSeries, scatterSeries)
            self.surface.chartModifiers.add(items: SCIPinchZoomModifier(), SCIZoomExtentsModifier())
            self.surface.chartModifiers.add(items: SCIRolloverModifier(), legendModifier)
        }

        //  MALL
        timer.eventHandler = handleTimer
        timer.resume()
    }

    //  MALL
    private func handleTimer() {
        let x = count
        SCIUpdateSuspender.usingWith(surface) {
            self.lineDataSeries.append(x: x, y: sin(Double(x) * 0.1))
            self.scatterDataSeries.append(x: x, y: cos(Double(x) * 0.1))

            // zoom series to fit viewport size into X-Axis direction
            self.surface.zoomExtents()
            self.count += 1
        }
    }
}

Thanks in advance for any help you can offer.

Memory leak in Fifo mode with Visual Xccelerator Engine enabled.

Two screenshots with Visual Xccelerator Engine enabled and disabled.
In a real application, the behavior is repeated. GS.Collect does not solve the problem.

It looks like the problem occurs on the integrated video card. AMD. When switching to a discrete video card. Memory is stable.

Request for enhancement to polar charts to allow for rotation of the X axis. I want to use this chart type with compass directions. Therefore a range of 0-360 with 0 at the top of the chart.

I was able to use the workaround for rotation here:
https://www.scichart.com/questions/question/polar-chart-x-axis-starting-point-and-direction

However as the OP on that question noted there are several drawbacks to simply rotating the entire chart surface.
Also I found that at run-time rotating the chart surface is inaccurate as in this example:

As you can see the 100 degree mark is not in the correct location. Directly right should be 90.

In the designer the chart axis looks as it should:

Hi there,

Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.

I declare the legend something like this during the initial bootstrapping of the plot view:

        const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
        sciChartSurface.chartModifiers.add(legend);

After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:

        const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
        if (thisRs) {
            thisRs.isVisible = s.isVisible;
            thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
        } 

These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:

1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?

It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.

Thanks!
Dan

Dear all, I am trying to export a heat map that I have generated that you can see at the right side of the attached image. However, the resulting XPS generated is the figure at the left. As one can see they are not very similar as one would expect. I have checked my code, but can’t seem to find the problem. Parts of my code are shown here to give more info. If anyone has tips why this strange result may occur , let me know please.

 <s:SciChartSurface x:Name="sciChart"  ChartTitle="Carbon and DBE">


       <s:SciChartSurface.RenderableSeries>
           <s:FastHeatMapRenderableSeries x:Name="heatmapSeries" Opacity="0.5" Maximum="100">
               <s:FastHeatMapRenderableSeries.ColorMap>
                   <LinearGradientBrush>
                       <GradientStop Offset="0" Color="DarkBlue"/>
                       <GradientStop Offset="0.2" Color="CornflowerBlue"/>
                       <GradientStop Offset="0.4" Color="DarkGreen"/>
                       <GradientStop Offset="0.6" Color="Chartreuse"/>
                       <GradientStop Offset="0.8" Color="Yellow"/>
                       <GradientStop Offset="1" Color="Red"/>
                   </LinearGradientBrush>
               </s:FastHeatMapRenderableSeries.ColorMap>
           </s:FastHeatMapRenderableSeries>

       </s:SciChartSurface.RenderableSeries> .
    </s:SciChartSurface>

and code

    double[,] a = x.Normalized2DArray(100);
                    Heatmap2DArrayDataSeries<double, double, double> heatmap = new Heatmap2DArrayDataSeries<double, double, double>(a, ix => (double)ix * x.binSizeX, iy => (double)iy * x.binSizeY);
                      heatmapSeries.DataSeries = heatmap;
          sciChart.ExportToFile(@"C:\Temp\chart.xps", ExportType.Xps, true, new Size(2000, 2000));

The X axis was set to two axes as follows.

        <s:SciChartSurface.XAxes>
            <s:NumericAxis DrawMajorBands="True"
                           FlipCoordinates="True"
                           GrowBy="0.1, 0.1"
                           Id="Time1" />
            <s:NumericAxis DrawMajorBands="True"
                           FlipCoordinates="True"
                           GrowBy="0.1, 0.1"
                           Id="Time2" />
        </s:SciChartSurface.XAxes>

We wanted to make it selectable with DataPointSelectionModifier for two axes, so we set as follows.

        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:DataPointSelectionModifier Name="PointMarkersSelectionModifier"
                                              IncludeSeries="False"
                                              IsEnabled="True"
                                              SelectionFill="#B1B5B2B2"
                                              SelectionStroke="#009E9C9C"
                                              XAxisId="Time1" />
                <s:DataPointSelectionModifier Name="PointMarkersSelectionModifier2"
                                              IncludeSeries="False"
                                              IsEnabled="True"
                                              SelectionFill="#B1B5B2B2"
                                              SelectionStroke="#009E9C9C"
                                              XAxisId="Time2" />
                <s:MouseWheelZoomModifier IsEnabled="True" />
                <s:RubberBandXyZoomModifier IsEnabled="False" />
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>

However, only XAxisId = “Time 1” works correctly.

How can we make two axes selectable?