Skip to content

Commit 90706bf

Browse files
klishevichklishevich
committed
chore(tutorials): update tutorial 3
1 parent 6d768d1 commit 90706bf

12 files changed

Lines changed: 5589 additions & 2053 deletions

File tree

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_2_Adding_Series_and_Data/step1/src/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,8 @@
1414
<body>
1515
<h1>Hello SciChart.js world!</h1>
1616
<p>
17-
In this example we add some line series to the chart, using
18-
FastLineRenderableSeries and XyDataSeries. The plot below has 100 series
19-
each with 10,000 points!
17+
In this example we add a line series to the chart, using
18+
FastLineRenderableSeries and XyDataSeries.
2019
</p>
2120
<!-- the Div where the SciChartSurface will reside -->
2221
<div id="scichart-root" style="width: 100%; height: 600px"></div>

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_2_Adding_Series_and_Data/step2/src/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ async function initSciChart() {
99
// Create the SciChartSurface in the div 'scichart-root'
1010
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
1111
// instance must be passed to other types that exist on the same surface.
12-
// #region ExampleA
1312
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
1413
"scichart-root"
1514
);

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_3_Add_Zoom_and_Pan_Behavior/step1/package-lock.json‎

Lines changed: 1436 additions & 1810 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_3_Add_Zoom_and_Pan_Behavior/step1/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "tutorial1",
2+
"name": "tutorial3",
33
"version": "1.0.0",
4-
"description": "First Tutorial with SciChart.js",
4+
"description": "Third Tutorial with SciChart.js",
55
"main": "index.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
@@ -11,12 +11,12 @@
1111
"author": "",
1212
"license": "MIT",
1313
"dependencies": {
14-
"scichart": "^3.4.662"
14+
"scichart": "^4.0.0-beta.734"
1515
},
1616
"devDependencies": {
17-
"copy-webpack-plugin": "^9.0.1",
18-
"webpack": "^5.58.2",
19-
"webpack-cli": "^4.9.0",
20-
"webpack-dev-server": "^4.3.1"
17+
"copy-webpack-plugin": "^13.0.0",
18+
"webpack": "^5.99.9",
19+
"webpack-cli": "^6.0.1",
20+
"webpack-dev-server": "^5.2.2"
2121
}
2222
}

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_3_Add_Zoom_and_Pan_Behavior/step1/src/index.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<html lang="en-us">
2-
<head>
3-
<meta charset="utf-8" />
4-
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
5-
<title>SciChart.js Tutorial 3</title>
6-
<script async type="text/javascript" src="bundle.js"></script>
7-
<style>
8-
body { font-family: 'Arial'}
9-
</style>
10-
</head>
11-
<body>
12-
<h1>Hello SciChart.js world!</h1>
13-
<p>In this example we add simple zoom and pan behaviour.
14-
Select the options below to enable different behaviours
15-
</p>
2+
<head>
3+
<meta charset="utf-8" />
4+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
5+
<link rel="icon" href="data:," />
6+
<title>SciChart.js Tutorial 3</title>
7+
<script async type="text/javascript" src="bundle.js"></script>
8+
<style>
9+
body {
10+
font-family: "Arial";
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<h1>Hello SciChart.js world!</h1>
16+
<p>In this example we add simple zoom and pan behaviour.</p>
1617

17-
<!-- #region ExampleA -->
18-
<!-- the Div where the SciChartSurface will reside -->
19-
<div id="scichart-root" style="height: 600px; width: 100%;"></div>
20-
<!-- #endregion -->
21-
</body>
18+
<!-- #region ExampleA -->
19+
<!-- the Div where the SciChartSurface will reside -->
20+
<div id="scichart-root" style="height: 600px; width: 100%"></div>
21+
<!-- #endregion -->
22+
</body>
2223
</html>

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_3_Add_Zoom_and_Pan_Behavior/step1/src/index.js‎

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,70 @@
11
import {
2-
SciChartSurface,
3-
NumericAxis,
4-
XyDataSeries,
5-
FastLineRenderableSeries,
6-
MouseWheelZoomModifier,
7-
RubberBandXyZoomModifier,
8-
ZoomPanModifier,
9-
ZoomExtentsModifier
2+
SciChartSurface,
3+
NumericAxis,
4+
XyDataSeries,
5+
FastLineRenderableSeries,
6+
MouseWheelZoomModifier,
7+
RubberBandXyZoomModifier,
8+
ZoomPanModifier,
9+
ZoomExtentsModifier,
10+
EExecuteOn,
11+
EModifierMouseArgKey,
1012
} from "scichart";
1113

1214
async function initSciChart() {
13-
// Create the SciChartSurface in the div 'scichart-root'
14-
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
15-
// instance must be passed to other types that exist on the same surface.
16-
const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");
17-
18-
// Create an X,Y Axis and add to the chart
19-
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
20-
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
21-
22-
// Create 100 dataseries, each with 10k points
23-
for (let seriesCount = 0; seriesCount < 100; seriesCount++) {
24-
const xyDataSeries = new XyDataSeries(wasmContext);
25-
26-
const opacity = (1 - ((seriesCount / 120))).toFixed(2);
27-
28-
// Populate with some data
29-
for(let i = 0; i < 10000; i++) {
30-
xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
31-
}
32-
33-
// Add and create a line series with this data to the chart
34-
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
35-
dataSeries: xyDataSeries,
36-
stroke: `rgba(176,196,222,${opacity})`,
37-
strokeThickness:2
38-
}));
39-
}
15+
// Create the SciChartSurface in the div 'scichart-root'
16+
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
17+
// instance must be passed to other types that exist on the same surface.
18+
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
19+
"scichart-root"
20+
);
21+
22+
// Create an X,Y Axis and add to the chart
23+
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
24+
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
25+
26+
// Create 100 dataseries, each with 10k points
27+
for (let seriesCount = 0; seriesCount < 100; seriesCount++) {
28+
const xyDataSeries = new XyDataSeries(wasmContext);
4029

41-
// #region ExampleA
30+
const opacity = (1 - seriesCount / 120).toFixed(2);
31+
32+
// Populate with some data
33+
for (let i = 0; i < 10000; i++) {
34+
xyDataSeries.append(
35+
i,
36+
Math.sin(i * 0.01) * Math.exp(i * (0.00001 * (seriesCount + 1)))
37+
);
38+
}
4239

43-
// Ensure to import types e.g.
44-
// import { MouseWheelZoomModifier, ZoomPanModifier } from "scichart";
40+
// Add and create a line series with this data to the chart
41+
sciChartSurface.renderableSeries.add(
42+
new FastLineRenderableSeries(wasmContext, {
43+
dataSeries: xyDataSeries,
44+
stroke: `rgba(176,196,222,${opacity})`,
45+
strokeThickness: 2,
46+
})
47+
);
48+
}
4549

