Skip to content

Commit 9d0537b

Browse files
klishevichklishevich
committed
feat(sandbox): add simple chart demo to use in npm readme
1 parent 572ba13 commit 9d0537b

File tree

10 files changed

+193
-30
lines changed

10 files changed

+193
-30
lines changed

‎Sandbox/demo-browser-global-module/README.md‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# SciChart.js as a Browser Global Module Boilerplate App
1+
# SciChart.js as a Browser Global Module
22

33
Please note to use scichart.js you need to have a server to serve html. Just opening a html file will produce an error "Access to XMLHttpRequest from origin 'null' has been blocked by CORS policy". This happens because to load data XMLHttpRequest is used.
44

@@ -7,17 +7,22 @@ Please note to use scichart.js you need to have a server to serve html. Just ope
77
* `npm install`
88
* `npm start`
99

10+
![Annotations Demo](img/line-chart.png)
11+
1012
## How to add scichart.browser.js to your project
1113

12-
1. Add script pointing to a specific version into the **head** section of your html file. For instance to add version `2.0.2115` add this script:
14+
1. Add script pointing to a specific version into the **head** section of your html file. For instance to add version `2.1.2261` add this script:
1315
```html
14-
<script src="https://cdn.jsdelivr.net/npm/scichart@2.0.2115/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
16+
<script src="https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
1517
```
16-
2. Configure SciChartSurface to download .data and .wasm files from the CDN.
18+
2. Configure SciChartSurface to download .data and .wasm files from the CDN. Library versions in the script and in the configure method must be the same!
1719
```typescript
1820
SciChart.SciChartSurface.configure({
19-
dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.0.2115/_wasm/scichart2d.data",
20-
wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.0.2115/_wasm/scichart2d.wasm"
21+
dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.data",
22+
wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.wasm"
2123
});
2224
```
2325
3. Create a chart
26+
27+
4. Serve the html file to get this result
28+

‎Sandbox/demo-browser-global-module/img/line-chart.png‎

672 KB
Loading

‎Sandbox/demo-browser-global-module/src/client/index.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<!-- Required meta tags -->
54
<meta charset="utf-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
<!-- Include SciChart.js -->
87
<script
98
src="https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart.browser.js"
109
crossorigin="anonymous"
1110
></script>
11+
<script src="scichart-example.js" defer></script>
1212
<title>Hello, SciChart.js world!</title>
1313
</head>
1414
<body>
15-
<h1>Hello, SciChart.js world!</h1>
16-
<p>Note, this is a work in progress! Debugging the scichart.js bundle</p>
17-
1815
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
19-
20-
<script>
21-
async function initSciChart() {
22-
// In order to load data file from the CDN we need to set dataUrl
23-
SciChart.SciChartSurface.configure({
24-
dataUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.data",
25-
wasmUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.wasm"
26-
});
27-
await SciChart.chartBuilder.buildChart("scichart-root", {
28-
series: {
29-
type: "LineSeries", options: { stroke: "steelblue" },
30-
xyData: {
31-
xValues: [1, 2, 5, 8, 10],
32-
yValues: [3, 1, 7, 5, 8]
33-
}}
34-
});
35-
}
36-
37-
initSciChart();
38-
</script>
3916
</body>
4017
</html>

‎Sandbox/demo-browser-global-module/src/client/scichart-example.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
async function initSciChart() {
2+
// In order to load data file from the CDN we need to set dataUrl
3+
SciChart.SciChartSurface.configure({
4+
dataUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.data",
5+
wasmUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.wasm"
6+
});
7+
await SciChart.chartBuilder.buildChart("scichart-root", {
8+
series: {
9+
type: "LineSeries",
10+
options: { stroke: "steelblue" },
11+
xyData: {
12+
xValues: [1, 2, 5, 8, 10],
13+
yValues: [3, 1, 7, 5, 8]
14+
}}
15+
});
16+
}
17+
18+
initSciChart();

