Pre loader

View black and labels flashing

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

1
0

Hello,

I am currently evaluating SciChart Android and have some questions:

1)
I am using fragments and when I load the fragment with the chart or replace the chart with another fragment, the view flashes black for a moment. This effect is considerable noticeable because I am using a white background for the chart.
VIDEO EXAMPLE

2)
My application domain is like kind of a stock chart. The Y-Values are Doubles while the X-Values are timestamps.
There are small gaps in the data so the distance from each point to the next one is not always the same.
The example dataset consists of 152 datapoints, starts at November 18, 17:00 and end at November 25, 16:00 with distances which are either 1 hour or 2 hours apart.
When zooming and dragging the graph, some labels for the date seem to appear and disappear at random which is really distracting.
VIDEO EXAMPLE

3)
When the user keeps zooming in, the labels should get more detailed.
It is kinda pointless when all the labels are showing the same day. How can I set it, that when the first visible point and the last visible point are only 2 days apart, that the format on the label is HH:MM and not the day and month?

Also, how can I set the maximum zoom? I got it working with the CategoryDateAxis but with the DateAxis it is different and I don’t know how to use the visibibleRangeLimit as the documentation for timeseries charts is rather lacking in this regard.

Our company is considering buying the chart for Android & iOS but those first two problems are king of a deal breaker for us.
Thank you.

My simple style code:

    <style name="CustomSciChart" parent="SciChart_BaseStyle">
    <item name="sciChartBackground">@android:color/white</item>
    <item name="majorGridLinesColor">@color/midLightGray</item>
    <item name="minorGridLinesColor">@color/midLightGray</item>

My chart code:

    final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();
    surface.setTheme(R.style.CustomSciChart);
    XyDataSeries<Date, Double> lineData = sciChartBuilder.newXyDataSeries(Date.class, Double.class).build();
    final DateAxis xAxis = sciChartBuilder.newDateAxis()
            .withDrawMinorGridLines(false)
            .withDrawMinorTicks(false)
            .withAutoRangeMode(AutoRange.Once)
            .build();

    final IAxis yAxis = sciChartBuilder.newNumericAxis()
            .withAxisAlignment(AxisAlignment.Left)
            .withDrawMinorGridLines(false)
            .withDrawMinorTicks(false)
            .withGrowBy(0.2d, 0.2d)
            .build();

    final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries()
            .withDataSeries(lineData)
            .withStrokeStyle(ContextCompat.getColor(getActivity(), R.color.colorPrimary), 2f, true)
            .build();


    PinchZoomModifier pinchZoomModifier = new PinchZoomModifier();
    pinchZoomModifier.setScaleFactor(1.5f);
    pinchZoomModifier.setDirection(Direction2D.XDirection);
    surface.getChartModifiers().add(pinchZoomModifier);

    ZoomPanModifier zoomPanModifier = new ZoomPanModifier();
    zoomPanModifier.setClipModeX(ClipMode.ClipAtExtents);
    zoomPanModifier.setDirection(Direction2D.XDirection);
    zoomPanModifier.setZoomExtentsY(false);
    surface.getChartModifiers().add(zoomPanModifier);


    surface.getRenderableSeries().add(lineSeries);
    Collections.addAll(surface.getYAxes(), yAxis);
    Collections.addAll(surface.getXAxes(), xAxis);

Fragment replacement:

         FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.content, fragment, tag);
        fragmentTransaction.commit();
Version
2.0.0.1654
  • You must to post comments
2
0

Hi Patrick,

Thanks for your questions.

  1. I believe this issue is caused by our default RenderSurface implementation. It is based on GlSurfaceView and there is some delay caused by OpenGL initialization when you attach it to View hierarchy. Please try to switch to Canvas based RenderSurface ( it’s a bit slower than OpenGL based RenderSurface but in most cases drawing performance should be OK ):

        surface.setRenderSurface(new RenderSurface(getActivity()));
    
  2. This behavior caused by too large tick labels which overlap each other – by default we hide some labels in this case to provide the best visual output. I would suggest to play with next properties and choose some combination which will work for you:

        final IAxis xAxis = sciChartBuilder.newDateAxis()
                    .withAutoFitMarginalLabels(false) // disable shift of labels on the edges of the axis
                    .withMaxAutoTicks(4)              // or reduce amount of labels on screen
                    .withTextFormatting(formatString) // or set format string which will provide smaller tick label
                    .withIsLabelCullingEnabled(false) // or completely disable label clipping when they overlap
                    .build();
    
  3. We don’t provide such behavior out of the box for DateAxis. By default there is only one format string for axis which is used for all zoom levels. However you can implement desired behavior on your own by implementing custom LabelProvider:

    public class CustomDateLabelFormatter implements ILabelFormatter<DateAxis>{
    private final SimpleDateFormat labelFormat = new SimpleDateFormat();
    private final SimpleDateFormat cursorLabelFormat = new SimpleDateFormat();
    
    
    @Override
    public void update(DateAxis axis) {
        // here you can get VisibleRange from axis and select format string based on it
        final String labelFormatString = "";
        final String cursorFormatString = "";
    
        labelFormat.applyPattern(labelFormatString);
        cursorLabelFormat.applyPattern(cursorFormatString);
    }
    
    @Override
    public CharSequence formatLabel(Comparable dataValue) {
        return labelFormat.format(ComparableUtil.toDate(dataValue));
    }
    
    @Override
    public CharSequence formatCursorLabel(Comparable dataValue) {
        return cursorLabelFormat.format(ComparableUtil.toDate(dataValue));
    }
    }
    
    
    final IAxis xAxis = sciChartBuilder.newDateAxis().withLabelProvider(new DateLabelProvider(new CustomDateLabelFormatter())).build();
    
  4. API for setting VisibleRangeLimit for DateAxis is the same as for other axes types but you need to ensure that you set range of correct type ( for DateAxis it’s the save range type as for VisibleRange – DateRange ) or you can use a helper method provided by builder class which will create appropriate range instance for you:

    final IAxis xAxis = sciChartBuilder.newDateAxis().withVisibleRangeLimit(minDate, maxDate).build();
    

