SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

0 votes
227 views

Hi
I have a line chart that has already been drawn and synced with a sound.
when we play sound, chart begin to scroll horizontally.
but problem is lagging when scrolling chart.
Is there a way to fix this problem?

private Runnable mRunnable = new Runnable() {
    @Override
    public void run() {
        forceRunInPauseMode = false;

        getActivity().runOnUiThread(() -> {
            currentTime = (int) exoPlayer.getCurrentPosition();
            binding.tvCurrentDuration.setText(MiliToTimeConverter.milliToTime(currentTime));
        });

        int currentRange = currentTime * 2;


        if (!isDraw) {
            DoubleValues xValues = new DoubleValues(Arrays.copyOfRange(xDoubleArray, 0, xDoubleArray.length - 1));
            DoubleValues yValues = new DoubleValues(Arrays.copyOfRange(yDoubleArray, 0, yDoubleArray.length - 1));
            DoubleSeries doubleSeries = new DoubleSeries(xValues, yValues);
            lineData.append(doubleSeries.getxValues(), doubleSeries.getyValues());
            isDraw = true;
        }
        xVisibleRange.setMinMax(currentRange - visibleInterval / 2, currentRange + visibleInterval / 2);
    }
};

private void updateChart() {
    schedule = scheduledExecutorService.scheduleWithFixedDelay(() -> {
        if (!isPlaying && !forceRunInPauseMode)
            return;
        UpdateSuspender.using(binding.sciChart, mRunnable);
    }, 0, TIME_INTERVAL, TimeUnit.MILLISECONDS);
}


private void pause() {
    exoPlayer.setPlayWhenReady(false);
    binding.ivPlay.setImageResource(R.drawable.ic_play);
    if (schedule != null)
        schedule.cancel(false);
}

