scichart 3.0.0-beta.263 → 3.0.269
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Charting/Drawing/FontKey.d.ts +0 -0
- package/Charting/Drawing/FontKey.js +0 -0
- package/Charting/Drawing/WebGlRenderContext2D.d.ts +6 -2
- package/Charting/Drawing/WebGlRenderContext2D.js +16 -7
- package/Charting/LayoutManager/BottomAlignedInnerAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/BottomAlignedOuterAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/LayoutManager.js +32 -30
- package/Charting/LayoutManager/LeftAlignedInnerAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/LeftAlignedOuterAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/RightAlignedInnerAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/RightAlignedOuterAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/TopAlignedInnerAxisLayoutStrategy.js +2 -0
- package/Charting/LayoutManager/TopAlignedOuterAxisLayoutStrategy.js +2 -0
- package/Charting/Visuals/Helpers/NativeObject.d.ts +6 -0
- package/Charting/Visuals/Helpers/NativeObject.js +21 -4
- package/Charting/Visuals/SciChartDefaults.d.ts +4 -0
- package/Charting/Visuals/SciChartDefaults.js +4 -0
- package/Core/BuildStamp.d.ts +1 -1
- package/Core/BuildStamp.js +2 -2
- package/README.md +61 -59
- package/_wasm/scichart.browser.js +1 -1
- package/_wasm/scichart2d.js +16 -16
- package/_wasm/scichart2d.wasm +0 -0
- package/_wasm/scichart3d.js +7 -7
- package/_wasm/scichart3d.wasm +0 -0
- package/package.json +1 -1
- package/types/TSciChart.d.ts +1 -0
|
File without changes
|
|
File without changes
|
|
@@ -124,8 +124,12 @@ export declare class WebGlRenderContext2D implements IRenderContext2D {
|
|
|
124
124
|
*/
|
|
125
125
|
drawRect(rect: Rect, viewRect: Rect, strokePen?: IPen2D, fillBrush?: IBrush2D): void;
|
|
126
126
|
printBlendMode(): void;
|
|
127
|
-
/**
|
|
128
|
-
|
|
127
|
+
/**
|
|
128
|
+
* Get a native font. Fonts are cached and shared within webassembly so there is no need to cache them in JS.
|
|
129
|
+
* Set advanced: true if you are planning to rotate or scale the text.
|
|
130
|
+
* Set drawEarly: true if you are planning to call font.End() early. Otherwise all native text will be drawn at the end of the render cycle.
|
|
131
|
+
*/
|
|
132
|
+
getFont(labelStyle: TTextStyle, advanced?: boolean, drawEarly?: boolean): SCRTFont;
|
|
129
133
|
/** End all fonts, causing text to be drawn */
|
|
130
134
|
endFonts(force?: boolean): void;
|
|
131
135
|
}
|
|
@@ -291,12 +291,16 @@ var WebGlRenderContext2D = /** @class */ (function () {
|
|
|
291
291
|
throw new Error("Unhandled blendmode ");
|
|
292
292
|
}
|
|
293
293
|
};
|
|
294
|
-
/**
|
|
295
|
-
|
|
296
|
-
|
|
294
|
+
/**
|
|
295
|
+
* Get a native font. Fonts are cached and shared within webassembly so there is no need to cache them in JS.
|
|
296
|
+
* Set advanced: true if you are planning to rotate or scale the text.
|
|
297
|
+
* Set drawEarly: true if you are planning to call font.End() early. Otherwise all native text will be drawn at the end of the render cycle.
|
|
298
|
+
*/
|
|
299
|
+
WebGlRenderContext2D.prototype.getFont = function (labelStyle, advanced, drawEarly) {
|
|
300
|
+
var _this = this;
|
|
297
301
|
if (advanced === void 0) { advanced = false; }
|
|
298
|
-
if (
|
|
299
|
-
var fontKey = (0, NativeObject_1.getFontKey)(this.webAssemblyContext, labelStyle, advanced,
|
|
302
|
+
if (drawEarly === void 0) { drawEarly = false; }
|
|
303
|
+
var fontKey = (0, NativeObject_1.getFontKey)(this.webAssemblyContext, labelStyle, advanced, drawEarly);
|
|
300
304
|
var nativeContext = this.getNativeContext();
|
|
301
305
|
var nativeFont = nativeContext.AquireFont(fontKey);
|
|
302
306
|
if (!nativeFont) {
|
|
@@ -309,10 +313,15 @@ var WebGlRenderContext2D = /** @class */ (function () {
|
|
|
309
313
|
}
|
|
310
314
|
var currentFontName = nativeFont.GetFaceName();
|
|
311
315
|
if (currentFontName === "SCRT_Loading") {
|
|
312
|
-
|
|
316
|
+
setTimeout(function () { var _a; return _this.webAssemblyContext.TSRRequestCanvasDraw((_a = _this.canvasId) !== null && _a !== void 0 ? _a : "undefinedCanvasId"); }, 100);
|
|
313
317
|
}
|
|
314
318
|
else if (currentFontName !== fontKey.m_strName) {
|
|
315
|
-
|
|
319
|
+
// @ts-ignore
|
|
320
|
+
if (!fontKey.warned) {
|
|
321
|
+
console.warn("Font ".concat(fontKey.m_strName, " could not be found on the server and has not been registered. Falling back to Arial.\n Use await scichartSurface.registerFont if you need to load the font from a remote url"));
|
|
322
|
+
// @ts-ignore
|
|
323
|
+
fontKey.warned = true;
|
|
324
|
+
}
|
|
316
325
|
}
|
|
317
326
|
return nativeFont;
|
|
318
327
|
};
|
|
@@ -41,6 +41,8 @@ var BottomAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
41
41
|
chartLayoutState.bottomInnerAreaSize = Math.max(chartLayoutState.bottomInnerAreaSize, requiredSize);
|
|
42
42
|
};
|
|
43
43
|
BottomAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
44
|
+
// Set axisLength to default value which is seriesViewRect.width
|
|
45
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
44
46
|
if (axes.length === 0) {
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
@@ -43,6 +43,8 @@ var BottomAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
43
43
|
chartLayoutState.bottomOuterAreaSize = Math.max(chartLayoutState.bottomOuterAreaSize, requiredSize);
|
|
44
44
|
};
|
|
45
45
|
BottomAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
46
|
+
// Set axisLength to default value which is seriesViewRect.width
|
|
47
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
46
48
|
this.layoutAxesFromTopToBottom(left, top, right, bottom, axes);
|
|
47
49
|
};
|
|
48
50
|
return BottomAlignedOuterAxisLayoutStrategy;
|
|
@@ -170,37 +170,39 @@ var LayoutManager = /** @class */ (function () {
|
|
|
170
170
|
var _a = this.axesGroupedByLayoutStrategy, topInnerAxes = _a.topInnerAxes, bottomInnerAxes = _a.bottomInnerAxes, leftInnerAxes = _a.leftInnerAxes, rightInnerAxes = _a.rightInnerAxes, topOuterAxes = _a.topOuterAxes, bottomOuterAxes = _a.bottomOuterAxes, leftOuterAxes = _a.leftOuterAxes, rightOuterAxes = _a.rightOuterAxes;
|
|
171
171
|
var groupAxes = function (axes) {
|
|
172
172
|
axes.forEach(function (axis) {
|
|
173
|
-
var axisAlignment = axis.axisAlignment, isInnerAxis = axis.isInnerAxis;
|
|
174
|
-
if (
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
173
|
+
var axisAlignment = axis.axisAlignment, isInnerAxis = axis.isInnerAxis, isVisible = axis.isVisible;
|
|
174
|
+
if (isVisible) {
|
|
175
|
+
if (isInnerAxis) {
|
|
176
|
+
switch (axisAlignment) {
|
|
177
|
+
case AxisAlignment_1.EAxisAlignment.Top:
|
|
178
|
+
topInnerAxes.push(axis);
|
|
179
|
+
break;
|
|
180
|
+
case AxisAlignment_1.EAxisAlignment.Bottom:
|
|
181
|
+
bottomInnerAxes.push(axis);
|
|
182
|
+
break;
|
|
183
|
+
case AxisAlignment_1.EAxisAlignment.Left:
|
|
184
|
+
leftInnerAxes.push(axis);
|
|
185
|
+
break;
|
|
186
|
+
case AxisAlignment_1.EAxisAlignment.Right:
|
|
187
|
+
rightInnerAxes.push(axis);
|
|
188
|
+
break;
|
|
189
|
+
}
|
|
188
190
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
191
|
+
else {
|
|
192
|
+
switch (axisAlignment) {
|
|
193
|
+
case AxisAlignment_1.EAxisAlignment.Top:
|
|
194
|
+
topOuterAxes.push(axis);
|
|
195
|
+
break;
|
|
196
|
+
case AxisAlignment_1.EAxisAlignment.Bottom:
|
|
197
|
+
bottomOuterAxes.push(axis);
|
|
198
|
+
break;
|
|
199
|
+
case AxisAlignment_1.EAxisAlignment.Left:
|
|
200
|
+
leftOuterAxes.push(axis);
|
|
201
|
+
break;
|
|
202
|
+
case AxisAlignment_1.EAxisAlignment.Right:
|
|
203
|
+
rightOuterAxes.push(axis);
|
|
204
|
+
break;
|
|
205
|
+
}
|
|
204
206
|
}
|
|
205
207
|
}
|
|
206
208
|
});
|
|
@@ -41,6 +41,8 @@ var LeftAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
41
41
|
chartLayoutState.leftInnerAreaSize = Math.max(chartLayoutState.leftInnerAreaSize, requiredSize);
|
|
42
42
|
};
|
|
43
43
|
LeftAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
44
|
+
// Set axisLength to default value which is seriesViewRect.height
|
|
45
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
44
46
|
if (axes.length === 0) {
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
@@ -43,6 +43,8 @@ var LeftAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
43
43
|
chartLayoutState.leftOuterAreaSize = Math.max(chartLayoutState.leftOuterAreaSize, requiredSize);
|
|
44
44
|
};
|
|
45
45
|
LeftAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
46
|
+
// Set axisLength to default value which is seriesViewRect.height
|
|
47
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
46
48
|
this.layoutAxesFromRightToLeft(left, top, right, bottom, axes);
|
|
47
49
|
};
|
|
48
50
|
return LeftAlignedOuterAxisLayoutStrategy;
|
|
@@ -41,6 +41,8 @@ var RightAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
41
41
|
chartLayoutState.rightInnerAreaSize = Math.max(chartLayoutState.rightInnerAreaSize, requiredSize);
|
|
42
42
|
};
|
|
43
43
|
RightAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
44
|
+
// Set axisLength to default value which is seriesViewRect.height
|
|
45
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
44
46
|
if (axes.length === 0) {
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
@@ -43,6 +43,8 @@ var RightAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
43
43
|
chartLayoutState.rightOuterAreaSize = Math.max(chartLayoutState.rightOuterAreaSize, requiredSize);
|
|
44
44
|
};
|
|
45
45
|
RightAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
46
|
+
// Set axisLength to default value which is seriesViewRect.height
|
|
47
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
46
48
|
this.layoutAxesFromLeftToRight(left, top, right, bottom, axes);
|
|
47
49
|
};
|
|
48
50
|
return RightAlignedOuterAxisLayoutStrategy;
|
|
@@ -41,6 +41,8 @@ var TopAlignedInnerAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
41
41
|
chartLayoutState.topInnerAreaSize = Math.max(chartLayoutState.topInnerAreaSize, requiredSize);
|
|
42
42
|
};
|
|
43
43
|
TopAlignedInnerAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
44
|
+
// Set axisLength to default value which is seriesViewRect.width
|
|
45
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
44
46
|
if (axes.length === 0) {
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
@@ -43,6 +43,8 @@ var TopAlignedOuterAxisLayoutStrategy = /** @class */ (function (_super) {
|
|
|
43
43
|
chartLayoutState.topOuterAreaSize = Math.max(chartLayoutState.topOuterAreaSize, requiredSize);
|
|
44
44
|
};
|
|
45
45
|
TopAlignedOuterAxisLayoutStrategy.prototype.layoutAxes = function (left, top, right, bottom, axes) {
|
|
46
|
+
// Set axisLength to default value which is seriesViewRect.width
|
|
47
|
+
axes.forEach(function (axis) { return (axis.axisLength = undefined); });
|
|
46
48
|
this.layoutAxesFromBottomToTop(left, top, right, bottom, axes);
|
|
47
49
|
};
|
|
48
50
|
return TopAlignedOuterAxisLayoutStrategy;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { IDeletable } from "../../../Core/IDeletable";
|
|
2
2
|
import { SCRTColorVertex, SCRTFontKey, SCRTRectVertex, TSciChart, TSRTextBounds, TSRVector4, VectorColorVertex, VectorRectVertex } from "../../../types/TSciChart";
|
|
3
3
|
import { TTextStyle } from "../Axis/AxisCore";
|
|
4
|
+
export declare class FontKey implements IDeletable {
|
|
5
|
+
readonly firstLoadTime: number;
|
|
6
|
+
readonly nativeKey: SCRTFontKey;
|
|
7
|
+
constructor(nativeKey: SCRTFontKey);
|
|
8
|
+
delete(): void;
|
|
9
|
+
}
|
|
4
10
|
export declare const freeCache: (wasmContext: TSciChart) => IDeletable;
|
|
5
11
|
/**
|
|
6
12
|
* Returns an empty vector of Rectangles
|
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getAllFontKeys = exports.getFontKey = exports.getVector4 = exports.getNativeRect = exports.getTextBounds = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = void 0;
|
|
3
|
+
exports.getAllFontKeys = exports.getFontKey = exports.getVector4 = exports.getNativeRect = exports.getTextBounds = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = exports.FontKey = void 0;
|
|
4
4
|
var Deleter_1 = require("../../../Core/Deleter");
|
|
5
5
|
var LabelCache_1 = require("../Axis/LabelProvider/LabelCache");
|
|
6
|
+
var SciChartDefaults_1 = require("../SciChartDefaults");
|
|
7
|
+
var FontKey = /** @class */ (function () {
|
|
8
|
+
function FontKey(nativeKey) {
|
|
9
|
+
this.firstLoadTime = Date.now();
|
|
10
|
+
this.nativeKey = nativeKey;
|
|
11
|
+
}
|
|
12
|
+
FontKey.prototype.delete = function () {
|
|
13
|
+
(0, Deleter_1.deleteSafe)(this.nativeKey);
|
|
14
|
+
};
|
|
15
|
+
return FontKey;
|
|
16
|
+
}());
|
|
17
|
+
exports.FontKey = FontKey;
|
|
6
18
|
var objectCache = new Map();
|
|
7
19
|
var getCache = function (wasmContext) {
|
|
8
20
|
var _a, _b;
|
|
@@ -154,14 +166,19 @@ var getFontKey = function (webAssemblyContext, labelStyle, advanced, transformed
|
|
|
154
166
|
};
|
|
155
167
|
var styleId = LabelCache_1.labelCache.getStyleId(newStyle);
|
|
156
168
|
if (!keyCache.has(styleId)) {
|
|
157
|
-
var fontKey = new webAssemblyContext.SCRTFontKey(labelStyle.fontFamily, labelStyle.fontSize, transformed, advanced);
|
|
169
|
+
var fontKey = new FontKey(new webAssemblyContext.SCRTFontKey(labelStyle.fontFamily, labelStyle.fontSize, transformed, advanced));
|
|
158
170
|
keyCache.set(styleId, fontKey);
|
|
159
171
|
}
|
|
160
|
-
|
|
172
|
+
var key = keyCache.get(styleId);
|
|
173
|
+
var timeSinceLoad = Date.now() - key.firstLoadTime;
|
|
174
|
+
if (timeSinceLoad > SciChartDefaults_1.SciChartDefaults.nativeFontTimeout) {
|
|
175
|
+
key.nativeKey.m_reload = false;
|
|
176
|
+
}
|
|
177
|
+
return key.nativeKey;
|
|
161
178
|
};
|
|
162
179
|
exports.getFontKey = getFontKey;
|
|
163
180
|
var getAllFontKeys = function (webAssemblyContext) {
|
|
164
181
|
var cache = getCache(webAssemblyContext);
|
|
165
|
-
return Array.from(cache.keyCache.values());
|
|
182
|
+
return Array.from(cache.keyCache.values()).map(function (k) { return k.nativeKey; });
|
|
166
183
|
};
|
|
167
184
|
exports.getAllFontKeys = getAllFontKeys;
|
|
@@ -20,4 +20,8 @@ export declare class SciChartDefaults {
|
|
|
20
20
|
* Experimental - set true to use native text for axes. Not all text features currently supported
|
|
21
21
|
*/
|
|
22
22
|
static useNativeText: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Time in ms to retry loading a native font. If you need to load a large font over a potentially slow connection await sciChartSurface.registerFont
|
|
25
|
+
*/
|
|
26
|
+
static nativeFontTimeout: number;
|
|
23
27
|
}
|
|
@@ -25,6 +25,10 @@ var SciChartDefaults = /** @class */ (function () {
|
|
|
25
25
|
* Experimental - set true to use native text for axes. Not all text features currently supported
|
|
26
26
|
*/
|
|
27
27
|
SciChartDefaults.useNativeText = false;
|
|
28
|
+
/**
|
|
29
|
+
* Time in ms to retry loading a native font. If you need to load a large font over a potentially slow connection await sciChartSurface.registerFont
|
|
30
|
+
*/
|
|
31
|
+
SciChartDefaults.nativeFontTimeout = 2000;
|
|
28
32
|
return SciChartDefaults;
|
|
29
33
|
}());
|
|
30
34
|
exports.SciChartDefaults = SciChartDefaults;
|
package/Core/BuildStamp.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TSciChart } from "../types/TSciChart";
|
|
2
2
|
import { TSciChart3D } from "../types/TSciChart3D";
|
|
3
|
-
export declare const libraryVersion = "3.0.
|
|
3
|
+
export declare const libraryVersion = "3.0.269";
|
|
4
4
|
export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;
|
package/Core/BuildStamp.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.checkBuildStamp = exports.libraryVersion = void 0;
|
|
4
|
-
var buildStamp = "2023-01-
|
|
4
|
+
var buildStamp = "2023-01-18T00:00:00";
|
|
5
5
|
var result;
|
|
6
6
|
// tslint:disable-next-line:no-var-requires
|
|
7
|
-
exports.libraryVersion = "3.0.
|
|
7
|
+
exports.libraryVersion = "3.0.269";
|
|
8
8
|
var checkBuildStamp = function (wasmContext) {
|
|
9
9
|
if (result !== undefined)
|
|
10
10
|
return result;
|
package/README.md
CHANGED
|
@@ -7,7 +7,9 @@ which WebGL and WebAssembly to achieve incredible real-time and big-data perform
|
|
|
7
7
|
> **perfect for scientific, financial, medical, engineering and enterprise applications**,
|
|
8
8
|
> apps with demanding performance requirements or complex and mission critical charting.
|
|
9
9
|
|
|
10
|
-
[](https://www.scichart.com/javascript-chart-features)
|
|
11
|
+
|
|
12
|
+
SciChart.JS v3 is released! Check out [what's new](https://www.scichart.com/scichart-js-v3-0-released). There should not be any breaking changes.
|
|
11
13
|
|
|
12
14
|
## License
|
|
13
15
|
|
|
@@ -18,7 +20,7 @@ which WebGL and WebAssembly to achieve incredible real-time and big-data perform
|
|
|
18
20
|
> - [Read about our **license terms** here](https://www.scichart.com/scichart-eula)
|
|
19
21
|
> - [**Start a trial** by following steps here](https://scichart.com/getting-started/scichart-javascript)
|
|
20
22
|
> - [**Purchase commercial licenses** here](https://store.scichart.com)
|
|
21
|
-
> - Academic usage, universities and schools qualify for a free
|
|
23
|
+
> - Academic usage, universities and schools qualify for a free license. Read more about this [here](https://www.scichart.com/educational-discount-programme).
|
|
22
24
|
|
|
23
25
|
## Demo Application
|
|
24
26
|
|
|
@@ -66,66 +68,66 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
|
|
|
66
68
|
|
|
67
69
|
1. **Install SciChart.js**
|
|
68
70
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
```shell
|
|
72
|
+
npm i scichart
|
|
73
|
+
```
|
|
72
74
|
|
|
73
|
-
2 **Create a simple chart** by putting this into `src/index.js` file
|
|
75
|
+
2. **Create a simple chart** by putting this into `src/index.js` file
|
|
74
76
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
```javascript
|
|
78
|
+
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
|
|
79
|
+
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
|
|
80
|
+
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
|
|
81
|
+
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
|
|
80
82
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
// Call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
|
|
84
|
+
// Alternative methods for serving wasm from webpack or offline are available on our website
|
|
85
|
+
SciChartSurface.useWasmFromCDN();
|
|
84
86
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
3 **Create src/index.html file**
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
4 **Run it `npm start`**. As a result you will see a simple line chart.
|
|
87
|
+
// Apply your licese key once before startup
|
|
88
|
+
SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
|
|
89
|
+
|
|
90
|
+
async function initSciChart() {
|
|
91
|
+
// Create the SciChartSurface in the div 'scichart-root'
|
|
92
|
+
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
|
|
93
|
+
|
|
94
|
+
// Create an X,Y Axis and add to the chart
|
|
95
|
+
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
|
|
96
|
+
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
|
|
97
|
+
|
|
98
|
+
// Create a line series with some data
|
|
99
|
+
const dataSeries = new XyDataSeries(wasmContext, {
|
|
100
|
+
xValues: [1, 2, 5, 8, 10],
|
|
101
|
+
yValues: [3, 1, 7, 5, 8]
|
|
102
|
+
});
|
|
103
|
+
const renderableSeries = new FastLineRenderableSeries(wasmContext, {
|
|
104
|
+
dataSeries,
|
|
105
|
+
stroke: "steelblue"
|
|
106
|
+
});
|
|
107
|
+
sciChartSurface.renderableSeries.add(renderableSeries);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
initSciChart();
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
3. **Create src/index.html file**
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<html lang="en-us">
|
|
117
|
+
<head>
|
|
118
|
+
<meta charset="utf-8" />
|
|
119
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
120
|
+
<title>SciChart.js Tutorial 1</title>
|
|
121
|
+
<script async type="text/javascript" src="bundle.js"></script>
|
|
122
|
+
</head>
|
|
123
|
+
<body>
|
|
124
|
+
<!-- the Div where the SciChartSurface will reside -->
|
|
125
|
+
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
|
|
126
|
+
</body>
|
|
127
|
+
</html>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
4. **Run it `npm start`**. As a result you will see a simple line chart.
|
|
129
131
|
|
|
130
132
|
> Further reading:
|
|
131
133
|
>
|
|
@@ -171,6 +173,6 @@ Check out what's new in SciChart.js at the below pages:
|
|
|
171
173
|
- [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
|
|
172
174
|
- [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
|
|
173
175
|
- [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
|
|
174
|
-
- SciChart.js v3.0
|
|
176
|
+
- [What's New in SciChart.js v3.0](https://www.scichart.com/scichart-js-v3-0-released)
|
|
175
177
|
|
|
176
178
|
We release often and if you want to report a bug, request a feature or give general feedback [contact us](https://scichart.com/contact-us)!
|