Hope this will help you!

Best regards,
Yura

  • Patrick Venturini
    Hello, Thank you for the first 3 answers, they fixed the problem. For VisibleRangeLimit: I played with it a bit but I don’t really know what min and max means. If I want to reduce the zooming to a single day, regardless of the x-values, what would min and max be? Isn’t there an option to set just one value for the maximum x-difference between the left most and the right most visible point? Another question: When I zoom in, after the user stops zooming I want to load more datapoints for that section. For example: 1 week with 150 datapoints is default, now when the user zooms in on a single day and takes his finger of the screen, I want to load more datapoints for that single day and populate the graph with it. Is there a callback for that where I can request more data from our API and then insert it into the graph? I also don’t want to lose the other data, so the user can still zoom out of that section. Thank you.
  • You must to post comments
0
0

I have to unaccept the answer because using the canvas did fix the black view bug but introduced other phenomena:

1) Ticks are always shown even though I explicitly turned them off when creating the axes.

2) When panning to the right, there is a strange behavior when the line is drawn and there is a point when it’s even invisible.

This doesn’t happen with the default surface, I made another video to demonstrate the effect.

VIDEO

  • Yura Khariton
    Hi Patrick. I fixed issue #2 – there was a bug in our drawing code. The fix should be available in our Maven repository abit later today. However I can’t reproduce issue #1 – can you provide some code sample or project which would allow me to reproduce this issue on my PC? Thanks in advance.
  • You must to post comments
0
0

Code:

    surface.setTheme(R.style.CustomSciChart); 
surface.setRenderSurface(new RenderSurface(getActivity()));
final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();

    // Create a date X Axis
    final IAxis xAxis = sciChartBuilder.newDateAxis()
            .withDrawMinorGridLines(false)
            .withDrawMajorGridLines(false)
            .withDrawMinorTicks(false)
            .withDrawMajorTicks(true)
            .withGrowBy(0.0d, 0.05d)
            .withLabelProvider(new DateLabelProvider(new CustomDateLabelFormatter()))
            .build();


    // Create a numeric Y axis
    final IAxis yAxis = sciChartBuilder.newNumericAxis()
            .withAxisAlignment(AxisAlignment.Left)
            .withDrawMinorGridLines(false)
            .withDrawMinorTicks(false)
            .withDrawMajorTicks(true)
            .build();

    // Create a PinchZoomModifier
    PinchZoomModifier pinchZoomModifier = new PinchZoomModifier();
    pinchZoomModifier.setScaleFactor(1.5f);
    pinchZoomModifier.setDirection(Direction2D.XDirection);

    // Add the modifier to the surface
    surface.getChartModifiers().add(pinchZoomModifier);


    // Create a ZoomPanModifier
    ZoomPanModifier zoomPanModifier = new ZoomPanModifier();
    zoomPanModifier.setClipModeX(ClipMode.ClipAtExtents);
    zoomPanModifier.setDirection(Direction2D.XDirection);
    zoomPanModifier.setZoomExtentsY(false);

    // Add the modifier to the surface
    surface.getChartModifiers().add(zoomPanModifier);

    // Add the Y axis to the YAxes collection of the surface
    Collections.addAll(surface.getYAxes(), yAxis);

    // Add the X axis to the XAxes collection of the surface
    Collections.addAll(surface.getXAxes(), xAxis);

If I remove this line:

surface.setRenderSurface(new RenderSurface(getActivity()));

Then the ticks are gone.

  • Yura Khariton
    Thanks for code. I could reproduce it with older build (you specified v2.0.0.1654) of library but can’t reproduce it with latest version from our Maven repository where we publish nightly builds. So probably this issue was already fixed some time ago. Can you try to update to the latest version (v2.1.0.2082 which also includes fix for issue #2 ) and let me know if this fixes this issue for you? Thanks in advance
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

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

Start TrialCase Studies