Questions

I have a ViewPager which switches between Fragments that have a SciChartSurface in their layout. I have two problems with this.

1. When swiping the ViewPager the SciChartSurface shows a black bar on its side (see attached image).

2. When swiping I cannot achieve 60 fps on my device. Upon inspecting systrace I see scheduling delay for each frame. Upon inspecting Android profiler’s flame chart I see that SurfaceView calls android.os.BinderProxy.transact() which takes most of the time. If I change the layout of the Fragments used in ViewPager to a normal View, then android.os.MessageQueue.nativePollOnce() takes about 80% of the time, which means most of the time the CPU is idling because drawing takes up so little time.

My question is how can I solve both problems. Have I configured the SciChartSurface wrongly to get the black bars. Can I do anything to speed up changing tabs in ViewPager with SciChartSurfaces in the Fragments?

Edit 14. 1. 2019

I have attached a sample project to reproduce the problem.

Hi,

I have 3 separate line series and 1 column bar series. Whenever I switch between activities, Column bar data and range persist but not for the line series.

Whenever I return back from activityB to ActivityA it never calls restoreInstanceState. How can I persist the states of these graph?

Snap short attached for reference.

—–code,

initChartUI() {

    SciChartBuilder.init(mContext)
    sciChartBuilder = SciChartBuilder.instance()

    xyIapDataSeries =
            sciChartBuilder.newXyDataSeries(Date::class.javaObjectType, Short::class.javaObjectType)
                .withSeriesName(getString(R.string.label_iap)).build()

    xyTempDataSeries =
            sciChartBuilder.newXyDataSeries(Date::class.javaObjectType, Short::class.javaObjectType)
                .withSeriesName(getString(R.string.label_temperature)).build()

    xyUoDataSeries =
            sciChartBuilder.newXyDataSeries(Date::class.javaObjectType, Short::class.javaObjectType)
                .withSeriesName(getString(R.string.label_uo)).build()

    xyRrDataSeries =
            sciChartBuilder.newXyDataSeries(Date::class.javaObjectType, Short::class.javaObjectType)
                .withSeriesName(getString(R.string.label_respiratory_rate)).build()

    initChartIap(iap_chart)
    initChartUo(uo_chart)
    initChartTemp(temperature_chart)
    initChartRR(resp_rate_chart)

}