private void initSciChart() {

    isChartConfigured = true;
    SciChartBuilder.init(getContext());
    binding.sciChart.setBackgroundColor(getResources().getColor(R.color.colorTransparent));

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

    //set border style
    binding.sciChart.setRenderableSeriesAreaBorderStyle(null);

    xVisibleRange = new DoubleRange();

    // Create a numeric X axis
    final IAxis xAxis = mSciChartBuilder.newNumericAxis()
            .withVisibleRange(xVisibleRange)
            .withGrowBy(new DoubleRange(0.25d * visibleInterval / totalDuration, 0.25d * visibleInterval / totalDuration))
            .withAutoRangeMode(AutoRange.Never)
            .build();

    final IAxis yAxis = mSciChartBuilder.newNumericAxis()
            .withVisibleRange(-1d, 1d)
            .withAutoRangeMode(AutoRange.Never)
            .build();

    xAxis.setVisibleRangeChangeListener((iAxisCore, oldRange, newRange, isAnimating) -> {
        if (!isPlaying) {
            double c = ((newRange.getMinAsDouble() + newRange.getMaxAsDouble()) / 4);
            getActivity().runOnUiThread(() -> binding.tvCurrentDuration.setText(MiliToTimeConverter.milliToTime((long) c)));
        }
    });


    xAxis.setDrawMajorGridLines(false);
    xAxis.setDrawMinorGridLines(false);
    xAxis.setDrawMajorBands(false);
    xAxis.setDrawMajorTicks(true);
    xAxis.setDrawMinorTicks(true);
    xAxis.setTickProvider(new CustomTickProvider());
    xAxis.setMaxAutoTicks(MAX_AUTO_TICKS);
    xAxis.setMinorsPerMajor(MINOR_PER_MAJOR);
    xAxis.setVisibility(View.GONE);


    yAxis.setDrawMajorGridLines(false);
    yAxis.setDrawMinorGridLines(false);
    yAxis.setDrawMajorBands(false);
    yAxis.setDrawMajorTicks(false);
    yAxis.setDrawMinorTicks(false);
    yAxis.setTickProvider(new CustomTickProvider());
    yAxis.setMaxAutoTicks(MAX_AUTO_TICKS);
    yAxis.setMinorsPerMajor(MINOR_PER_MAJOR);
    yAxis.setVisibility(View.GONE);


    VerticalLineAnnotation verticalLine = mSciChartBuilder.newVerticalLineAnnotation()
            .withX1(0.5)   // black
            .withStroke(new SolidPenStyle(ColorUtil.argb(250, 120, 126, 136), true, 1f, null))
            .withCoordinateMode(AnnotationCoordinateMode.RelativeX)
            .build();

    ModifierGroup chartModifiers = mSciChartBuilder.newModifierGroup()
            .withModifier(new GestureModifierBase() {
                @Override
                public void detach() {
                    super.detach();
                }

                @Override
                public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                    return false;
                }

                @Override
                public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                    // Scroll X
                    xAxis.scroll((-distanceX/2), ClipMode.ClipAtExtents);

                    return true;
                }
            })
            .build();

    lineData = mSciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
    XyDataSeries staticData = mSciChartBuilder.newXyDataSeries(Double.class, Double.class).build();

    final FastLineRenderableSeries lineSeries = mSciChartBuilder.newLineSeries()
            .withDataSeries(lineData)
            //.withPointMarker(mSciChartBuilder.newPointMarker(new EllipsePointMarker()).withSize(7, 7).withStroke(0xFF006400, 1).withFill(0xFFFFFFFF).build())
            .withPaletteProvider(new XYCustomPaletteProvider(ColorUtil.argb(255, 50, 153, 0))) // green
            .withStrokeStyle(ColorUtil.argb(250, 120, 126, 136), 1f, true) // black
            .build();

    final IRenderableSeries staticLineSeries = mSciChartBuilder.newLineSeries()
            .withDataSeries(staticData)
            .withPaletteProvider(new XYCustomPaletteProvider(ColorUtil.argb(255, 50, 153, 0))) // green
            .withStrokeStyle(ColorUtil.argb(250, 120, 126, 136), 1f, true) // black
            .build();

    DoubleValues xValues = new DoubleValues(Arrays.copyOfRange(xDoubleArray, 0, totalRange));
    DoubleValues yValues = new DoubleValues(Arrays.copyOfRange(yDoubleArray, 0, totalRange));
    DoubleSeries doubleSeries = new DoubleSeries(xValues, yValues);

    binding.sciChart.getRenderableSeries().add(lineSeries);
    binding.sciChart.getRenderableSeries().add(staticLineSeries);

    binding.sciChart.setRenderSurface(new RenderSurface(getContext()));

    Collections.addAll(binding.sciChart.getYAxes(), yAxis);
    Collections.addAll(binding.sciChart.getXAxes(), xAxis);
    Collections.addAll(binding.sciChart.getChartModifiers(), chartModifiers);
    Collections.addAll(binding.sciChart.getAnnotations(), verticalLine);

    staticData.append(doubleSeries.getxValues(), doubleSeries.getyValues());
    lineData.setAcceptsUnsortedData(true);

    begin();
}
0 votes
467 views

Hello! I have a real time line chart and a SciChartOverview control and the problem is, as soon as I want to extend the visible range with the overview’s slider, the chart’s x visible range is zoomed to extent. I’d like to have the same functionality as in the ScrollChartUsingOverviewControl example and the real time ticking stock chart. In those examples, if the visible range is extended by the overview scroll bar’s left-hand slider, the max visible range keeps rolling with new data, while the min visible range is extended. I followed those examples, by binding the XVisibleRange to the view model in 2 way mode, but for me the max visible range jumps to the latest data as soon as I move the overview’s slider to the left (stops rolling with new data).

Chart xaml:

<s:SciChartSurface Grid.Row="0" x:Name="Chart" RenderableSeries="{s:SeriesBinding SeriesViewModels}">
            <!--  Create an X Axis  -->
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis AxisTitle="Time" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}" GrowBy="0, 0.1" DrawMinorGridLines="False" DrawMajorBands="True"/>
            </s:SciChartSurface.XAxis>
            <!--  Create a Y Axis  -->
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="Count" AutoRange="Always" GrowBy="0.1"/>
            </s:SciChartSurface.YAxis>
            <!--  Specify interactivity modifiers  -->
            <!-- Add Zooming, Panning behaviours to the chart -->
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <!-- Allow drag to zoom on Left mouse -->
                    <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                         RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                         RubberBandStrokeDashArray="2 2"/>
                    <!-- Allow pan on Right mouse drag -->
                    <s:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                    <!-- Allow Dragging YAxis to Scale -->
                    <s:YAxisDragModifier DragMode="Scale"/>
                    <!-- Allow Dragging XAxis to Pan -->
                    <s:XAxisDragModifier DragMode="Pan"/>
                    <!-- Allow Mousewheel Zoom -->
                    <s:MouseWheelZoomModifier/>
                    <!-- Allow Zoom to Extents on double click -->
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                    <!-- Add a Legend to the chart -->
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal"
                                               VerticalAlignment="Bottom"                                     
                                               HorizontalAlignment="Center"
                                               LegendPlacement="Inside" />
                    <!-- Add a RolloverModifier to the chart (shows vertical line tooltips) -->
                    <s:RolloverModifier ExecuteOn="MouseMove" ShowTooltipOn="MouseHover"/>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
        <!-- Add a Scrollbar, and bind to SciChartSurface.XAxis -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <!--<ColumnDefinition Width="75"/>-->
            </Grid.ColumnDefinitions>
            <!--<s:SciChartScrollbar Grid.Column="0" Axis="{Binding ElementName=PhotonChart, Path=XAxis}"/>-->
            <s:SciChartOverview Grid.Column="0"
                                DataSeries="{Binding SeriesViewModels[0].DataSeries, Mode=OneWay}"
                                ParentSurface="{Binding Source={x:Reference Name=Chart}, Mode=OneWay}"
                                SelectedRange="{Binding XVisibleRange, Mode=TwoWay}"/>
        </Grid>

Am I missing something, or what am I doing wrong?

0 votes
475 views

I have a real-time chart that already drawn.
Is there a method that scrolls programmatically ?
If there is no such method, how i can do this ?

0 votes
1k views

Hello everyone.

I have 2 stacked horizontally charts with

 .withMotionEventsGroup("ModifiersSharedEventsGroup").withReceiveHandledEvents(true)

so they drag and zoom in same way.

But when i put one finger on first chart, second finger on second chart – then total apocalypse happens.
Is it possible to zoom it, like two fingers on one chart or disable zoom in that situation, so charts will have no conflict?

(I think both chart just dragging in different directions in my case, but because they are linked – everything just shakes)

Edit:

Collections.addAll(mSciChartMainSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()
                        .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(SCALE_FACTOR_X_AXIS).build()
                        .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
                        .withMotionEventsGroup(MODIFIER_SHARED_EVENTS_GROUP_NAME).withReceiveHandledEvents(true)
                        .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
                        .build());



Collections.addAll(mSciChartBotIndicatorSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()
                    .withMotionEventsGroup(MODIFIER_SHARED_EVENTS_GROUP_NAME).withReceiveHandledEvents(true)
                    .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(SCALE_FACTOR_X_AXIS).build()
                    .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
                    .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
                    .build());
1 vote
2k views

Hello everyone.

I have chart with adding data every second.

What i want to do:
– by dragging finger left, right – chart scrolls left and right (can go to past data, etc)
– by two fingers zoom gesture – it zooms (only horizontally with autorange by Y axis)
– i set a visible range limit to the right in this way: user can scroll to the right xMax to be in the middle (currently this part not working – and axis zooming, when i continue scrolling to the right)

I tried a lot of different modifiers, but none of them was ok.

My setup:

lineDataSeries.addObserver(new IDataSeriesObserver() {
            @Override
            public void onDataSeriesChanged(IDataSeries<?, ?> iDataSeries, int i) {

                long addTime = 30_000 * currentTimeframe;

                runOnUiThread(() -> {
                    DateRange dateRange = new DateRange();

                    dateRange.setMinMax(new Date(0), new Date(lineDataSeries.getXRange().getMax().getTime() + addTime));

                    mSciChartSurface.getXAxes().getDefault().setVisibleRangeLimit(dateRange);
                });
            }
        });

