Pre loader

SciChart Issue - Any way to add the following Sidebar to side of chart so zooming will zoom it in also

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

0
0

See the Attached image — On the right side in addition to the labels 0.01% – 20.0%; Their is a color coded chart of AAA through C/D.

I need this to also be part of the chart; or maybe a separate control that can be transformed and zoomed based on where the chart is at.

If I’m zoomed in on the 0.15% – 0.50% then the B/BB/BBB should also be zoomed in to match the current scale of the chart.

Ideas on how to handle this. I’ve tagged this question as Android, but I will also need a solution for iOS.

Version
3
Images
  • You must to post comments
0
0

Hi Nathanael,

Unfortunately we don’t support anything like this out of the box.

I would suggest to create a custom View, because that behavior which you describe looks complex. Then you can setVisibleRangeChangeListener() for right yAxis to get notifications when VisibleRange changes and based on newRange value update your custom View to match scale of axis. As for adding it into the chart – it can be difficult to do, because this would require customization of chart’s layout ( e.g. you can add it directly into the chart or you can add it into axis ) and it would be more difficult to do than place chart and your custom view into some common parent like LinearLayout. Are you sure that you need this?

Best regards,
Yura

  • You must to post comments
0
0

Hi Nathanael,

I created some example based on our Line Chart example to show how you can place custom View inside chart which uses custom LayoutManager for chart and VisibleRangeChangeListener. I didn’t write any logic for custom View except some horizontal lines, because I don’t know about your requirements:

public class LineChartFragment extends ExampleBaseFragment {

@BindView(R.id.chart)
SciChartSurface surface;

@Override
protected int getLayoutId() {
    return R.layout.example_single_chart_fragment;
}

@Override
protected void initExample() {
    final IAxis xAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).withVisibleRange(1.1, 2.7).build();
    final IAxis yAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).build();

    final DoubleSeries fourierSeries = DataManager.getInstance().getFourierSeries(1.0, 0.1, 5000);
    final IXyDataSeries<Double, Double> dataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
    dataSeries.append(fourierSeries.xValues, fourierSeries.yValues);

    final FastLineRenderableSeries rSeries = sciChartBuilder.newLineSeries().withDataSeries(dataSeries).withStrokeStyle(0xFF279B27, 1f, true).build();

    UpdateSuspender.using(surface, new Runnable() {
        @Override
        public void run() {
            Collections.addAll(surface.getXAxes(), xAxis);
            Collections.addAll(surface.getYAxes(), yAxis);
            Collections.addAll(surface.getRenderableSeries(), rSeries);
            Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().build());

            // create custom view and define how much space to reserve for it drawing
            final Context context = getActivity();
            final CustomView customView = new CustomView(context);
            final int size = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, context.getResources().getDisplayMetrics());

            // subscribe to changes of VisibleRange
            yAxis.setVisibleRangeChangeListener(customView);

            // add custom view into chart and use custom layout with new logic to correctly perform layout
            surface.setLayoutManager(new CustomLayoutManager(customView, size));
            surface.addView(customView);
        }
    });
}

class CustomLayoutManager extends DefaultLayoutManager {
    private final CustomView customView;
    private final int customViewWidth;

    public CustomLayoutManager(CustomView customView, int customViewWidth) {
        super(new LeftAlignmentOuterAxisLayoutStrategy(), new RightAlignmentOuterAxisLayoutStrategy(), new TopAlignmentOuterAxisLayoutStrategy(), new BottomAlignmentOuterAxisLayoutStrategy(),
                new LeftAlignmentInnerAxisLayoutStrategy(), new RightAlignmentInnerAxisLayoutStrategy(), new TopAlignmentInnerAxisLayoutStrategy(), new BottomAlignmentInnerAxisLayoutStrategy());

        this.customView = customView;
        this.customViewWidth = customViewWidth;
    }

