Skip to content

Commit 1bd4d53

Browse files
antichaosdbantichaosdb
committed
2 parents 1dfdf48 + 8acaf8a commit 1bd4d53

12 files changed

Lines changed: 377 additions & 2 deletions

File tree

‎Examples/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"react-router-dom": "^5.2.0",
3838
"react-transition-group": "^4.4.1",
3939
"request": "^2.88.2",
40-
"scichart": "^2.0.0-beta.2084",
40+
"scichart": "^2.0.0-beta.2102",
4141
"socket.io": "^3.0.4"
4242
},
4343
"devDependencies": {

‎Sandbox/CustomerExamples/DraggingSeries/Readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Then visit https://localhost:8080 in your web browser!
1313

1414
## What it does
1515

16-
This example adds cusotm DragSeriesModifier to the chart.
16+
This example adds custom DragSeriesModifier to the chart.
1717

1818
![Dragging Series Demo in SciChart.js](img/dragging_series.png)
1919

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/.prettierrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"jsxSingleQuote": true,
4+
"tabWidth": 4,
5+
"printWidth": 120
6+
}

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Stacked Column Chart with Threshold Demo
2+
3+
This example showcases how to create a stacked column chart with threshold
4+
5+
## Running the Example
6+
7+
Open this folder in terminal and run the following commands:
8+
9+
* `npm install`
10+
* `npm start`
11+
12+
Then visit https://localhost:8080 in your web browser!
13+
14+
![Stacked Column Chart with Threshold Demo](img/chart-with-threshold.png)

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/img/chart-with-threshold.png‎