final DateAxis dateAxis = sciChartBuilder.newDateAxis()
            .withAutoRangeMode(AutoRange.Never)
            .withDrawMajorTicks(true)
            .withDrawMinorTicks(false)
            .withDrawMinorGridLines(false)
            .withAutoFitMarginalLabels(false)
            .withTextFormatting("HH:mm:ss")
            .build();
    dateAxis.setMinimalZoomConstrain(25_000L * currentTimeframe); // 25 - 300 points
    dateAxis.setMaximumZoomConstrain(300_000L * currentTimeframe);

final NumericAxis yAxis = sciChartBuilder.newNumericAxis()
            .withAutoRangeMode(AutoRange.Always)
            .withGrowBy(new DoubleRange(0.1d, 0.1d))
            .withTextFormatting("#.000000")
            .withAutoFitMarginalLabels(false)
            .withDrawMinorTicks(false)
            .withDrawMinorGridLines(false)
            .build();
    yAxis.setMinimalZoomConstrain(0d);

ModifierGroup additionalModifiers = sciChartBuilder.newModifierGroup()
            .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(2).build()
            .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).withClipModeX(ClipMode.ClipAtMax).build()
            //.withZoomExtentsModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
           //
            .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).withClipModeX(ClipMode.ClipAtMax).build()
            //.withYAxisDragModifier().withReceiveHandledEvents(false).withDragMode(AxisDragModifierBase.AxisDragMode.Scale).build()
            .build();
0 votes
3k views

Hi, guys

My X axis is SCICategoryDateTimeAxis type.

And i have a huge amount of data to display. So i need to display it by scrolling of the chart surface.
So what is the best practice to update data series on the fly and display it at the chart surface?

Best regards,
Sushynski Andrei

1 vote
3k views

I evaluating Scichart for our application and have been testing the Realtime FIFO example.

I have made the following modifications to the example
– Increased number of samples added per timer tick
– Replaced a sin wave with a recording of FPS
– Swapped to DX10 render surface
– Changed Plot Theme
– Added Plot Modifiers for manipulation

When FIFO is enabled and more than 5052 points are added unusual behavior occurs, the line seems to slide backwards and faster than the plot does and there are lines connecting the start and end of the plot.

I have recorded a video that compares running with FIFO enabled vs FIFO disabled.

https://youtu.be/SKi1zRDhq60

I forgot to add that I can get a similar but slightly different glitch by taking the example straight from the example browser and increasing the FIFO length to 10000, see attached image.

  • Hugoagogo asked 4 years ago
  • last active 4 years ago
0 votes
5k views

I have uploaded little test project with data and small video (1.8 Mb) showing the problem here https://www.dropbox.com/s/cgevtl6gee74926/ZoomOutScroll.zip?dl=0

1) Bug report.
In new versions (3.23) MouseWheelZoomModifier won’t zoom out if first bar of DataSeries is already visible (no more data on the left of the chart). But in old versions (2.11) it works. Please see my video. I can’t tell in exactly what version this behavior has been changed. I remember I reported this bug 1 or 1.5 years ago, and it was fixed. But now I notice this again.
Please fix or describe how can I fix it for my charts (3.23).

2) Question.
Please see second half of the video (after 0:17).
On top there is SciChartSurface, on bottom there is SciStockChart.
ZoomPanModifier (scrolling the chart with pressed left mouse button) works differently: SciStockChart scrolls good, but SciChartSurface does zooming in instead of simple scrolling.
My question is how to set up SciChartSurface to make her ZoomPanModifier act as on SciStockChart. I used to work with SciChartSurface and don’t want to move to SciStockChart because I like to have more settings.

  • RTrade A asked 5 years ago
  • last active 5 years ago
0 votes
8k views

How to move chart scroll by arrow key? For example, When I pressed the Right Arrow Key, the bars in the chart will move Right one Bar position, vice versa. Thanks.

  • fxchenlin asked 7 years ago
  • last active 6 years ago
Showing 9 results
This template supports the sidebar's widgets. Add one or use Full Width layout.