Pre loader

1

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

All Answers » Re: Sync two chart Android » Comments for "Re: Sync two chart Android"
  • vasim simform
    Hello Yura Thank you for quick response. It seems suitable solution , We can follow you code . One suggestion please explore this kind of example over your tutorial destination. Once again Thank you.
  • vasim simform
    Hello Yura In above code I want to add list of records on click based like each time need to append 500 data based on button click in chart how can I do ? Note : Not in real time but on button click need to append data please help on this
  • Yura Khariton
    I’m not sure what the problem is. Have you tried to add OnClickListener for button and modify DataSeries inside of it? The only thing that you’ll need is to save DataSeries instance you need to update in private field, so it can get accessed in listener ( now DataSeries is created in createDataSeries() method ) or pass it into listener in some other way depending on your needs
  • vasim simform
    Assume we have append data of array periodically(Based on click event) in both top/ bottom chart val dataSeries = XyDataSeries().apply { fifoCapacity = 100 } Tap on button 1st Time need to append data 500 so in chart(Top/Bottom) should be 500 data (Data , Double) Tap on button 2nd Time need to append data 2000 so now in both (Top/Bottom)chart should be 2500 data (Data , Double) How I can do modify above to code get this result please help on this
  • Yura Khariton
    Well your code has FifoCapacity = 100, which means that your DataSeries can save only latest 100 points. If you append 500 points, only latest 100 will actually displayed by chart, and after you append another 2000, they will be discarded and only last 100 points from 2000 points will be displayed by chart. Try to remove setting of FifoCapacity and this should remove this limit
  • vasim simform
    From above code needs to achieve this behaviors as you can see in below attached URL screenshot We need to zoom out bottom chart based on above chart white rectangle movement left to right or right to left https://paste.pics/cb688ee98a0766839e0309d0293bbccc Please help on this
  • Yura Khariton
    For me it looks like that you’re trying to implement something like in one of our demo examples (https://www.scichart.com/example/android-realtime-ticking-stock-charts/). Can you take a look on this example, especially on OverviewPrototype class and how it tracks changes from other chart? Hope this will help you!
  • vasim simform
    Hello Same effect needs in our solution as exist in stock (as given link )example but can you modify in above code to provide our expected solutions Becase in stock example used withReceiveHandledEvents which we haven’t used in above code so please make required changes at above code and provide complete solution Thanks
  • Yura Khariton
    I don’t understand what is the problem with withReceiveHandledEvents() method ( it is used to provide correct work of modifiers because the use same touch events and without it some modifiers won’t handle touch events if they already handled by other modifier ). Can you give provide more information about issue that this method is causing?
  • vasim simform
    You can see UI view in this screenshot https://paste.pics/cb688ee98a0766839e0309d0293bbccc As we are showing two chart Top/Bottom chart if i will move top chart left – to – right or right – to – left at same time bottom chart should be move along with zoom level as much as top chart rectangle(Bot annotation) exist x – axis data series I am request to you if you can modify above code as expected output that its easy to us use this solution
  • vasim simform
    I modified this code to at top chart needs to move left-to-right and right – to – left based on that bottom chart should be move package com.app.flashback.ui.fragments;//****************************************************************************** // SCICHART® Copyright SciChart Ltd. 2011-2017. All rights reserved. // // Web: http://www.scichart.com // Support: [email protected] // Sales: [email protected] // // CreateRealTimeTickingStockChartFragment.java is part of the SCICHART® Examples. Permission is hereby granted // to modify, create derivative works, distribute and publish any part of this source // code whether for commercial, private or personal use. // // The SCICHART® examples are distributed in the hope that they will be useful, but // without any warranty. It is provided “AS IS” without warranty of any kind, either // expressed or implied. //****************************************************************************** import android.os.Bundle; import androidx.annotation.DrawableRes; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.app.flashback.R; import com.app.flashback.databinding.FragmentCriHistoryBinding; import com.scichart.charting.Direction2D; import com.scichart.charting.model.dataSeries.IDataSeries; import com.scichart.charting.model.dataSeries.IDataSeriesCore; import com.scichart.charting.model.dataSeries.IDataSeriesObserver; import com.scichart.charting.model.dataSeries.IOhlcDataSeries; import com.scichart.charting.model.dataSeries.IXyDataSeries; import com.scichart.charting.visuals.SciChartSurface; import com.scichart.charting.visuals.annotations.AnnotationCoordinateMode; import com.scichart.charting.visuals.annotations.AxisMarkerAnnotation; import com.scichart.charting.visuals.annotations.BoxAnnotation; import com.scichart.charting.visuals.annotations.VerticalLineAnnotation; import com.scichart.charting.visuals.axes.AutoRange; import com.scichart.charting.visuals.axes.CategoryDateAxis; import com.scichart.charting.visuals.axes.IAxis; import com.scichart.charting.visuals.axes.IAxisCore; import com.scichart.charting.visuals.axes.NumericAxis; import com.scichart.charting.visuals.axes.VisibleRangeChangeListener; import com.scichart.charting.visuals.renderableSeries.FastMountainRenderableSeries; import com.scichart.core.annotations.Orientation; import com.scichart.core.framework.UpdateSuspender; import com.scichart.data.model.DoubleRange; import com.scichart.data.model.IRange; import com.scichart.drawing.utility.ColorUtil; import com.scichart.extensions.builders.SciChartBuilder; import java.util.Calendar; import java.util.Collections; import java.util.Date; import java.util.Random; public class CreateRealTimeTickingStockChartFragment extends Fragment { private static final int SECONDS_IN_FIVE_MINUTES = 5 * 60; public static final int DEFAULT_POINT_COUNT = 150; public static final int SMA_SERIES_COLOR = 0xFFFFA500; public static final int STOKE_UP_COLOR = 0xFF00AA00; public static final int STROKE_DOWN_COLOR = 0xFFFF0000; public static final float STROKE_THICKNESS = 1.5f; SciChartBuilder sciChartBuilder = SciChartBuilder.instance(); private final IOhlcDataSeries ohlcDataSeries = sciChartBuilder.newOhlcDataSeries(Date.class, Double.class).withSeriesName(“Price Series”).build(); private final IXyDataSeries xyDataSeries = sciChartBuilder.newXyDataSeries(Date.class, Double.class).withSeriesName(“50-Period SMA”).build(); private AxisMarkerAnnotation smaAxisMarker = sciChartBuilder.newAxisMarkerAnnotation().withY1(0d).withBackgroundColor(SMA_SERIES_COLOR).build(); private AxisMarkerAnnotation ohlcAxisMarker = sciChartBuilder.newAxisMarkerAnnotation().withY1(0d).withBackgroundColor(STOKE_UP_COLOR).build(); private OverviewPrototype overviewPrototype; FragmentCriHistoryBinding binding; @Nullable @org.jetbrains.annotations.Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { binding = FragmentCriHistoryBinding.inflate(inflater, container, false); return binding.getRoot(); } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); initChart(); } private void initChart() { initializeMainChart(binding.chartBottom); overviewPrototype = new OverviewPrototype(binding.chartBottom, binding.chartTop); } private void initializeMainChart(final SciChartSurface surface) { final CategoryDateAxis xAxis = sciChartBuilder.newCategoryDateAxis() .withBarTimeFrame(SECONDS_IN_FIVE_MINUTES) .withDrawMinorGridLines(false) .withGrowBy(0, 0.1) .build(); final NumericAxis yAxis = sciChartBuilder.newNumericAxis().withAutoRangeMode(AutoRange.Always).build(); final FastMountainRenderableSeries line = sciChartBuilder.newMountainSeries().withStrokeStyle(SMA_SERIES_COLOR, STROKE_THICKNESS).withDataSeries(xyDataSeries).build(); UpdateSuspender.using(surface, new Runnable() { @Override public synchronized void run() { Collections.addAll(surface.getXAxes(), xAxis); Collections.addAll(surface.getYAxes(), yAxis); Collections.addAll(surface.getRenderableSeries(), line); /* Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroup() .withXAxisDragModifier().build() .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build() .withZoomExtentsModifier().build() .withLegendModifier().withOrientation(Orientation.HORIZONTAL).withPosition(Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM, 20).withReceiveHandledEvents(true).build() .build());*/ } }); } @Override public void onActivityCreated(final Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); final SciChartSurface surface = binding.chartTop; UpdateSuspender.using(surface, this::createDataSeries); } private IDataSeries createDataSeries() { for (int i = 0; i <= 500; i++) { Date date = Calendar.getInstance().getTime(); Double aDouble = new Random().nextDouble(); xyDataSeries.append(date, aDouble); overviewPrototype.getOverviewDataSeries().append(date, aDouble); } return xyDataSeries; } @Override public void onDestroyView() { super.onDestroyView(); } private static class OverviewPrototype { private final SciChartBuilder builder = SciChartBuilder.instance(); private final VisibleRangeChangeListener topChartAxisVisibleRangeChangeListener = new VisibleRangeChangeListener() { @Override public void onVisibleRangeChanged(IAxisCore axis, IRange oldRange, IRange newRange, boolean isAnimating) { final double newMin = newRange.getMinAsDouble(); final double newMax = newRange.getMaxAsDouble(); if (!overviewXAxisVisibleRange.equals(new DoubleRange(0d, 10d))) { topChartXAxisVisibleRange.setMinMaxWithLimit(newMin, newMax, overviewXAxisVisibleRange); } else { topChartXAxisVisibleRange.setMinMax(newMin, newMax); } boxAnnotation.setX1(topChartXAxisVisibleRange.getMin()); boxAnnotation.setX2(topChartXAxisVisibleRange.getMax()); leftLineGrip.setX1(topChartXAxisVisibleRange.getMin()); leftBox.setX1(overviewXAxisVisibleRange.getMin()); leftBox.setX2(topChartXAxisVisibleRange.getMin()); rightLineGrip.setX1(topChartXAxisVisibleRange.getMax()); rightBox.setX1(topChartXAxisVisibleRange.getMax()); rightBox.setX2(overviewXAxisVisibleRange.getMax()); } }; private final BoxAnnotation leftBox = generateBoxAnnotation(R.drawable.example_grayed_out_box_annotation_background); private final BoxAnnotation rightBox = generateBoxAnnotation(R.drawable.example_grayed_out_box_annotation_background); private final BoxAnnotation boxAnnotation = generateBoxAnnotation(0); private final VerticalLineAnnotation leftLineGrip = generateVerticalLine(); private final VerticalLineAnnotation rightLineGrip = generateVerticalLine(); private final IRange topChartXAxisVisibleRange; private IRange overviewXAxisVisibleRange; private final IXyDataSeries overviewDataSeries = builder.newXyDataSeries(Date.class, Double.class).withAcceptsUnsortedData().build(); @SuppressWarnings(“unchecked”) OverviewPrototype(SciChartSurface topChartSurface, SciChartSurface bottomChartSurface) { final IAxis parentXAxisTopChart = topChartSurface.getXAxes().get(0); // parentXAxisTopChart.setVisibleRangeChangeListener(topChartAxisVisibleRangeChangeListener); topChartXAxisVisibleRange = parentXAxisTopChart.getVisibleRange(); initializeBottomChart(bottomChartSurface); overviewDataSeries.addObserver(new IDataSeriesObserver() { @Override public void onDataSeriesChanged(IDataSeriesCore dataSeries, int dataSeriesUpdate) { rightBox.setX1(topChartXAxisVisibleRange.getMax()); rightBox.setX2(overviewXAxisVisibleRange.getMax()); } }); } IXyDataSeries getOverviewDataSeries() { return overviewDataSeries; } private void initializeBottomChart(final SciChartSurface surface) { surface.setRenderableSeriesAreaBorderStyle(null); final CategoryDateAxis xAxis = builder.newCategoryDateAxis() .withBarTimeFrame(SECONDS_IN_FIVE_MINUTES) .withAutoRangeMode(AutoRange.Always) .withDrawMinorGridLines(false) .withVisibility(View.GONE) .withGrowBy(0, 0.1) .build(); overviewXAxisVisibleRange = xAxis.getVisibleRange(); final NumericAxis yAxis = builder.newNumericAxis().withAutoRangeMode(AutoRange.Always).withVisibility(View.INVISIBLE).build(); removeAxisGridLines(xAxis, yAxis); final FastMountainRenderableSeries mountain = builder.newMountainSeries().withDataSeries(overviewDataSeries).build(); UpdateSuspender.using(surface, new Runnable() { @Override public synchronized void run() { Collections.addAll(surface.getXAxes(), xAxis); Collections.addAll(surface.getYAxes(), yAxis); Collections.addAll(surface.getRenderableSeries(), mountain); Collections.addAll(surface.getAnnotations(), boxAnnotation, leftBox, rightBox, leftLineGrip, rightLineGrip); Collections.addAll(surface.getChartModifiers(), builder.newModifierGroup() .withXAxisDragModifier().build() .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XyDirection).build() .withZoomExtentsModifier().build() .build()); } }); } private BoxAnnotation generateBoxAnnotation(@DrawableRes int backgroundDrawable) { return builder.newBoxAnnotation() .withBackgroundDrawableId(backgroundDrawable) .withCoordinateMode(AnnotationCoordinateMode.RelativeY) .withIsEditable(false) .withY1(0).withY2(1) .build(); } private VerticalLineAnnotation generateVerticalLine() { return builder.newVerticalLineAnnotation().withCoordinateMode(AnnotationCoordinateMode.RelativeY) .withVerticalGravity(Gravity.CENTER_VERTICAL) .withStroke(5, ColorUtil.Grey) .withIsEditable(false) .withY1(0.3).withY2(0.7) .withX1(0) .build(); } private void removeAxisGridLines(IAxis… axes) { for (IAxis axis : axes) { axis.setDrawMajorGridLines(false); axis.setDrawMajorTicks(false); axis.setDrawMajorBands(false); axis.setDrawMinorGridLines(false); axis.setDrawMinorTicks(false); } } } }
  • Yura Khariton
    Can you tell me what is FragmentCriHistoryBinding? This is binding that I don’t have access to and as result I can’t compile your code. Can you provide entire project?
  • vasim simform
    You can use for XML code we need to manage top chart and bottom chart
  • Yura Khariton
    Can you provide it or project so I could run your code?
  • Yura Khariton
    Hi there, I removed link to your project, because it contains license key, but I took a look on code before that and posted updated code. Hope this will help you!

Try SciChart Today

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

Start TrialCase Studies