‎Sandbox/demo-simple-chart/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Simple Chart with Webpack and NPM
2+
3+
This is the simplest project using SciChart.js as npm module and Webpack.
4+
5+
## How to run the project
6+
7+
* `npm install`
8+
* `npm start`
9+
10+
![Annotations Demo](img/line-chart.png)
11+
12+
## Description
13+
14+
### webpack.config.js
15+
16+
Use CopyPlugin to copy wasm and data files and serve them by webpack-dev-server. SciChart.js uses WebAssembly and those files **scichart2d.data**, **scichart2d.wasm** must be loaded.
17+
18+
```javascript
19+
const path = require('path');
20+
const CopyPlugin = require("copy-webpack-plugin");
21+
22+
module.exports = {
23+
mode: 'development',
24+
entry: "./src/index.js",
25+
performance: {
26+
hints: false
27+
},
28+
output: {
29+
path: path.resolve(__dirname, 'build'),
30+
filename: 'bundle.js',
31+
},
32+
plugins: [
33+
new CopyPlugin({
34+
patterns: [
35+
{ from: "src/index.html", to: "" },
36+
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
37+
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
38+
]
39+
})
40+
]
41+
};
42+
```
43+
44+
### SciChartSurface.configure
45+
46+
You may need this to configure from where wasm and data files are served, update `src/index.js` file if needed
47+
48+
```javascript
49+
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
50+
51+
// call this before SciChartSurface.create()
52+
SciChart.SciChartSurface.configure({ dataUrl: "/custom/scichart2d.data", wasmUrl: "/other/scichart2d.wasm" });
53+
```
54+
55+
### Chart div element
56+
57+
If you call `SciChartSurface.create("scichart-root")` an element with Id "scichart-root" must be present.
58+
59+
```html
60+
<html lang="en-us">
61+
<head>
62+
<meta charset="utf-8" />
63+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
64+
<title>SciChart.js Tutorial 1</title>
65+
<script async type="text/javascript" src="bundle.js"></script>
66+
</head>
67+
<body>
68+
<!-- the Div where the SciChartSurface will reside -->
69+
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
70+
</body>
71+
</html>
72+
```

‎Sandbox/demo-simple-chart/img/line-chart.png‎

672 KB
Loading

‎Sandbox/demo-simple-chart/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "demo-simple-chart",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack serve"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"copy-webpack-plugin": "^10.2.4",
14+
"webpack": "^5.68.0",
15+
"webpack-cli": "^4.9.2",
16+
"webpack-dev-server": "^4.7.3"
17+
},
18+
"dependencies": {
19+
"scichart": "^2.1.2261"
20+
}
21+
}

‎Sandbox/demo-simple-chart/src/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>SciChart.js Tutorial 1</title>
6+
<script async type="text/javascript" src="bundle.js"></script>
7+
</head>
8+
<body>
9+
<h1>Hello SciChart.js world!</h1>
10+
<!-- the Div where the SciChartSurface will reside -->
11+
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
12+
</body>
13+
</html>

‎Sandbox/demo-simple-chart/src/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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 { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
5+
6+
// You may need this to configure from where wasm and data files are served
7+
// SciChart.SciChartSurface.configure({ dataUrl: "/custom/scichart2d.data" wasmUrl: "/other/scichart2d.wasm" });
8+
9+
async function initSciChart() {
10+
// Create the SciChartSurface in the div 'scichart-root'
11+
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
12+
// instance must be passed to other types that exist on the same surface.
13+
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
14+
"scichart-root"
15+
);
16+
17+
// Create an X,Y Axis and add to the chart
18+
const xAxis = new NumericAxis(wasmContext);
19+
const yAxis = new NumericAxis(wasmContext);
20+
sciChartSurface.xAxes.add(xAxis);
21+
sciChartSurface.yAxes.add(yAxis);
22+
23+
const dataSeries = new XyDataSeries(wasmContext, {
24+
xValues: [1, 2, 5, 8, 10],
25+
yValues: [3, 1, 7, 5, 8]
26+
});
27+
const renderableSeries = new FastLineRenderableSeries(wasmContext, {
28+
dataSeries,
29+
stroke: "steelblue"
30+
});
31+
sciChartSurface.renderableSeries.add(renderableSeries);
32+
}
33+
34+
initSciChart();

‎Sandbox/demo-simple-chart/webpack.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const path = require('path');
2+
const CopyPlugin = require("copy-webpack-plugin");
3+
4+
module.exports = {
5+
mode: 'development',
6+
entry: "./src/index.js",
7+
performance: {
8+
hints: false
9+
},
10+
output: {
11+
path: path.resolve(__dirname, 'build'),
12+
filename: 'bundle.js',
13+
},
14+
plugins: [
15+
new CopyPlugin({
16+
patterns: [
17+
{ from: "src/index.html", to: "" },
18+
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
19+
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
20+
]
21+
})
22+
]
23+
};

0 commit comments

Comments
 (0)