private fun initChartIap(surface: SciChartSurface) {
val xAxis = sciChartBuilder.newCategoryDateAxis()
.withBarTimeFrame(SECONDS_IN_FIVE_MINUTES.toDouble())
.withDrawMinorGridLines(false)
.withGrowBy(0.0, 0.5)
.build()
val yAxis = sciChartBuilder.newNumericAxis().withAutoRangeMode(AutoRange.Always).build()

    val line = sciChartBuilder.newLineSeries().withStrokeStyle(R.color.accuryn_blue, STROKE_THICKNESS)
        .withDataSeries(xyIapDataSeries).build()

    // Create a Stroke Pen and assign it
    val strokePen = SolidPenStyle(resources.getColor(R.color.accuryn_blue, null), true, 2f, null)
    line.strokeStyle = strokePen

    UpdateSuspender.using(surface) {
        Collections.addAll(surface.xAxes, xAxis)
        Collections.addAll(surface.yAxes, yAxis)
        Collections.addAll<BaseRenderableSeries>(surface.renderableSeries, line)
        Collections.addAll<AxisMarkerAnnotation>(surface.annotations, iapAxisMarker)
        Collections.addAll(
            surface.chartModifiers, sciChartBuilder.newModifierGroup()
                .withXAxisDragModifier().build()
                .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
                .withPinchZoomModifier().build()
                .build()
        )
    }

……
rest 3 other types….
…..
override fun onSaveInstanceState(outState: Bundle) {

    outState.run {
        putInt("count", xyIapDataSeries.count)
        putInt("uoCount", xyUoDataSeries.count)
        putInt("tempCount", xyTempDataSeries.count)
        putInt("rrCount", xyRrDataSeries.count)

        val iapRange = iap_chart.xAxes[0].visibleRange
        val uoRange = uo_chart.xAxes[0].visibleRange
        val tempRange = temperature_chart.xAxes[0].visibleRange
        val rrRange = resp_rate_chart.xAxes[0].visibleRange

        putDouble("rangeIapMin", iapRange.getMinAsDouble())
        putDouble("rangeIapMax", iapRange.getMaxAsDouble())
        putDouble("rangeUoMin", uoRange.getMinAsDouble())
        putDouble("rangeUoMax", uoRange.getMaxAsDouble())
        putDouble("rangeTempMin", tempRange.getMinAsDouble())
        putDouble("rangeTempMax", tempRange.getMaxAsDouble())
        putDouble("rangeRrMin", rrRange.getMinAsDouble())
        putDouble("rangeRrMax", rrRange.getMaxAsDouble())
    }
    super.onSaveInstanceState(outState)
}

override fun onPostCreate(savedInstanceState: Bundle?) {
super.onPostCreate(savedInstanceState)

    updateIapData(savedInstanceState)
    updateUoData(savedInstanceState)
    updateTempData(savedInstanceState)
    updateRRData(savedInstanceState)
}

override fun onRestoreInstanceState(savedInstanceState: Bundle?) {
    super.onRestoreInstanceState(savedInstanceState)
     updateIapData(savedInstanceState)
    updateUoData(savedInstanceState)
    updateTempData(savedInstanceState)
    updateRRData(savedInstanceState)
}

private fun updateIapData(savedInstanceState: Bundle?) {
UpdateSuspender.using(iap_chart) {
var count = DEFAULT_POINT_COUNT
if (savedInstanceState != null) {
count = savedInstanceState.getInt(“count”)

            val rangeMin = savedInstanceState.getDouble("rangeIapMin")
            val rangeMax = savedInstanceState.getDouble("rangeIapMax")

            iap_chart.xAxes[0].visibleRange.setMinMaxDouble(rangeMin, rangeMax)
        }

        val iap = mutableListOf<Short>()
        val date = mutableListOf<Date>()
        for (entry in mSimplifiedDataList) {
            if (entry.emr.iap > 0) {
                iap.add(entry.emr.iap)
                date.add(Date(DateTimeUtils.toEpochMilli(entry.getRtcTimeStamp())))
            } else {
                iap.add(0)
                date.add(Date(DateTimeUtils.toEpochMilli(entry.getRtcTimeStamp())))
            }
        }
        tv_iap_input_data.text = iap[iap.size.minus(1)].toString()
        xyIapDataSeries.append(date, iap)
    }
}

……rest other for updating data over UI.

I have graphs on two adjacent fragments, and when I select one, then swap to the other, the legend draws like this.
I believe it is because I am setting up & drawing the graph when it is off screen. As when you are viewing a fragment it loads the ones to either side for smooth operation, but is there any way to fix this? Maybe I’m doing something wrong and that’s why I’m getting the weird check boxes.

To be clear, these are all checked, but they look weird to our end-users

I have stock charts and want to prevent the user to go beyond the Min/Max datetimes (left, right). I tried applying setVisibleRangeLimitMode() to XAxis but it has no effect:

private final DoubleRange sharedXRange = new DoubleRange();

//sharedXRange.setMinMax(0d, response.body().getData().size()-1d); // not helping
...
final CategoryDateAxis xAxis = sciChartBuilder.newCategoryDateAxis()
        .withVisibility(isMainPane ? View.VISIBLE : View.GONE)
        .withVisibleRange(sharedXRange)
        .withGrowBy(0.1d, 0.1d)
        .build();

xAxis.setMinimalZoomConstrain(10d); // minimum 10 points
xAxis.setVisibleRangeLimitMode(RangeClipMode.MinMax); // not working
//xAxis.setVisibleRangeLimit(new DoubleRange(-5d,5d));
...

I am thinking that maybe I should set Min and Max to sharedXRange, but couldn’t find in the docs what value to put into (tried with index, and Date without luck).

I am using Android charts and would like to know more about how to customize the YAxis. In the tutorials, there is ussualy something like

builder.newNumericAxis()
.withMinorsPerMajor(4)
.withMaxAutoTicks(8)
.withGrowBy(new DoubleRange(0.1, 0.1))
.build();

In the documentation, I can’t find any explanation for withGrowBy(). What is it used for and are there any examples? What does it mean to have DoubleRange(0.1, 0.1) or DoubleRange(0.01, 0.01)?

hi everyone
when i use utf8 string such as ‘محور’ = axis in persian sciChart lookLike this .
i tried different fonts but did not work .

 SciChartBuilder.init(this@Main2Activity)

    // Obtain the SciChartBuilder instance
    val sciChartBuilder = SciChartBuilder.instance()

    val myCustomFont: Typeface? = ResourcesCompat.getFont(this, R.font.maryam)
    val fontStyle = FontStyle(myCustomFont, 50f, Color.RED)

    val s = String("محور".toByteArray(Charsets.UTF_8))

    xAxis = sciChartBuilder.newNumericAxis().withAxisTitleStyle(fontStyle).withAxisTitle(s).withGrowBy(DoubleRange(0.1, 0.1)).build()
    yAxis = sciChartBuilder.newNumericAxis().withAxisTitle("this is y").withGrowBy(DoubleRange(0.1, 0.1)).build()

    val dataSeries = XyDataSeries(Double::class.javaObjectType, Double::class.javaObjectType)
    dataSeries.append(arrayOf(0.0, 2.0, 4.0, 6.0, 8.0, 10.0), arrayOf(1.0, 5.0, -5.0, -10.0, 10.0, 3.0))

    rs = sciChartBuilder.newColumnSeries()
            .withDataSeries(dataSeries)
            .withStrokeStyle(ColorUtil.White, 3f, false)
            .build()

    surface.chartModifiers.add(sciChartBuilder.newModifierGroupWithDefaultModifiers().build())

    UpdateSuspender.using(surface) {
        Collections.addAll<IAxis>(surface.xAxes, xAxis)
        Collections.addAll<IAxis>(surface.yAxes, yAxis)
        Collections.addAll<FastColumnRenderableSeries>(surface.renderableSeries, rs)

    }

and the result :

result image

I have created a SciChartSurface with a ColumnSeries. I update the series data every second with new values. I have turned on GPU profiling in Android developer options. After running the application I get the image shown in the attachment “SciChart_noCursor”. There are no new columns from the profiler drawn on each update of the chart’s data series. However when I add a VerticalLineAnnonation (which I use as a cursor) I get the image shown in the attachment “SciChart_withCursor”. On every update of the chart’s data series, the SciChartSurface is remeasured and redrawn and a lot of the frames take longer than 16.6 ms to redraw. I have also attached the source code of my example project.

My question is, is there a way to have a cursor line that won’t cause the whole surface to redraw on every update? In my production code I update the chart’s data 5 times per second and I have a much more complex layout. And causing layout measure on SciChartSurface is causing lots of janky frames. The reason I used a vertical line annotation as cursor is because I have have cursor info drawn outside of the SciChartSurface in my own TextView and with the built in cursor I wasn’t able to achieve that.

We’d like to customize the look of our legends. We have 4 legends displaying different data, but right now the only thing we can change is the Theme. Is there any way to customize the legend items, like add some icons, change the point marker shape and size, change the check box icon etc…

P.S.: I’m not a trial user. We have an iOS, Android and WPF licenses purchased.

Project info:
Xamarin.Android
SciChart.Android 2.2.2.854

Version
2.2.2.854

Hi,
Sorry for my understanding but I am trying to achieve a solution where I want to render real time line/bar data on 10ms interval. However, is there a way to cache data max till last 72 hrs and user can drag the chart or Zoom out to check after pausing the graph.

Hello!
There is interesting situation when I’m trying to show volumes on charts in my application. On the first screen you can see that on the left side of the image there is height values of volumes (the data is between 2.000.000 and 5.000.000), on the other side are low (they are between 0 and 100.000 in true values and hardcoded in my sample). It looks like correct because of low vaues, but when i’m scrolling screen to the later data (seconds screenshot), it “jumps” and displays with full-size (on image I’m hardcoded values for 3.000.000, so that’s why they are equals).
When data is hardcoded for 3.000.000 I think it should be closer to the preveous “true” values which are on the left side, but they are not.
It looks like the bottom side of the candles extruding them.
What is the reason of this behaviour? How can I correctly display this data?

Thank you!

I have a question about the scichart performance. I need to display a lot of data on the real time chart and above 2400000 values the chart crops and reacts very slowly. It was tested on Samsung s7. Does scichart handle that much data on devices? Is there any minimum phone performance requirements?

Hi,

Let me explain the structure of attached views. Default view state is https://imgur.com/a/zqAqpXp .

<VerticalViewPager>
    <FirstPagedFragment>
         <TradingViewFragment>
             <WebView />
         </TradingViewFragment>
         <SciChartFragment>
             <com.scichart.charting.visuals.SciChartSurface />
         </SciChartFragment>
    </FirstPagedFragment>
    <SecondPagedFragment> 
           ... 
    </ SecondPagedFragment>
</VerticalViewPager>

When FirstPagedFragment is dragged, SecondPagedFragment becomes displayed. You can see it on https://imgur.com/a/2VqZ1HY

The problem is the chart becomes disappeared when ViewPager is on changing state. Here is another link : https://imgur.com/a/xDO6Xtx

It is happened on [Samsung Galaxy S9, API 26] and [Xiaomi Mi A1, API 25] and I did not update displayMetric of chart.
Is there any configuration to fix this issue? Thanks.

All images are attached.

Hi,

When I did some practices with your example app, I found some features does not work as I expected.
Here is CandlestickChartFragment.java and I wrote additional lines on xAxis builder, yAxis builder and surface.chartModifiers,

public class CandlestickChartFragment extends ExampleBaseFragment {
    @BindView(R.id.chart)
    SciChartSurface surface;

    @Override
    protected int getLayoutId() {
        return R.layout.example_single_chart_fragment;
    }

    @Override
    protected void initExample() {
        PriceSeries priceSeries = DataManager.getInstance().getPriceDataIndu(getActivity());
        int size = priceSeries.size();

        final IAxis xAxis = sciChartBuilder.newCategoryDateAxis()
            .withVisibleRange(size - 30, size)
            .withGrowBy(0, 0.1)
            // Start additional lines
            .withAutoFitMarginalLabels(false)
            .withTextFormatting("yyyy-MM-dd")
            .withCursorTextFormating("MM-dd")
            // End additional lines
            .build();
        final IAxis yAxis = sciChartBuilder.newNumericAxis()
            // Start additional lines
            .withAutoFitMarginalLabels(false)
            .withTextFormatting("$ #.#")
            .withCursorTextFormating("#.#")
            // End additional lines
            .withGrowBy(0d, 0.1d)
            .withAutoRangeMode(AutoRange.Always)
            .build();

        IOhlcDataSeries<Date, Double> dataSeries = new OhlcDataSeries<>(Date.class, Double.class);
        dataSeries.append(priceSeries.getDateData(), priceSeries.getOpenData(), priceSeries.getHighData(), priceSeries.getLowData(), priceSeries.getCloseData());

        final FastCandlestickRenderableSeries rSeries = sciChartBuilder.newCandlestickSeries()
                .withStrokeUp(0xFF00AA00)
                .withFillUpColor(0x8800AA00)
                .withStrokeDown(0xFFFF0000)
                .withFillDownColor(0x88FF0000)
                .withDataSeries(dataSeries)
                .build();

        UpdateSuspender.using(surface, new Runnable() {
            @Override
            public void run() {
                Collections.addAll(surface.getXAxes(), xAxis);
                Collections.addAll(surface.getYAxes(), yAxis);
                Collections.addAll(surface.getRenderableSeries(), rSeries);
                Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers()
                    // Start additional lines
                    .withCursorModifier().withShowAxisLabels(true).withShowTooltip(true).build()
                    // End additional lines
                    .build());

                sciChartBuilder.newAnimator(rSeries).withWaveTransformation().withInterpolator(new DecelerateInterpolator()).withDuration(3000).withStartDelay(350).start();
            }
        });
    }
}

