Category: Android

In financial markets, there is a type of chart that is as follows.

I did not find this type of chart in SciChart.

Please help me how to draw this chart

ECG monitor example

Hi there!

I wonder if SciChart has support (for Android & iOS) for the following chart types (see attached example chart images):

• Timeline chart (where events are mapped onto a linear timeline)

• “Equation” chart (which shows an ellipsis, based on a mathematical equation)

• Polar chart (as line, column and stacked bars)

If yes, how do I implement these chart types!?

Thanks in advance!

/Jacob

Hi
I have a fifo scrolling chart
When I set the axis visibleRangeListener, the chart performance goes down and it gets an exception.
what is the solution?

It seems most of the modifiers bring up tooltip data with a pan, and then it goes away when the user lifts their finger. Is there any way to bring up tooltip data with a tap (and does not go away when the finger has lifted)? The main problem that we’re trying to solve is that we would like to be able to pan to look at the chart (and don’t want an axis pan), but would also like to bring up tooltip data.

Hi,

I would like to display all the hours of the day in X axis e.g 01 to 24 and I haven’t been able to achieve it yet, I tried use date delta but I couldn’t figure out how it really works, could you please share a code snippet or some example.

Thanks

Hello,
is it possible to modify the corner radius of tooltips in SciChart Android?

I am using stepped yaxis graph – ECG example from your demo set. How do i control the speed of the live graph.
I want to makethe live graph a bit slow. Is there any setting or configuration to be modified to slow the graph. please let us know

Regards,
Aditya

Hi Guys,

I am implementing the column chart, but the xAxis value is duplicate when I scroll the chart. Please see the images attachment.

Here are the piece of code, and wandering what cause this, thx!

package com.refinitiv.android.presentation.view.chart.stack

import android.content.Context
import android.util.AttributeSet
import android.view.Gravity
import android.widget.FrameLayout
import androidx.core.content.ContextCompat
import androidx.core.content.res.ResourcesCompat

import com.scichart.charting.ClipMode
import com.scichart.charting.Direction2D
import com.scichart.charting.model.ChartModifierCollection
import com.scichart.charting.model.dataSeries.IXyDataSeries
import com.scichart.charting.modifiers.AxisDragModifierBase
import com.scichart.charting.modifiers.XAxisDragModifier
import com.scichart.charting.modifiers.ZoomPanModifier
import com.scichart.charting.numerics.labelProviders.NumericLabelFormatter
import com.scichart.charting.numerics.labelProviders.NumericLabelProvider
import com.scichart.charting.numerics.tickProviders.NumericTickProvider
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.axes.AutoRange
import com.scichart.charting.visuals.axes.AxisTickLabelStyle
import com.scichart.charting.visuals.axes.IAxis
import com.scichart.charting.visuals.renderableSeries.IRenderableSeries
import com.scichart.charting.visuals.renderableSeries.StackedColumnRenderableSeries
import com.scichart.charting.visuals.renderableSeries.VerticallyStackedColumnsCollection
import com.scichart.core.framework.UpdateSuspender
import com.scichart.core.model.DoubleValues
import com.scichart.core.model.IntegerValues
import com.scichart.data.model.DoubleRange
import com.scichart.drawing.canvas.RenderSurface
import com.scichart.drawing.common.FontStyle
import com.scichart.drawing.common.PenStyle
import com.scichart.drawing.common.SolidPenStyle
import com.scichart.extensions.builders.SciChartBuilder
import timber.log.Timber
import java.util.*
import kotlin.math.roundToInt

private const val GROW_BY: Double = 0.0

private const val MAX_VISIBLE_COLUMNS = 11
private const val MIN_VISIBLE = -0.5