46-
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
47-
const zoomPanModifier = new ZoomPanModifier();
48-
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
49-
const zoomExtentsModifier = new ZoomExtentsModifier();
50+
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
51+
// For zoomPanModifier we change execute condition not to conflict with rubberBandZoomModifier
52+
const zoomPanModifier = new ZoomPanModifier({
53+
executeCondition: {
54+
button: EExecuteOn.MouseRightButton,
55+
key: EModifierMouseArgKey.None,
56+
},
57+
});
58+
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
59+
const zoomExtentsModifier = new ZoomExtentsModifier();
5060

51-
// Adds zoom, pan behaviours to the chart
52-
// Mousewheel zoom, panning and double-click to zoom to fit
61+
// Adds zoom, pan behaviours to the chart
62+
// Mousewheel zoom, panning and double-click to zoom to fit
5363

54-
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
55-
sciChartSurface.chartModifiers.add(zoomPanModifier);
56-
sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
57-
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
58-
// #endregion
64+
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
65+
sciChartSurface.chartModifiers.add(zoomPanModifier);
66+
sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
67+
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
5968
}
6069

6170
initSciChart();

‎Tutorials/2D_Chart_Tutorials_JavaScript/Tutorial_3_Add_Zoom_and_Pan_Behavior/step1/webpack.config.js‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,27 @@ const CopyPlugin = require("copy-webpack-plugin");
33
const webpack = require("webpack");
44

55
module.exports = {
6-
mode: "production",
7-
entry: "./src/index.js",
8-
performance: {
9-
hints: false
10-
},
11-
module: {
12-
rules: []
13-
},
14-
resolve: {
15-
extensions: [".js"]
16-
},
17-
output: {
18-
filename: "bundle.js",
19-
path: path.resolve(__dirname, "build")
20-
},
21-
plugins: [
22-
new CopyPlugin({
23-
patterns: [
24-
{ from: "src/index.html", to: "" },
25-
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
26-
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
27-
]
28-
})
29-
]
6+
mode: "production",
7+
entry: "./src/index.js",
8+
performance: {
9+
hints: false,
10+
},
11+
module: {
12+
rules: [],
13+
},
14+
resolve: {
15+
extensions: [".js"],
16+
},
17+
output: {
18+
filename: "bundle.js",
19+
path: path.resolve(__dirname, "build"),
20+
},
21+
plugins: [
22+
new CopyPlugin({
23+
patterns: [
24+
{ from: "src/index.html", to: "" },
25+
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
26+
],
27+
}),
28+
],
3029
};

0 commit comments

Comments
 (0)