    @Override
    public Size onLayoutChart(int width, int height) {
        // reserve some space for custom view on right side
        final int newWidth = width - customViewWidth;
        final Size size = super.onLayoutChart(newWidth, height);

        // set layout rect for custom view
        customView.layoutArea(newWidth , 0, width, size.height);

        return size;
    }
}

class CustomView extends View implements ILayoutable, VisibleRangeChangeListener {
    private final Rect layoutRect = new Rect();

    private final Paint paint = new Paint();

    private final FloatValues coordsToDraw = new FloatValues();

    private final Runnable requestLayoutRunnable = new Dispatcher.RequestLayoutRunnable(this);
    public CustomView(Context context) {
        super(context);

        paint.setColor(Color.RED);
        paint.setStrokeWidth(4f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // draw stub data as horizontal lines
        final float width = getWidth();
        synchronized (coordsToDraw) {
            for (int i = 0; i < coordsToDraw.size(); i++) {
                final float yCoord = coordsToDraw.get(i);
                canvas.drawLine(0f, yCoord, width, yCoord, paint);
            }
        }
    }

    @Override
    public void layoutArea(int left, int top, int right, int bottom) {
        if(layoutRect.left != left || layoutRect.top != top || layoutRect.right != right || layoutRect.bottom != bottom) {
            layoutRect.set(left, top, right, bottom);
            post(requestLayoutRunnable);
        }
    }

    @Override
    public final Rect getLayoutRect() {
        return layoutRect;
    }

    @Override
    public final int getLayoutWidth() {
        return layoutRect.width();
    }

    @Override
    public final int getLayoutHeight() {
        return layoutRect.height();
    }

    @Override
    public void onVisibleRangeChanged(IAxisCore axis, IRange oldRange, IRange newRange, boolean isAnimating) {
        final ICoordinateCalculator coordCalc = axis.getCurrentCoordinateCalculator();

        final double min = coordCalc.getMinAsDouble();
        final double max = coordCalc.getMaxAsDouble();
        final double step = (max - min) / 6;

        // generate some stub data to draw at
        synchronized (coordsToDraw) {
            coordsToDraw.clear();

            double current = DoubleUtil.roundDown(min, 1);
            while (current <= max) {
                coordsToDraw.add(coordCalc.getCoordinate(current));
                current += step;
            }
        }
        postInvalidate();
    }
}
}

Hope this will help you!

Best regards,
Yura

Images
  • You must to post comments
0
0

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

  • Yura Khariton
    The example which I provided isn’t fully functional ( it’s just a stub, because I don’t know all your requirements ). It just demonstrates how to place custom View into chart like on your screenshot and listen to VisibleRange changes. Regarding your question about scale – I don’t understand what this means. Can you provide more information about this?
  • Yura Khariton
    Regarding stack overflow – you should never change VisibleRange from inside VisibleRangeChangeListener because this will lead to another call of listener which will lead to recursive calls. If you want to discard some VisibleRange values before applying then you need to create custom axis and override isValidVisibleRange() and return false when value isn’t valid and should be discarded. Also you can override coerceVisibleRange() and adjust VisibleRange if it’s invalid
  • Nathanael Anderson
    On the first issue; Scale — I mean if I have the image all the way zoomed out so the range of numbers is 1-10. Lets pretend this is scale 1.0. If I zoom in and only the numbers 5-10 are visible The “scale” of the chart is “2” times normal. Is their a way to get that “scale” value; i.e. what everything is being scaled by when it is drawing it? Or is the only thing available is the number range visible?
  • Nathanael Anderson
    On the second issue (Stack Overflow) the code I use that crashes is from the documentation that I linked too. This is the demo your doc’s give on how to adjust the size dynamically. So then the docs will be needed to be updated, because as it stands right now; it gives a stack overflow if I follow the example… https://www.scichart.com/documentation/android/current/webframe.html#Axis%20Ranging%20-%20Restricting%20VisibleRange.html (Advanced VisibleRange Clipping)
  • 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