The result is below picture. I also attached the same image.
https://imgur.com/a/5Eqo8Gd
Displayed xAxis values are [27 Sep, 04 Oct, 11 Oct, 18 Oct, 25 Oct, 01 Nov].

The problems are
1. xAxis(CategoryDate) tick values should be started with year, even though it does not have enough margin. It looks updated format is not applied.
2. Cursor should be shown on touch event, but it does not be displayed at all.

I ran above code on [Samsung Galaxy S9, API 26] and [Xiaomi Mi A1, API 25] and same problems are happened.

Could I know what I missed?

Dear Support, I have SciChartSurface in fragment (Xamarin Android). I added Xaxis (DateAxis), Yaxis (NumericAxis), standard modifiers and few XyDataSeries as FastLineRenderableSeries. Everything is working fine (screenshot 1). But something strange is happen when fragment with chart is Paused -> Stopped and then Started -> Resumed. Xaxis and Yaxis are not visible. All dataseries are not visible. But I debugged and all data is there. Even rolloverModifier is still working and correct data values are displayed in labels (screenshot 2). It does not happen every time – it depends on what external intent stopped fragment.

I’ve tried reinitialize chart (clear Xaxis, Yaxis, remove modifiers, remove renderableSeries are reinit all with new variables) and it does not help. Only fragment dettach -> attach helps or screen orientantion change (it reinitializes fragment)

