|
ProEssentialsJS is the ProEssentials native C++ engine compiled to WebAssembly. It is the same engine that powers the WinUI, WPF, WinForms, ActiveX, VCL and DLL interfaces, running in the browser. There is no plugin, no server round trip, and no rendering done in JavaScript.
The property model is the model documented in this help. Property names, nested categories, enumeration names and the property sequence are the same as the .NET interfaces. Four things differ, and they are listed below.
New to ProEssentials? Read the ProEssentialsJS Walkthrough first. It builds a chart from an empty page in ten steps.
Chart Objects
ProEssentialsJS offers the same five chart objects as the desktop interfaces. The property count is the number of properties each object exposes to JavaScript.
Object Model
ProEssentials features are grouped into nested properties, all starting with the letters "Pe". The categories are the .NET categories:
PeString |
Titles, Labels, and other string type properties. |
PeData |
Includes properties defining the quantity, attributes, and data-access related features. |
PeLegend |
Includes properties related to legend, colors, line types, points types, location. |
PeFont |
Includes all font related properties. |
PeColor |
Includes all color related properties. |
PePlot |
Plotting method access and plotting options. Generally includes everything related to how data is rendered into graphics. |
PeGrid |
Grid options and grid configuration. Configuration deals with quantity and frequency of grid lines. Options deal with how grid lines are rendered. |
PeAnnotation |
Graph, line, axis, and table annotations. |
PeConfigure |
Visual or functional features global in nature. |
PeUserInterface |
Menus, dialogs, scrollbars, cursors, and availability of user interface features. |
PeSpecial |
Includes rarely used features. |
PeTable |
Unique to the Graph object, includes table related items. |
PeFunction |
Includes all methods to initialize, reset, export and perform other tasks. |
What Differs From .NET
Four things, and no others.
1. Two-dimensional property arrays are indexed twice. JavaScript has no two-dimensional indexer.
|
Pego1.PeData.Y[s, p] = 10; // C#
Pego1.PeData.Y[s][p] = 10; // JavaScript
|
2. Enumerations are reached through the Enums export, which the walkthroughs import as E. The enumeration and member names are the .NET names.
|
Pego1.PePlot.Method = GraphPlottingMethod.Bar; // C#
Pego1.PePlot.Method = E.GraphPlottingMethod.Bar; // JavaScript
|
3. Events are subscribed with add(), and removed with remove(). JavaScript has no += operator for events. The event names are the .NET names, and they hang off the control rather than the property surface.
|
Pego1.PeDataHotSpot += OnDataHotSpot; // C#
ctl.PeDataHotSpot.add(onDataHotSpot); // JavaScript
|
A handler receives (sender, ev), the same two arguments the .NET delegate takes. See Events in JavaScript and the JS / .NET Events Reference.
4. Property array helper methods are camelCase, and the .NET spelling also works. The property paths are unchanged. camelCase is the JavaScript house style; the .NET name is kept so a pasted desktop block still runs.
|
Pego1.PeData.Y.Clear(); // C#
Pego1.PeData.Y.clear(); // JavaScript
|
|
JavaScript
|
Does
|
load(values, subsets, points) |
Bulk load a whole two dimensional array. One dimensional arrays take load(values, count). |
append(values, count) |
.NET's AppendData. Adds samples to a growing trace. |
allocate(n) |
Allocate a block sized and typed for this array, for use with the call below. |
useDataAtLocation(block, count) |
.NET's UseDataAtLocation. Zero copy: the engine reads your block directly. Call with no argument to release. |
clear(newSize) |
Empties the array, or reduces it to newSize. |
copy() |
Reads the array back as a JavaScript array. |
copyJagged(nSubset) |
One subset, at its own length. Under JaggedData the 2D array's length is meaningless, because one number cannot describe ragged rows. |
getLength(dimension) |
0 gets Subsets, 1 gets Points. |
Methods share their .NET names. They hang off PeFunction, spelled as the desktop spells them, so Pego1.PeFunction.ReinitializeResetImage() is a working JavaScript call and a pasted property block ends the way it always did. The control also carries render() as a shorter alias for the same call, but this help and the starter both use the desktop spelling, so that a property block reads the same on either platform. See Methods in JavaScript. SetJaggedPointsX and GetJaggedPointsX keep their .NET spelling, on purpose, because that is how this help documents them. See Property Arrays.
Reading The Property Reference
Within the property reference material, at the top of each property topic, you'll see a table with various property attributes. For example, the property FontSize has such an entry.
|
Scope
|
All ProEssentials Objects.
|
|
Type
|
Int32
|
|
Default
|
PEFS_MEDIUM
|
|
JS / .NET
|
PeFont.FontSize
|
|
OCX / VCL
|
FontSize
|
|
DLL
|
PEP_nFONTSIZE
|
The JS / .NET row carries the property path. It is the same path in both, so for a control named Pego1 you write:
|
Pego1.PeFont.FontSize = E.FontSize.Large;
|
A row that reads .NET alone is not available in JavaScript. These are properties whose type or purpose has no browser equivalent: Windows handles and RECT structures, live drag state read during a mouse event, Direct3D device queries, the WebForm image serving properties, and a few 3D only settings. There are 26 of them across the reference. Everything else in this help applies to ProEssentialsJS as written.
Installation
Two ways in, with no difference in what you get. See ProEssentialsJS Installation for what the package contains, and ProEssentialsJS Deployment for what has to reach the browser.
|
npm install proessentials
|
Or a script tag, with no build toolchain at all.
|
<script src="proessentials.js"></script>
|
No licence key is required to run any of this. There is no activation, no domain registration and no phone home.
Browser Requirements
WebAssembly and Canvas2D, which every current browser has. Nothing is required to be installed by the end user.
WebGPU is used where you ask for it, on one property. Set PeConfigure.RenderEngine to Direct3D and the control acquires a WebGPU device and composites a GPU layer into the chart. Same single property line as the desktop, and it is not only for 3D: a 2D Scientific Graph gets a GPU line layer, which is the path behind the large line-data speed records; a contour plotting method gets a contour layer; the 3D Scientific Graph gets a surface layer. If the browser has no WebGPU device the control falls back to Direct2D and draws, rather than leaving you with bare axes. See Installation.
Next
ProEssentialsJS Walkthrough, Example Code, Real-Time Charts, Events, then the property reference. This help's example numbers, 030, 122, 202 and the rest, are the same example numbers used by the JavaScript example browser at gigasoft.com.
|
