Pre loader

SciChartOverview in SciChart JS

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

It’s possible to implements something like WPF ‘s SciChartOverview in SciChart JS ?

Version
1.1.1368
  • You must to post comments
0
0

Hi Gustavo,

Good news! We’ve put this on the roadmap for SciChart.js v2, ETA end of summer 2021. We already have a working prototype using the annotations API.

enter image description here

Obviously this needs styling and some behavioural improvements but proves the concept.

If you’re interested in how we do this now, see the code sample below. We will be developing this to make it look & behave more like the SciChartOverview control in our Windows and Mobile charts.

Best regards
Andrew

drawExample.ts

import { XyDataSeries } from "../../../../../../../src/Charting/Model/XyDataSeries";
import { SciChartJSDarkTheme } from "../../../../../../../src/Charting/Themes/SciChartJSDarkTheme";
import { ECoordinateMode } from "../../../../../../../src/Charting/Visuals/Annotations/AnnotationBase";
import { BoxAnnotation } from "../../../../../../../src/Charting/Visuals/Annotations/BoxAnnotation";
import { NumericAxis } from "../../../../../../../src/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "../../../../../../../src/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { SciChartSurface } from "../../../../../../../src/Charting/Visuals/SciChartSurface";
import { NumberRange } from "../../../../../../../src/Core/NumberRange";
import { EAutoRange } from "../../../../../../../src/types/AutoRange";
import { EAxisAlignment } from "../../../../../../../src/types/AxisAlignment";
import { EXyDirection } from "../../../../../../../src/types/XyDirection";

export const divElementId = "chart";
export const divOverviewId = "overview";

export const drawExample = async () => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, 3, 2);
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());
    const xAxis = new NumericAxis(wasmContext, {
        axisAlignment: EAxisAlignment.Top,
        visibleRange: new NumberRange(0, 100000),
        autoRange: EAutoRange.Never
    });
    xAxis.labelProvider.precision = 0;
    sciChartSurface.xAxes.add(xAxis);
    const yAxis = new NumericAxis(wasmContext, {
        axisAlignment: EAxisAlignment.Left,
        visibleRange: new NumberRange(-5000, 5000),
        autoRange: EAutoRange.Always
    });
    yAxis.labelProvider.precision = 0;
    sciChartSurface.yAxes.add(yAxis);

    const dataSeries = new XyDataSeries(wasmContext);
    const rendSeries = new FastLineRenderableSeries(wasmContext, { dataSeries, strokeThickness: 2 });
    sciChartSurface.renderableSeries.add(rendSeries);
    rendSeries.stroke = "#99EE99FF";

    const POINTS = 1000000;
    const xValues = new Array(POINTS);
    const yValues = new Array(POINTS);
    let prevYValue = 0;
    for (let i = 0; i < POINTS; i++) {
        const curYValue = Math.random() * 10 - 5;

        xValues[i] = i;
        yValues[i] = prevYValue + curYValue;

        prevYValue += curYValue;
    }

    dataSeries.appendRange(xValues, yValues);

    const drawOverview = async (dataSeries: XyDataSeries) => {
        const { wasmContext, sciChartSurface } = await SciChartSurface.create(divOverviewId, 6, 1);
        sciChartSurface.applyTheme(new SciChartJSDarkTheme());
        const xAxis = new NumericAxis(wasmContext, {
            axisAlignment: EAxisAlignment.Top,
            visibleRange: new NumberRange(0, 1000000),
            autoRange: EAutoRange.Never
        });
        xAxis.labelProvider.precision = 0;
        sciChartSurface.xAxes.add(xAxis);
        const yAxis = new NumericAxis(wasmContext, {
            axisAlignment: EAxisAlignment.Left,
            visibleRange: new NumberRange(-2000, 2000),
            autoRange: EAutoRange.Once
        });
        yAxis.labelProvider.precision = 0;
        sciChartSurface.yAxes.add(yAxis);

        const rendSeries = new FastLineRenderableSeries(wasmContext, { dataSeries, strokeThickness: 2 });
        sciChartSurface.renderableSeries.add(rendSeries);
        rendSeries.stroke = "#99EE99FF";


        return sciChartSurface;
    };
    const overViewSurface = await drawOverview(dataSeries);
    const dragBox = new BoxAnnotation({
        strokeThickness: 0,
        fill: "#80fff910",
        x1: 0,
        x2: 100000,
        y1: 0,
        y2: 1,
        isEditable: true,
        resizeDirections: EXyDirection.XDirection,
        xCoordinateMode: ECoordinateMode.DataValue,
        yCoordinateMode: ECoordinateMode.Relative,
        onDrag: (args) => { xAxis.visibleRange = new NumberRange(dragBox.x1, dragBox.x2);}
    });
    overViewSurface.annotations.add(dragBox);

    overViewSurface.zoomExtents();


    return { wasmContext, sciChartSurface };
};

Index.tsx

import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import FormControl from "@material-ui/core/FormControl";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import * as React from "react";
import { divElementId, divOverviewId, drawExample } from "./drawExample";


export default function Overview() {

    React.useEffect(() => {
        drawExample();
    }, []);

    return (
        <div>
            <Typography variant="h4" gutterBottom>
                Overview Control
            </Typography>
            <div style={{ marginBottom: 20 }}>
                <Typography variant="body1" style={{ color: "red" }}></Typography>
            </div>
            <div style={{ display: "flex", maxWidth: 800 }}>
                <div id={divElementId} style={{ flexBasis: 400, flexGrow: 1, flexShrink: 1 }} />
            </div>
            <div style={{ display: "flex", maxWidth: 800 }}>
                <div id={divOverviewId} style={{ flexBasis: 400, flexGrow: 1, flexShrink: 1 }} />
            </div>
        </div>
    );
}
  • You must to post comments
Showing 1 result
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