Could you tell me any suggestion what can I check or how to force to redraw whole SciChartSurface? (hiding it and showing it does not help – effect is the same. Only fragment dettach and attach helps (this is my workaround at the moment).

I have some complex data & am showing each dataset as a different colour, but I would like to be able to customise the legends.

I am interested in having 2 legends, one with each data set, showing the colour, and preferably, limited to a set number with the option to scroll, and the other showing that solid lines are the left Y axis, and the dashed lines are the right Y axis.

My question is, is there a way to apply a custom skin to the Legend & is there a way to show dashed lines instead of just a big coloured square in the legend?

Hello, I’m using rollover modifier. By default data label is in first line, and data value is in second line. How can I modify it to have label and value in single line?

Hi,

I am trying to add labels to the x axis but I don’t want the axis line to be visible. numericAxis.drawLabels = true enables the x axis line also. Is there a way to disable it?

Quick example. All charts visible:

Setting Visibility.GONE to RSI chart:

As you can see part of RSI chart is now visible on MACD chart.

Here is my layout. I want to be able to hide any of the charts inside LinearLayout and the remaining charts should equally fill the newly created space. I wasn’t able to recreate the desired behaviour with ConstraintLayout, otherwise I would use it.

<com.scichart.charting.visuals.SciChartSurface
        android:id="@+id/priceChart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.scichart.charting.visuals.SciChartSurface
            android:id="@+id/macdChart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <com.scichart.charting.visuals.SciChartSurface
            android:id="@+id/rsiChart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <com.scichart.charting.visuals.SciChartSurface
            android:id="@+id/volumeChart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>

Hi there,

I’am using your example that name is SyncMultipleChartsFragment.
I want to share pinch zoom modifier all other charts. Your example provides “ModifiersSharedEventsGroup” . When zooming on chart other charts handle this zoom operation. In this case, fingers are just in a chart.
How can I make a finger zoom on 1 chart while the other finger is on a different chart.

Below I’am sharing a video about this problem.
Link of video : https://drive.google.com/file/d/1u42p9-vEQNxPzN56jF3QOjZIVUlOyyXx/view

Thank you very much,
Have a good day,

Hi, I’m using scichart to implement a blood pressure chart. But I have to worry about not being able to implement additional features.

What you want to implement is

Using RolloverModifier and onTouchEvent, we need to draw a vertical bar using the canvas class by getting the coordinates of the first checking point at the end of the scroll and the second checking point at the end of the second

However, onTouch does not match the value given by RolloverModifier Tooltip when using montionvent.getX ().

I have been suffering for over a week because of the problem. Please help me.

Hi,

I am showing multiple chats in multiple pages in a loop viewPager but the license key is not recognised in some pages. This happens with no particular pattern to it. It sometimes disappears when I relaunch the app. Then again if I do the same it reappears.

Hi,

I see there is spline interpolation for WPF https://www.scichart.com/documentation/v5.x/Spline%20Interpolation%20Filters.html is there a timeline for introducing this in the Android platform?

hi,
I am currently trying to implement a chart with a category datetime axis. I custom a label formatter for handling a custom datetime format, let say”yyyy/MM”. Only the 1st tick of each year will display the label.
Eg: data with[“2018/1”,“2018/3”,“2018/5”], only show 2018/1, others show with empty/no label

I find the overrided method of label and cursor label formatter have only returned Comparable object which should be only returned the current rederering datetime axis label’s date.
Is there any way to find the previous one label to compare or any suggestion for implement this axis? Thank you!

Hi,

I am following this https://www.scichart.com/example/android-chart-custom-series-spline-line/ to implement spline for a realtime mountain series but the thing is the render series is shown for an instant and then disappears. And also I am not able to get the areaStyle to work. Please advice.

import android.content.Context
import android.util.DisplayMetrics
import com.scichart.charting.model.dataSeries.IDataSeries
import com.scichart.charting.visuals.pointmarkers.IPointMarker
import com.scichart.charting.visuals.renderableSeries.BaseMountainRenderableSeries
import com.scichart.charting.visuals.renderableSeries.ISeriesDrawingManager
import com.scichart.charting.visuals.renderableSeries.data.ISeriesRenderPassData
import com.scichart.charting.visuals.renderableSeries.data.MountainRenderPassData
import com.scichart.charting.visuals.renderableSeries.hitTest.*
import com.scichart.core.framework.SmartPropertyBoolean
import com.scichart.core.framework.SmartPropertyInteger
import com.scichart.core.model.FloatValues
import com.scichart.core.utility.SciChartDebugLogger
import com.scichart.drawing.common.DrawingContextFactory
import com.scichart.drawing.common.IAssetManager2D
import com.scichart.drawing.common.IRenderContext2D
import com.scichart.drawing.common.LinearGradientBrushStyle
import com.scichart.extensions.builders.PenStyleBuilder.SolidPenStyleBuilder

class BezelMountainSeries(currentRenderPassData: MountainRenderPassData, hitProvider: IHitProvider, nearestPointProvider: INearestPointProvider) :  
BaseMountainRenderableSeries(currentRenderPassData, hitProvider, nearestPointProvider) {

protected val isSplineEnabledProperty = SmartPropertyBoolean(SmartPropertyBoolean.IPropertyChangeListener { oldValue, newValue -> invalidateElement() }, true)

protected val upSampleFactorProperty = SmartPropertyInteger(SmartPropertyInteger.IPropertyChangeListener { oldValue, newValue -> invalidateElement() }, 10)

private val splineXCoords = FloatValues()
private val splineYCoords = FloatValues()

var isSplineEnabled: Boolean
    get() = isSplineEnabledProperty.value
    set(isSplineEnabled) = isSplineEnabledProperty.setStrongValue(isSplineEnabled)

var upSampleFactor: Int
    get() = upSampleFactorProperty.value
    set(upSampleFactor) = upSampleFactorProperty.setStrongValue(upSampleFactor)

init {

    seriesInfoProvider = LerpXySeriesInfoProvider()
}

override fun disposeCachedData() {
    super.disposeCachedData()

    splineXCoords.disposeItems()
    splineYCoords.disposeItems()
}

override fun internalDraw(renderContext: IRenderContext2D, assetManager: IAssetManager2D, renderPassData: ISeriesRenderPassData) {
    // Don't draw transparent series
    val opacity = opacity
    if (opacity == 0f) return

    val strokeStyle = strokeStyle
    if (strokeStyle == null || !strokeStyle.isVisible) return

    val currentRenderPassData = renderPassData as MountainRenderPassData

    computeSplineSeries(splineXCoords, splineYCoords, currentRenderPassData, isSplineEnabled, upSampleFactor)

    val linesStripDrawingContext = DrawingContextFactory.LINES_STRIP_DRAWING_CONTEXT

    val pen = assetManager.createPen(strokeStyle, opacity)

    val digitalLine = currentRenderPassData.isDigitalLine
    val closeGaps = currentRenderPassData.closeGaps

    val drawingManager = services.getService(ISeriesDrawingManager::class.java)
    drawingManager.beginDraw(renderContext, currentRenderPassData)

    drawingManager.iterateLines(linesStripDrawingContext, pen, splineXCoords, splineYCoords, digitalLine, closeGaps)

    drawingManager.endDraw()

    drawPointMarkers(renderContext, assetManager, currentRenderPassData.xCoords, currentRenderPassData.yCoords)
}

/**
 * Cubic Spline interpolation: http://www.codeproject.com/Articles/560163/Csharp-Cubic-Spline-Interpolation
 */
private fun computeSplineSeries(splineXCoords: FloatValues, splineYCoords: FloatValues, currentRenderPassData: MountainRenderPassData, isSplineEnabled: Boolean, upSampleFactor: Int) {
    if (!isSplineEnabled) return

    // Spline enabled
    val size = currentRenderPassData.pointsCount()
    val splineSize = size * 5

    splineXCoords.setSize(splineSize)
    splineYCoords.setSize(splineSize)

    val x = currentRenderPassData.xCoords.itemsArray
    val y = currentRenderPassData.yCoords.itemsArray

    val xs = splineXCoords.itemsArray
    val stepSize = (x[size - 1] - x[0]) / (splineSize - 1)

    // set spline xCo-ordinates
    for (i in 0 until splineSize) {
        xs[i] = x[0] + i * stepSize
    }
    var ys = FloatArray(0)

    try {
        val cubicSpline = CubicSpline()
        ys = cubicSpline.fitAndEval(x, y, size, xs, java.lang.Float.NaN, java.lang.Float.NaN, true)
    } catch (e: Exception) {
        SciChartDebugLogger.instance().handleException(e)
    }

    // copy spline yCo-ordinates
    System.arraycopy(ys, 0, splineYCoords.itemsArray, 0, splineSize)
}

class BezelMountainRenderableSeriesBuilder(context: Context) {
    private val displayMetrics: DisplayMetrics = context.resources.displayMetrics
    private val renderableSeries: BezelMountainSeries = BezelMountainSeries(MountainRenderPassData(), CompositeHitProvider(PointMarkerHitProvider(), MountainHitProvider()), NearestXyPointProvider())

    fun withDataSeries(dataSeries: IDataSeries<*, *>): BezelMountainRenderableSeriesBuilder {
        renderableSeries.dataSeries = dataSeries
        return this
    }

    fun withStrokeStyle(seriesColor: Int, strokeThickness: Float, antiAliasing: Boolean): BezelMountainRenderableSeriesBuilder {
        renderableSeries.strokeStyle = SolidPenStyleBuilder(displayMetrics).withThickness(strokeThickness).withColor(seriesColor).withAntiAliasing(antiAliasing).build()
        return this
    }

    fun withAreaStyle(x0 : Float, y0 : Float, x1 : Float , y1 : Float, startColor : Int , endColor : Int) : BezelMountainRenderableSeriesBuilder {
        renderableSeries.areaStyle = LinearGradientBrushStyle(x0, y0, x1, y1, startColor, endColor)
        return this
    }

    fun withPointMarker(pointMarker: IPointMarker): BezelMountainRenderableSeriesBuilder {
        renderableSeries.pointMarker = pointMarker
        return this
    }

    fun withUpSampleFactor(upSampleFactor: Int): BezelMountainRenderableSeriesBuilder {
        this.renderableSeries.upSampleFactor = upSampleFactor
        return this
    }

    fun withIsSplineEnabled(isSplineEnabled: Boolean): BezelMountainRenderableSeriesBuilder {
        this.renderableSeries.isSplineEnabled = isSplineEnabled
        return this
    }

    fun build(): BezelMountainSeries {
        return renderableSeries
    }
}

}

The CubicSpline and TriDiagonalMatrixF implementation are the same as the example with no alterations.

Hi, I am trying to make a graph using the mountain series and I have allocated some padding to the y axis using the growBy and have the series filled using areaStyle but the issue is the area bellow the padding doesn’t get filled and it looks weird where the graph looks half filled because of the padding. Is there a way to fill the area of the padding using the areaStyle or something similar ignoring the growBy padding.

Hi,

I was following https://www.scichart.com/example/android-chart-custom-series-spline-line/ to implement a custom bezel curve. This works fine for static datasets but when I append values to the datasets they are not getting reflected (i.e has no effect on realtime datasets). Is there something that I am missing?

Hi,

I have a line chart and I want to colour the space bellow the line chart with a colour that is different form the background colour. I am not sure what API does that. Please advice.

Hello,
I want to zoom at graph but without generating new 5×5 cubes in background. Is there a way how to do it?

I would like to show data in a Heatmap chart where xAxis represents time. I would also like to keep adding data in the x direction. I have been told that Heatmap does not support resizing of it’s DataSeries, so I decided to have a Heatmap of fixed size and to resample my data to the Heatmap’s size.

I have managed to resample my data and using a custom LabelProvider for the xAxis I have also managed to show the values on xAxis as dates. I got stuck at trying to animate the chart upon adding new data to the chart. The animation does not work correctly because the xAxis is always the same size since I resample the data and have a fixed size Heatmap.

My question is, how would I achieve what I desire with the available tools. Basically on every update of the zValues of DataSeries I would like to animate the ticks of the xAxis so that it would appear as though the dataSeries got points appended in the x direction.

An example of what I am trying to do.

The amount of data needed to be drawn is too big for SciChart Heatmap implementation so I decided to have a fixed size Heatmap. Lets say a Heatmap with width 100 and height 50. X axis represents time of the measurement. I have an ongoing measurement that produces data. On every measurement update I update the Heatmap. I resize the measurement data to make it 100 points in width and then update Z values on the DataSeries. This effectively appends data in the X direction.

What I would like is to animate the X axis to show that the data is being appended from the right. However, animating X axis’ visible range is not an option, since the Heatmap’s width is always 100. Which only leaves the tick marks themselves that could be animated to reflect what the chart is showing. That is data being appended from the right.

Hope this makes it clearer what I am trying to do 🙂

Thank you for all the help!

I have created a HeatMap with the size of 25000 x 70. The application crashes with the following log:

E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
D/OpenGLRenderer: Use EGL_SWAP_BEHAVIOR_PRESERVED: true
I/OpenGLRenderer: Initialized EGL, version 1.4
W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without…
D/EGL_emulation: eglCreateContext: 0x7faef90b6500: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0x7faef90b6500: ver 2 0 (tinfo 0x7faf0489eec0)
D/EGL_emulation: eglMakeCurrent: 0x7faef90b6500: ver 2 0 (tinfo 0x7faf0489eec0)
D/EGL_emulation: eglCreateContext: 0x7faf04b65680: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0x7faf04b65680: ver 2 0 (tinfo 0x7faf04b7e500)
E/emuglGLESv2_enc: device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glTexImage2D:1908 GL error 0x501 A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0x41a10f90 in tid 2736 (GLThread 973)

Below is Kotlin code from my sample project that produces the error:

private const val WIDTH = 25000
private const val HEIGHT = 70

class MainActivity : AppCompatActivity()
{
    private lateinit var chartBuilder: SciChartBuilder

    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        SciChartSurface.setRuntimeLicenseKey(getString(R.string.sciChart_license))
        SciChartBuilder.init(this)
        chartBuilder = SciChartBuilder.instance()

        setContentView(R.layout.activity_main)
        val background = findViewById<ViewGroup>(R.id.background)

        val chartSurface = createChartSurface()
        background.addView(chartSurface)

        addPoints(chartSurface)
    }

    private fun createChartSurface(): SciChartSurface
    {
        val surface = SciChartSurface(this)

        val xAxis = chartBuilder.newNumericAxis().build()
        val yAxis = chartBuilder.newNumericAxis().build()

        surface.xAxes.add(xAxis)
        surface.yAxes.add(yAxis)

        surface.renderableSeries.add(createSeries(WIDTH, HEIGHT))

        return surface
    }

    private fun createSeries(width: Int, height: Int): FastUniformHeatmapRenderableSeries
    {
        val dataSeries = UniformHeatmapDataSeries(Int::class.javaObjectType, Int::class.javaObjectType, Float::class.javaObjectType, width, height)

        return chartBuilder.newUniformHeatmap()
            .withColorMap(ColorMap(intArrayOf(ColorUtil.DarkBlue, ColorUtil.CornflowerBlue, ColorUtil.DarkGreen, ColorUtil.Chartreuse, ColorUtil.Yellow, ColorUtil.Red), floatArrayOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)))
            .withDataSeries(dataSeries)
            .build()
    }

    private fun addPoints(chartSurface: SciChartSurface)
    {
        @Suppress("UNCHECKED_CAST")
        val dataSeries = chartSurface.renderableSeries.first().dataSeries as UniformHeatmapDataSeries<Int, Int, Float>

        val xRange = 0 until WIDTH

        for (i in 0 until HEIGHT)
        {
            val values = xRange.map { (i + it).toFloat() }
            dataSeries.updateRangeZAt(0, i, values)
        }

        val renderableSeries = chartSurface.renderableSeries.first() as FastUniformHeatmapRenderableSeries
        renderableSeries.minimum = dataSeries.zValues.minimum.toDouble()
        renderableSeries.maximum = dataSeries.zValues.maximum.toDouble()
    }
}

