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

0
0

Hi all,

I have another question about SciChart.js, I hope someone can teach me.

First, please download this video

This chart in video is made by d3.js, I hope I can use SciChart.js to make the same features,
please watch from 7 second to the end, when I click the mouse and move to the right direction, then click mouse again,
the section from first click to the second click will make different color, someone can teach me how to do that

PS: English is not my mother language, I wish you all can understand what I mean, Please download the video and watch, thanks.

Version
0.2.6
0
0

Hi there,

We’ve created an example to demonstrate how to add a selection rectangle onto a chart using SciChart.js

The full example can be fetched from our GitHub repository.

enter image description here

How it works:

We’ve used the ChartModifierBase API (see ChartModifier documentation) to create a custom modifier – a behaviour which can be added to the chart. This listens to mouseDown, mouseMove and mouseUp events and places an Annotation (see Annotations Documentation) onto the chart.

When the user clicks mouseDown on the chart, we add a selection rectangle to the chart. When the user moves the mouse, the selection rectangle size and position is updated.

Nothing happens when the selection ends, the annotation disappears, but you can change the code to get the behaviour you want.

Note this example uses JavaScript but also TypeScript for the declaration of the custom modifier. perhaps the same thing could be achieved with JavaScript ES6 as well.

Does this help? Let me know if you require anything else!

Best regards,
Andrew

  • You must to post comments
0
0

Hi Andrew,

Thank you very much for your assistance, this is indeed the function I want.

But when I tried to import it into my project, it failed

I uploaded my code (not including node_moudules).

This is an ECG chart created with SciChart.js, there are six channels,
I hope that when the mouse is clicked and moved on each channel,
a block like the ( sample_picture.png ) file below will be added instead of disappearing,
and not all channels will be select,
and I can create multiple blocks in sequence.

I have used the panning function,
I don’t know if it’s because of this that the function of the “select range” conflicts because the mouse event is used at the same time.

Anyway, please tell me how to import my project, thank you very very much.

Best Regard.

Alec

Attachments
Images
  • Andrew Burnett-Thompson
    Hi Yen-Wen Wang, I think it is a conflict – I will take a look today. Best regards, Andrew
  • You must to post comments
0
0

Hi Yen-Wen Wang

I’ve made some modifications to your sample to include the RangeSelectionModifier.

enter image description here

What i’ve changed:

1/ added a dev dependency “ts-loader”: “^6.2.1” to package.json

2/ I added a section to webpack.config.js to load typescript files

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: [".js", ".ts"]
  },

3/ I added a tsconfig.json

    module.exports = {
      mode: "production",
      entry: "./src/index.js",
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/
          },
        ]
      },
      resolve: {
        extensions: [".js", ".{
  "compilerOptions": {
    "outDir": "./build",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "typeRoots": [
      "./src/types", "./node_modules/@types"],
    "esModuleInterop": false,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}
ts"]
      },

4/ I added the source-code for the RangeSelectionChartModifier.ts. This allows selection on the chart by pointing & clicking

import {ChartModifierBase2D} from "scichart/Charting/ChartModifiers/ChartModifierBase2D";
import {ModifierMouseArgs} from "scichart/Charting/ChartModifiers/ModifierMouseArgs";
import {Point} from "scichart/Core/Point";
import {BoxAnnotation} from "scichart/Charting/Visuals/Annotations/BoxAnnotation";
import {ECoordinateMode} from "scichart/Charting/Visuals/Annotations/AnnotationBase";

// Create a TypeScript class which inherits ChartModifierbase2D to insert into SciChartSurface.chartModifiers collection
export class RangeSelectionChartModifier extends ChartModifierBase2D {

    private startPoint: Point;
    private endPoint: Point;
    private readonly selectionAnnotation: BoxAnnotation;
    private isSelecting: boolean;

    constructor() {
        super();

        // Create an annotation with YCoordinateMode Relative, and Y1, Y2 = 0,1
        // This stretches the annotation to fit the viewport in the Y-direction
        // Below in modifierMouseMove we will be updating the annotation X-values as the mouse is moved.
        this.selectionAnnotation = new BoxAnnotation({
            yCoordinateMode: ECoordinateMode.Relative,
            y1: 0,
            y2: 1,
            xCoordinateMode: ECoordinateMode.Pixel,
            fill: "#ffffff33",
            strokeThickness: 0
        });
    }

    // Called when mouse-down on the chart
    public modifierMouseDown(args: ModifierMouseArgs): void{
        super.modifierMouseDown(args);
        this.startPoint = args.mousePoint;
        this.endPoint = args.mousePoint;

        this.selectionAnnotation.x1 = this.startPoint.x;
        this.selectionAnnotation.x2 = this.endPoint.x;
        this.isSelecting = true;

        this.parentSurface.annotations.add(this.selectionAnnotation);
    }

    // Called when mouse-move on the chart
    public modifierMouseMove(args: ModifierMouseArgs): void {
        super.modifierMouseMove(args);

        if (this.isSelecting) {
            this.endPoint = args.mousePoint;
            this.selectionAnnotation.x2 = this.endPoint.x;
        }
    }

    // Called when mouse-up on the chart
    public modifierMouseUp(args: ModifierMouseArgs) {
        super.modifierMouseUp(args);

        this.isSelecting = false;
        this.parentSurface.annotations.remove(this.selectionAnnotation);
    }
}

5/ I modified your index.js to add a RangeSelectionModifier.ts

const rangeSelectionModifier = new RangeSelectionChartModifier();
sciChartSurface.chartModifiers.add(rangeSelectionModifier);

6/ I added some new input checkboxes to allow you to enable/disable RangeSelectionModifier.ts

basically because RubberBandXyZoomModifier, RangeSelectionModifier and ZoomPanModifier all consume mouse events to operate, only one can be enabled at a time. You can enable them by setting ChartModifier.isEnabled = true/false.

Please let me know if this helps,

Best regards,
Andrew

  • YEN-WEN WANG
    Hi Andrew, Thank you for your help. This is the function I want. If there are any questions later, I will ask you again, thank you so much.
  • Andrew Burnett-Thompson
    Glad to be of help, and thank you for your feedback!
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.