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

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.