I’m building a custom NumericLabelProvider and need to change the label output based on the data the chart is displaying. We will be using the range of the chart to specify whether decimals display or not. How can I access the chart from my custom NumericLabelProvider?

Hi,
i am trying to create multiple Y Axis in my chart
1. Left side is showing Price Value, i.e. 1200, 1201…
2. Right side is showing the % change relative to certain price, i.e. 1%, 2%…
3. Both side label should be aligned so that 1200 1%, 1201 2% ….

Questions:
1. How to align the value on both Y Axis?
2. I want to assign multiple color to Y Axis, for example, blue for -ve value, red for +ve value, how to do that?

Thank you!

Hi,
I am developing a candle stick chart, with modifier newModifierGroupWithDefaultModifiers
What i want to do is
1. when user click the chart, the modifier will be changed to CursorModifier,
2. xy axis label should not disappeared when user release their finger

How could i do that?

Thank you

Hello,
I’m creating a chart where the x-axis are dates. I want to load more (past) data when a button is clicked or when the visible range satisfies some condition. I have been able to do that using the InsertData function with index = 0 (in order to insert in the beginning of the series), but my problem now is how to keep the position I had before inserting the new data. Right now, after the insertion, the x-axis visible range’s indexes are the same instead of being moved to the right in order to show the same part of the data as before.