663 KB
Loading

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "stacked-column-chart-with-threshold",
3+
"version": "1.0.0",
4+
"description": "Stacked Column Chart with Threshold Demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack",
8+
"start": "webpack-dev-server"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"scichart": "^2.0.0-beta.2100"
15+
},
16+
"devDependencies": {
17+
"copy-webpack-plugin": "^9.0.1",
18+
"prettier": "^2.4.1",
19+
"ts-loader": "^9.2.6",
20+
"webpack": "^5.59.0",
21+
"webpack-cli": "^4.9.1",
22+
"webpack-dev-server": "^4.3.1"
23+
}
24+
}

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/src/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<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>Stacked Column Chart with Threshold Demo</title>
6+
<script async type="text/javascript" src="bundle.js"></script>
7+
<style>
8+
body {
9+
font-family: "Arial";
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>Stacked Column Chart with Threshold Demo</h1>
15+
<!-- the Div where the SciChartSurface will reside -->
16+
<div id="scichart-root" style="width: 800px; height: 600px"></div>
17+
</body>
18+
</html>

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/src/index.ts‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
2+
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
3+
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
4+
import { MouseWheelZoomModifier } from 'scichart/Charting/ChartModifiers/MouseWheelZoomModifier';
5+
import { ZoomExtentsModifier } from 'scichart/Charting/ChartModifiers/ZoomExtentsModifier';
6+
import { NumberRange } from 'scichart/Core/NumberRange';
7+
import { ZoomPanModifier } from 'scichart/Charting/ChartModifiers/ZoomPanModifier';
8+
import { StackedColumnRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/StackedColumnRenderableSeries';
9+
import { StackedColumnCollection } from 'scichart/Charting/Visuals/RenderableSeries/StackedColumnCollection';
10+
import { RolloverModifier } from 'scichart/Charting/ChartModifiers/RolloverModifier';
11+
12+
const xValues = [1992, 1993, 1994, 1995, 1996];
13+
const tomatoesData1 = [7, 30, 27, 24, 21];
14+
const cucumberData2 = [16, 10, 9, 8, 22];
15+
const pepperData3 = [7, 24, 21, 11, 19];
16+
17+
const THRESHOLD = 10;
18+
19+
async function initSciChart() {
20+
// LICENSING //
21+
// Set your license code here
22+
// You can get a trial license key from https://www.scichart.com/licensing-scichart-js/
23+
// Purchased license keys can be viewed at https://www.scichart.com/profile
24+
//
25+
// e.g.
26+
// SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");
27+
const { wasmContext, sciChartSurface } = await SciChartSurface.create('scichart-root');
28+
const xAxis = new NumericAxis(wasmContext);
29+
xAxis.labelProvider.precision = 0;
30+
sciChartSurface.xAxes.add(xAxis);
31+
const yAxis = new NumericAxis(wasmContext);
32+
yAxis.growBy = new NumberRange(0, 0.1);
33+
sciChartSurface.yAxes.add(yAxis);
34+
35+
const dataSeries1 = new XyDataSeries(wasmContext, { xValues, yValues: tomatoesData1, dataSeriesName: 'Tomato' });
36+
const dataSeries2 = new XyDataSeries(wasmContext, { xValues, yValues: cucumberData2, dataSeriesName: 'Cucumber' });
37+
const dataSeries3 = new XyDataSeries(wasmContext, { xValues, yValues: pepperData3, dataSeriesName: 'Pepper' });
38+
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
39+
rendSeries1.fill = '#dc443f';
40+
rendSeries1.stroke = 'black';
41+
rendSeries1.strokeThickness = 1;
42+
rendSeries1.dataSeries = dataSeries1;
43+
rendSeries1.rolloverModifierProps.markerColor = '#b83735';
44+
rendSeries1.rolloverModifierProps.tooltipColor = '#dc443f';
45+
rendSeries1.rolloverModifierProps.tooltipTextColor = '#fff';
46+
rendSeries1.stackedGroupId = 'one';
47+
48+
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
49+
rendSeries2.fill = '#aad34f';
50+
rendSeries2.stroke = 'black';
51+
rendSeries2.strokeThickness = 1;
52+
rendSeries2.dataSeries = dataSeries2;
53+
rendSeries2.rolloverModifierProps.markerColor = '#87a73e';
54+
rendSeries2.rolloverModifierProps.tooltipColor = '#aad34f';
55+
rendSeries2.rolloverModifierProps.tooltipTextColor = '#000';
56+
rendSeries2.stackedGroupId = 'two';
57+
58+
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
59+
rendSeries3.fill = '#8562b4';
60+
rendSeries3.stroke = 'black';
61+
rendSeries3.strokeThickness = 1;
62+
rendSeries3.dataSeries = dataSeries3;
63+
rendSeries3.rolloverModifierProps.markerColor = '#715195';
64+
rendSeries3.rolloverModifierProps.tooltipColor = '#8562b4';
65+
rendSeries3.rolloverModifierProps.tooltipTextColor = '#fff';
66+
rendSeries3.stackedGroupId = 'three';
67+
68+
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
69+
verticallyStackedColumnCollection.dataPointWidth = 0.5;
70+
verticallyStackedColumnCollection.zeroLineY = 0;
71+
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
72+
73+
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
74+
75+
// Collection for threshold
76+
const yValues0_1: number[] = [];
77+
for (let i = 0; i < xValues.length; i++) yValues0_1.push(tomatoesData1[i] > THRESHOLD ? tomatoesData1[i] : NaN);
78+
const dataSeries0_1 = new XyDataSeries(wasmContext, { xValues, yValues: yValues0_1, dataSeriesName: 'Threshold' });
79+
const rendSeries0_1 = new StackedColumnRenderableSeries(wasmContext, {
80+
fill: 'red',
81+
stroke: 'black',
82+
dataSeries: dataSeries0_1,
83+
stackedGroupId: '1'
84+
});
85+
86+
const yValues0_2: number[] = [];
87+
for (let i = 0; i < xValues.length; i++) yValues0_2.push(cucumberData2[i] > THRESHOLD ? cucumberData2[i] : NaN);
88+
const dataSeries0_2 = new XyDataSeries(wasmContext, { xValues, yValues: yValues0_2, dataSeriesName: 'Threshold' });
89+
const rendSeries0_2 = new StackedColumnRenderableSeries(wasmContext, {
90+
fill: 'red',
91+
stroke: 'black',
92+
dataSeries: dataSeries0_2,
93+
stackedGroupId: '2'
94+
});
95+
96+
const yValues0_3: number[] = [];
97+
for (let i = 0; i < xValues.length; i++) yValues0_3.push(pepperData3[i] > THRESHOLD ? pepperData3[i] : NaN);
98+
const dataSeries0_3 = new XyDataSeries(wasmContext, { xValues, yValues: yValues0_3, dataSeriesName: 'Threshold' });
99+
const rendSeries0_3 = new StackedColumnRenderableSeries(wasmContext, {
100+
fill: 'red',
101+
stroke: 'black',
102+
dataSeries: dataSeries0_3,
103+
stackedGroupId: '3'
104+
});
105+
const verticallyStackedColumnCollection0 = new StackedColumnCollection(wasmContext);
106+
verticallyStackedColumnCollection0.dataPointWidth = 0.5;
107+
verticallyStackedColumnCollection0.zeroLineY = THRESHOLD;
108+
verticallyStackedColumnCollection0.add(rendSeries0_1, rendSeries0_2, rendSeries0_3);
109+
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection0);
110+
111+
const rm = new RolloverModifier();
112+
// Exclude threshold series to hide tooltips
113+
rm.includeSeries(rendSeries0_1, false);
114+
rm.includeSeries(rendSeries0_2, false);
115+
rm.includeSeries(rendSeries0_3, false);
116+
117+
sciChartSurface.chartModifiers.add(
118+
new ZoomExtentsModifier(),
119+
new ZoomPanModifier(),
120+
new MouseWheelZoomModifier(),
121+
rm
122+
);
123+
}
124+
125+
initSciChart();

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/tsconfig.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "./build",
4+
"sourceMap": true,
5+
"strict": true,
6+
"noImplicitAny": true,
7+
"strictNullChecks": false,
8+
"strictFunctionTypes": true,
9+
"strictBindCallApply": true,
10+
"strictPropertyInitialization": false,
11+
"noImplicitThis": true,
12+
"alwaysStrict": true,
13+
"noUnusedLocals": false,
14+
"noUnusedParameters": false,
15+
"noImplicitReturns": true,
16+
"noFallthroughCasesInSwitch": true,
17+
"module": "commonjs",
18+
"target": "es6",
19+
"jsx": "react",
20+
"allowJs": true,
21+
"typeRoots": [
22+
"./src/types", "./node_modules/@types"],
23+
"esModuleInterop": false,
24+
"skipLibCheck": false,
25+
"forceConsistentCasingInFileNames": true
26+
},
27+
"include": [
28+
"src/**/*"
29+
],
30+
"exclude": [
31+
"node_modules"
32+
]
33+
}

‎Sandbox/CustomerExamples/StackedColumnChartWithThreshold/webpack.config.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const path = require("path");
2+
const CopyPlugin = require("copy-webpack-plugin");
3+
4+
module.exports = {
5+
mode: "production",
6+
entry: "./src/index.ts",
7+
performance: {
8+
hints: false
9+
},
10+
module: {
11+
rules: [
12+
{
13+
test: /\.tsx?$/,
14+
use: "ts-loader",
15+
exclude: /node_modules/
16+
},
17+
]
18+
},
19+
resolve: {
20+
extensions: [".js", ".ts"]
21+
},
22+
output: {
23+
filename: "bundle.js",
24+
path: path.resolve(__dirname, "build")
25+
},
26+
plugins: [
27+
new CopyPlugin({
28+
patterns: [
29+
{ from: "src/index.html", to: "" },
30+
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
31+
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
32+
]
33+
})
34+
]
35+
};

0 commit comments

Comments
 (0)