Category: Android

I have a screen with multiple chart surfaces stacked on top of each other within a ScrollView. I can’t use a single chart surface because each of the charts is combined with other types of views to display extra information about the data in the charts.

I have a few issues I’m trying to solve:

1. Each of the charts uses the same x-axis range. When a user pinches to zoom or drags to pan on a chart, I want all the charts to be synchronized to zoom and pan at the same time. How can I do this?

2. Because the charts are embedded in a ScrollView, when I use the following modifiers it is very difficult to smoothly zoom and pan without the ScrollView being activated to scroll up and down. How can I make it so that the ScrollView is deactivated from moving while the user is attempting to zoom or pan a chart

surface.chartModifiers.add(
XAxisDragModifier().apply {
dragMode = AxisDragModifierBase.AxisDragMode.Pan
minTouchArea = 1000.0f
}
)
surface.chartModifiers.add(
PinchZoomModifier().apply {
direction = Direction2D.XDirection
}
)

Hello! I am try to create chart with axis on top in my react native app, chart is create succesfuly, but when I start add annotation – it shift to top by axis height – whats may be wrong?

`

// create
surface = new CSciChartSurface(context);
surface.setRenderSurface(new RenderSurface(context));

// Initialize the SciChartBuilder
SciChartBuilder.init(context);

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

 xAxis = sciChartBuilder
      .newCategoryDateAxis()
      .withTextFormatting(DateChartFormatter.defaultDateFormat)
      .withGrowBy(0.0d, 0.04d)
      .withDrawMajorGridLines(true)
      .withDrawMinorGridLines(false)
      .withDrawMajorBands(false)
      .withDrawMajorTicks(false)
      .withAxisAlignment(AxisAlignment.Top)
      .build();
// same yaxis and any

VerticalLineAnnotation verticalLine = sciChartBuilder.newVerticalLineAnnotation()
        .withPosition(10, 16)
        .withStroke(2, ColorUtil.Orange)
        .withIsEditable(true)
        .build();

Collections.addAll(surface.getYAxes(), yAxis);
Collections.addAll(surface.getXAxes(), xAxis);
Collections.addAll(surface.getRenderableSeries(), lineRenderableSeries);
Collections.addAll(surface.getAnnotations(), verticalLine);

// add to view
this.addView(surface);

`

I need to show cursor on chart on button click.
Same like finance chart api.

Hi,

I am trying to implement an improvement for my app where the chart is hidden if the licence key is invalid. But I can’t find how to do that. If I enter an invalid key like shown in examples, the code never ends up in the catch clause. Is there any other way? Or is this a bug?

try {
    SciChartSurface.setRuntimeLicenseKey(getString(R.string.sci_chart_runtime_licence_key));
} catch (Exception e) {
    Elog.e("SciChart Error when setting the license", e);
}

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

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 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

Hi Team,

When we except this feature

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.

Hello, I was using version 4.2 before, but today I updated to version 4.4. I was using the updateCurrentPoint function in the CustomRolloverModifier in my project, but this function has changed in version 4.3. How can I use the updateCurrentPoint function in version 4.4?

Hello, I am a new developer who continues to develop scichart. In the currentPoint (or its name may be different) created after clicking in the developed application, the changes made on the graphic (changing the data, changing the graphic type, zooming in or out of the graphic, etc.), leaving these points where they are, breaks the graphic. In these cases, I need to either remove the point or make it move with the graph. how can I do that? I am developing with java. I uploaded the problem I encountered as a gif, you can understand it more clearly when you watch it.

Hi. For example, I set yAxis VisibleRange(-100, 100), but I need to see only 3 gridlines: -100, 0 and 100. I cannot find how to remove other gridlines.

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.

We are working on an android based ELD application. We are looking for a ELD graph. Is it possible to accomplish this using SCICHART?

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?