I have tried different ways to modify the visible range (by moving the range taking into account the new data size) but none of them have performed well.

I would like to display the same before and after inserting the previous data, so when the user scrolls he can find more data on the left but he is shown the same range of data as before.

I’m using the CategoryDateAxis as x-axis and the NumericAxis as y-axis (you can see the configuration of those axis below). The renderable series is a FastCandlestickRenderableSeries and the data series is an OhlcDataSeries<DateTime, double>.

Btw, I’m using the Xamarin wrapper for Android.

Could you help me with this issue?

Thanks!

var yAxis = new NumericAxis(this.Context)
{
        GrowBy = new DoubleRange(0, 0.1),
        AutoRange = AutoRange.Always
};

var xAxis = new CategoryDateAxis(this.Context)
{
       GrowBy = new DoubleRange(0, 0.1),
       VisibleRange = new DoubleRange(dataCount - InitialCandlesShown, dataCount + RightCandlesMargin),
       VisibleRangeLimit = new DoubleRange(-2.0, dataCount + RightCandlesMargin),
       MinimalZoomConstrain = new Java.Lang.Double(MinimumCandlesShown)
 };

Hi,
I want to customize the style of stick such that
1. Green and hollow stick if it is rising and open higher than close
2. Green and fill stick if it is rising and open lower than close
3. Red and hollow stick if it is falling and open higher than close
4. Red and fill stick if it is falling and open lower than close