class StackColumnChartView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet?,
defStyleAttr: Int = 0,
defStyleRes: Int = 0
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {

private val chart = SciChartSurface(context)


private val typefaceSemibold =
    ResourcesCompat.getFont(context, R.font.proxima_nova_fin_semibold)

private val tickFontStyle = FontStyle(
    typefaceSemibold,
    resources.getDimension(R.dimen.chart_axis_text_size),
    getColorFromAttrOrDefault(R.attr.chartAxisTextColor, R.color.dove_grey),
    true
)

private val majorGridLineAndTickStyle: PenStyle = SolidPenStyle(
    getColorFromAttrOrDefault(R.attr.cardViewItemDividerBackground, R.color.desert_storm_50),
    true,
    resources.getDimension(R.dimen.chart_grid_line_thickness),
    null
)

var xAxisLabelList = emptyList<String>()
var yAxisLabelList = mutableListOf("0%", "20%", "40%", "60%", "80%", "100%")
var dataList: List<List<Double>> = emptyList()
private lateinit var xAxisData: List<Double>

init {
    chart.renderSurface = RenderSurface(context)
    val params = LayoutParams(
        LayoutParams.MATCH_PARENT,
        LayoutParams.MATCH_PARENT
    )
    chart.layoutParams = params

    addView(chart)
    chart.theme = R.style.SciChart
}

fun buildChart() {
    Timber.tag("CHART").d("CURVE CHART View build chart")
    SciChartBuilder.init(context)
    val sciChartBuilder: SciChartBuilder = SciChartBuilder.instance()
    xAxisData = xAxisLabelList.mapIndexed { index, _ ->
        index.toDouble()
    }
    val xAxis = initXAxis(sciChartBuilder)
    val yAxis = initYAxis(sciChartBuilder)
    val dataSeries = initDataSeries(context, sciChartBuilder)

    val surfaceChartModifiers: ChartModifierCollection = chart.chartModifiers
    val zoomPanModifier = ZoomPanModifier()
    zoomPanModifier.direction = Direction2D.XDirection
    zoomPanModifier.clipModeX = ClipMode.ClipAtExtents
    zoomPanModifier.clipModeY = ClipMode.None
    zoomPanModifier.zoomExtentsY = false

    val dragModifier = XAxisDragModifier()
    dragModifier.dragMode = AxisDragModifierBase.AxisDragMode.Pan
    surfaceChartModifiers.add(dragModifier)

    UpdateSuspender.using(chart) {
        chart.xAxes.clear()
        chart.yAxes.clear()
        chart.annotations.clear()
        chart.renderableSeries.clear()

        Collections.addAll(chart.xAxes, xAxis)
        Collections.addAll(chart.yAxes, yAxis)
        Collections.addAll(chart.renderableSeries, dataSeries)

        Collections.addAll(chart.chartModifiers, zoomPanModifier)
        Collections.addAll(chart.chartModifiers, dragModifier)
    }
}

fun clearChart() {
    UpdateSuspender.using(chart) {
        chart.xAxes.clear()
        chart.yAxes.clear()
        chart.annotations.clear()
        chart.renderableSeries.clear()
    }
}

private fun initDataSeries(
    context: Context, sciChartBuilder: SciChartBuilder
): IRenderableSeries {

    val verticalCollection = VerticallyStackedColumnsCollection()

    val seriesList = dataList.mapIndexed { _, xValue ->
        val series: IXyDataSeries<Double, Double> = sciChartBuilder.newXyDataSeries(
            Double::class.javaObjectType,
            Double::class.javaObjectType
        ).build()
        for (i in xAxisData.indices) {
            series.append(xAxisData[i], xValue[i])
        }
        series
    }


    val result = seriesList.mapIndexed { index, series ->
        val color: Int = if (index < colorList.size) {
            ContextCompat.getColor(context, colorList[index])
        } else {
            ContextCompat.getColor(context, colorList[index % colorList.size])
        }
        val stack: StackedColumnRenderableSeries =
            sciChartBuilder.newStackedColumn().withDataSeries(series).withFillColor(color)
                .withStrokeStyle(
                    ContextCompat.getColor(
                        context, R.color.chatline_white
                    ), 0.2F
                )
                .build()
        stack
    }

    verticalCollection.addAll(result)
    verticalCollection.dataPointWidth = 0.4
    verticalCollection.isOneHundredPercent = true
    return verticalCollection
}

private fun initXAxis(
    sciChartBuilder: SciChartBuilder
): IAxis {

    val horizontalAxisTickLabelStyle = AxisTickLabelStyle(
        Gravity.CENTER_VERTICAL,
        0,
        context.resources.getDimensionPixelSize(R.dimen.pe_firm_investment_profile_chat_view_label_margin_vertical),
        0,
        0,
    )
    val visibleMin = if (xAxisLabelList.size > MAX_VISIBLE_COLUMNS) {
        (xAxisLabelList.size - MAX_VISIBLE_COLUMNS).toDouble()
    } else {
        MIN_VISIBLE
    }
    val xVisibleRange = DoubleRange(visibleMin, (xAxisLabelList.size + MIN_VISIBLE))
    return sciChartBuilder
        .newNumericAxis()
        .build()
        .apply {
            axisTickLabelStyle = horizontalAxisTickLabelStyle
            tickLabelStyle = tickFontStyle
            drawMinorGridLines = false
            drawMinorTicks = false
            drawMajorTicks = false
            drawMajorBands = false
            drawMajorGridLines = false
            autoFitMarginalLabels = true
            visibleRange = xVisibleRange

// tickProvider = XTickProvider(xAxisData)
labelProvider =
NumericLabelProvider(FirmProfileDateAxisLabelFormatter(xAxisLabelList))
growBy = DoubleRange(GROW_BY, GROW_BY)
maxAutoTicks = xAxisLabelList.size
}
}

private fun initYAxis(
    sciChartBuilder: SciChartBuilder
): IAxis {
    val verticalAxisTickLabelStyle = AxisTickLabelStyle(
        Gravity.CENTER_HORIZONTAL,
        0,
        0,
        0,
        0
    )

    return sciChartBuilder
        .newNumericAxis()
        .build()
        .apply {
            axisTickLabelStyle = verticalAxisTickLabelStyle
            drawMajorGridLines = true
            minimalZoomConstrain = 0.0
            tickLabelStyle = tickFontStyle
            majorTickLineStyle = majorGridLineAndTickStyle
            majorGridLineStyle = majorGridLineAndTickStyle
            labelProvider = FirmProfileYAxisLabelProvider(yAxisLabelList)
            autoRange = AutoRange.Always
            maxAutoTicks = yAxisLabelList.size
            growBy = DoubleRange(GROW_BY, GROW_BY)
        }
}

fun dispose() {
    SciChartBuilder.dispose()
}

class XTickProvider(private val xAxisData: List<Double>) : NumericTickProvider() {
    override fun updateCullingPriorities(
        cullingPriorities: IntegerValues?,
        majorTicks: DoubleValues?
    ) {
        super.updateCullingPriorities(cullingPriorities, majorTicks)
    }
    override fun updateTicks(minorTicks: DoubleValues?, majorTicks: DoubleValues?) {

// super.updateTicks(minorTicks, majorTicks)
xAxisData.forEach {
majorTicks?.add(it)
}
}

    override fun getMajorTickIndex(tick: Double): Int {
        Timber.tag("StackColumn").v("getMajorTickIndex-:${tick}")
        return super.getMajorTickIndex(tick)
    }

    override fun shouldUpdateTicks(): Boolean {
       val should = super.shouldUpdateTicks()
        Timber.tag("StackColumn").v("shouldUpdateTicks-:${should}")
        return should
    }

    override fun isFirstMajorTickEven(majorTicks: DoubleValues?): Boolean {
        return super.isFirstMajorTickEven(majorTicks)
    }
}

class FirmProfileDateAxisLabelFormatter(private val labelTitles: List<String>) :
    NumericLabelFormatter() {

    private var lastFormatLabel = ""

    override fun formatLabel(p0: Double): CharSequence {
        Timber.tag("StackColumn").v("formatLabel-:${p0}")
        if (labelTitles[p0.toInt()] == lastFormatLabel) {
            return ""
        }
        return labelTitles[p0.toInt()]
    }

    override fun formatCursorLabel(p0: Double): CharSequence {

        return formatLabel(p0)
    }

}

class FirmProfileYAxisLabelProvider(private val labelList: List<String>) :
    NumericLabelProvider() {
    var index = 0
    override fun formatLabel(p0: Double): CharSequence {
        if (labelList.isEmpty()) {
            return ""
        }
        val title = labelList[index]
        index += 1
        index = if (index < labelList.size) {
            index
        } else {
            0
        }
        return title
    }

    override fun formatCursorLabel(p0: Double): CharSequence {
        return formatLabel(p0)
    }
}

companion object {
    val colorList = mutableListOf(
        R.color.chatline_blue_ribbon,
        R.color.chatline_black,
        R.color.chatline_teal,
        R.color.chatline_butterfly,
        R.color.chatline_olive,
        R.color.chatline_grenadier,
        R.color.chatline_rain_forest,
        R.color.chatline_cerise_red,
        R.color.chatline_scorpion,
        R.color.chatline_jelly_bean,
        R.color.chatline_genoa,
        R.color.chatline_brown_rust,
        R.color.chatline_torea_bay,
        R.color.chatline_saddle_brown,
        R.color.chatline_victoria,
        R.color.chatline_sherpa_blue,
        R.color.chatline_oregon,
        R.color.chatline_kaitoke_green,
        R.color.chatline_maroon_flush,
        R.color.chatline_tundora,
        R.color.chatline_chathams_blue,
        R.color.chatline_eden,
        R.color.chatline_mule_fawn,
    )
}

}

Hello, I was using version 4.2 before but I updated to version 4.4 last week. I am using candlestick chart in my project and show the chart in various time frames. These time periods include 1 day, 1 hour, 15 minutes, 1 minute and so on. Before the update to v4.4, when 1 time zone was selected, the example would show 09:00, 10:00, and on the 5 minute graph it would show as 09:00, 09:05, 09:10. After updating, it shows 09:00 instead of 09:05 when 5 minutes is selected, and 09:00 instead of 09:19 when 1 minute is selected. I want the date data that I added to the chart to be displayed as it is. I am also attaching screenshots for better understanding.
How can I fix this error I got? There is no problem with the data I have shown in the chart, it sounds as I want, but when I transfer it to the chart, it does not show as I want.

Good morning,

I would like to ask you about the solution contained in the title. Is it possible to create realtime charts (for example 7-10) in a list (RecyclerView)? I have studied your example but there were none with a list.

The fragment in the example called createMultiPaneStockChartsFragment contains 4 charts. But unfortunately, it is not a list.
I made a simple activity with 5 charts in a RecyclerView, but charts are stucking a bit.
I do not call notify methods. There is only update LineData method:

oneChartClass.getLineData().append(oneChartClass.getLineData().getCount(), trendPoint.getValue());

Thanking you in advance…
Hubert

Hi,

Our current chart setup is as follows: 2 charts, each with 2 line series (~23k data points per line series – datetime [x-axis], double[y-axis]), data is added to the line series in real-time and all data is retained (never deleted). Both charts share a motion events group (pinchzoom, rollover, xaxisdrag, zoomextents).

If you zoom in to the furthest zoom possible, the chart/app starts to act extremely sluggish, then crashes eventually. – see attached txt file for logs.

Questions:

1. Is there a method to tackle this from a performance perspective and still enable zooming to the utmost limit?
2. If 1.) is not possible, is it possible to enact a zoom limit on the charts?

Other solution suggestions are welcome.

I have a strange padding in the end of the chart. I set drawLabels false and added annotations to it. And added makerPoint for the last point. So everything is clipped by this padding.

You can see this on the screenshot in the attachment

I want to format my labels after tapping a radio button. But the major labels with the “dd mm” pattern and the minor labels with the “HH:mm” pattern. If I check the radio button in the radio button group the labels will format with the others formats. It works with TradeChartAxisLabelProvider but I can’t handle it with my own formats. What I have to use?

Hello,

I am currently working on an DateTimeAxis where I am trying to display the labels in two hours intervals. So far it is working well but I have noticed when working with different timezones , if the timezone is odd, the labels display only odd numbers. When the timezone is even however the labels are even as well (eg. get-4 displays labels such as 2pm 4pm 6pm 8pm while gmt-7 displays 1pm 3pm 5pm 7pm)
I have played around with hours and dates to try to dynamically adjust the min and max visible ranges depending on if the current time is even or odd but that doesn’t affect at all the labels even after providing the major deltas and range.

does anyone know how to fix this issue? I want even labels regardless of the situation.

What is the best way to form List with my formatted dates in the View Model and just put in my implementation of CategoryLabelProviderBase?

Can an AxisBase implementation help me in this case?

I have a chart and a radio button group. When I click a button an app will load new data. And it works ok. But sometimes my chart doesn’t scroll to start when data is changed. I changed visibleRange for it. It can be fixed with postDelayed method but is there any good way to fix it?

My code:

enter link description here

I get an error when I scroll my chart. I didn’t change my code. It worked yesterday and it doesn’t today. I just started getting:

VisibleRange was restored to its last valid value. The range class com.scichart.data.model.DoubleRange (Min = 0.0, Max = 307.0) either is not valid or it doesn’t satisfy MinimalZoomConstrain or MaximumZoomConstrain. To provide fallback value please override AxisCore#coerceVisibleRange(IRange) method

I tried to make my MinimalZoomConstrain to zero and MaximumZoomConstrain to maximum. But it didn’t help me. I tried override coerceVisibleRange but I don’t kwon how

My code when chart points received in attachment

I want to make my labels positions in the centre of axis (y axis which is transparent). Only three labels have to be showed. On the same height with the min, max and actual points. How can I achieve this.

I looked at this answer for WPF.

https://stackoverflow.com/questions/10231627/convert-pixels-to-cm-in-wpf

Is there a similar option to get the dimensions in mm on Android?

Hello
My question is, if I buy a program license, where should I put the license ? If I statically place it in the application class, it can be easily accessed by decompiling the apk file and it can be stolen by others.

Hello Friends ,

   Sync two Chart in Android Bottom chart can be change on top chart touch

We are looking a solution where we want show two chart at Top and Bottom in Android Screen.based on Top chart changed by gesture /finger touch should be expend/shrink like zoom in and out bottom chart

Assume at top chart data range has between 0 to 3,00,000 , I want to capture in bottom chart only selected/touched part in with expanded form.

I have attached below screen shot which may be helpful.

Solution can be like this but not able to get code for this implementation

https://blog.scichart.com/content/images/2021/06/Navigate-ECG-strip-with-Pocket-ECM.gif

https://blog.scichart.com/android-app-to-view-long-term-ecg-signals/

I appreciate any help regarding this issue.

Real Time EEG LiVE chart of 24 channels, jumps two x minor gridlines at a time . How to make it to move one gridline at a time ?

Is there any setting for that ?

Now we have 24 channels added to one graph which is visible in one page or one screen of the mobile. Can we make it two pages or add a scroll bar and devide the channels into 12 each without two different scichart components

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()
    }
}