How could i achieve that with only one candle series?

This issue repros on Android 4.4 API 19, but not API 27. It happens with the example project (Multi-Pane Stock Charts). The issue is that on certain zoom levels, the x-axis labels are cut off (so instead of displaying 11 Mar, it just displays 11).

I have tried to override TradeChartAxisLabelFormatter with my custom implementation but saw the same issue, so the bug seems to be in the provider or somewhere else.

Please see screenshot: https://imgur.com/a/2RDC2MZ

When using GLTextureView on Android 4.4 API 19, there are a few issues. The same issue does not occur on API 27. Have not tested other API levels. If you do not use GLTextureView, this issue doesn’t happen (but due to theming bugs I have to use GLTextureView and not the other 2 types of render surfaces).

1. If activity A has a SciChartSurface and activity B has a SciChartSurface and appears above activity A, then the surface in A dissapears (Shows blank) when you return to it. 100% repro for me. Let me know if you need more info.

2. Due to 1? If you try to re-render the chart on activity A, it will lead to an ANR (app freezes indefinitely) after a few times (see below)

3. Even if you don’t have activity B and only activity A, if you interact with it a few times and show/hide it, it will lead to an ANR (app freezes indefinitely) as well (see below):

ANR log (it freezes the app until you kill it):

09-03 13:01:40.583 1690-1705/system_process E/ActivityManager: ANR in co..stocks (co..stocks/.ui.screens.home.MainActivity)
PID: 12076
Reason: Input dispatching timed out (Waiting because the touched window has not finished processing the input events that were previously delivered to it.)
Load: 0.64 / 0.49 / 0.39
CPU usage from 6217ms to 779ms ago: