npm - scichart - Versions diffs - 2.1.2261 → 2.1.2290 - Mend

scichart 2.1.2261 → 2.1.2290

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.

Files changed (43) hide show

package/README.md CHANGED Viewed

@@ -4,6 +4,8 @@
 [SciChart](https://www.scichart.com) provides a High Performance JavaScript & TypeScript Chart library which uses WebGL and WebAssembly to achieve incredible real-time and big-data performance.
+Open the link to find out [SciChart.js performance compared to other libraries like Chart.js, Highcharts, etc](https://www.scichart.com/javascript-chart-performance-comparison/).
 SciChart is the _**only viable solution for mission-critical data visualization applications**_, where high quality, fast, and feature-rich charts & graphs are a large part of the application.
 Whether you are building Dashboards for business, stock-chart or trading apps, scientific or medical apps, or building a kiosk application on custom hardware with Electron, SciChart's ultra-fast 2D/3D WebGL rendering technology codenamed _Visual Xccelerator&reg;_ will let you build apps, services and dashboards with rich charts & graphs that will delight your users.
@@ -14,6 +16,183 @@ We've prepared a short [Getting Started guide here](https://www.scichart.com/get
 [![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
+## Quick Start with Browser Bundle
+1. **Make sure you downloaded [the Licensing Wizard](https://www.scichart.com/getting-started-scichart-js) and started trial**
+    Leave the Licensing Wizard running, it is used to validate licenses.
+2. **Create scichart-example.js file with a simple chart**
+    ```javascript
+    async function initSciChart() {
+        // In order to load data file from the CDN we need to set dataUrl
+        SciChart.SciChartSurface.configure({
+            dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.data",
+            wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.wasm"
+        });
+        // Create a chart using the json builder api
+        await SciChart.chartBuilder.buildChart("scichart-root", {
+            series: {
+                type: "LineSeries",
+                options: { stroke: "steelblue" },
+                xyData: {
+                    xValues: [1, 2, 5, 8, 10],
+                    yValues: [3, 1, 7, 5, 8]
+                }
+            }
+        });
+    }
+    initSciChart();
+    ```
+    See the documentation for [IScichart2Ddefinition](https://www.scichart.com/documentation/js/current/typedoc/interfaces/iscichart2ddefinition.html) for all the options available.
+3. **Create html file**
+    The file should include **scichart.browser.js** the same version as in the code snippet above, **div element with id "scichart-root"** and deferred **scichart-example.js** script which is executed after the page is loaded.
+    ```html
+    <!DOCTYPE html>
+    <html lang="en">
+        <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <!-- Include SciChart.js -->
+            <script
+                src="https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart.browser.js"
+                crossorigin="anonymous"
+            ></script>
+            <script src="scichart-example.js" defer></script>
+            <title>Hello, SciChart.js world!</title>
+        </head>
+        <body>
+            <div id="scichart-root" style="width: 800px; height: 600px;"></div>
+        </body>
+    </html>
+    ```
+4. **Host both files** on any web server. As a result you will see a simple line chart. Please note because we are using WebAssembly just opening the HTML file without a server will not work.
+Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-browser-global-module) to find source code for this example.
+## Quick Start with NPM and Webpack
+SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
+1. **Make sure you downloaded [the Licensing Wizard](https://www.scichart.com/getting-started-scichart-js) and started trial**
+    Leave the Licensing Wizard running, it is used to validate licenses.
+2. **Create a new Webpack project** or use an existing one.
+    ```shell
+    npm init -y
+    npm install webpack webpack-cli webpack-dev-server copy-webpack-plugin --save-dev
+    ```
+    add start script to package.json
+    ```
+      "scripts": {
+        "start": "webpack serve"
+      },
+    ```
+3. **Install SciChart.js**
+    ```shell
+    npm i scichart
+    ```
+4. **Add webpack.config.js file**
+    Use CopyPlugin to copy wasm and data files and serve them by webpack-dev-server. SciChart.js uses WebAssembly and those files must be loaded.
+    ```
+    const path = require('path');
+    const CopyPlugin = require("copy-webpack-plugin");
+    module.exports = {
+      mode: 'development',
+      entry: "./src/index.js",
+      performance: {
+        hints: false
+      },
+      output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: 'bundle.js',
+      },
+      plugins: [
+        new CopyPlugin({
+          patterns: [
+            { from: "src/index.html", to: "" },
+            { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
+            { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
+          ]
+        })
+      ]
+    };
+    ```
+5. **Create a simple chart** by putting this into `src/index.js` file
+    ```javascript
+    import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
+    import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
+    import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
+    import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
+    // You may need this to configure from where wasm and data files are served
+    // SciChartSurface.configure({ dataUrl: "/custom/scichart2d.data", wasmUrl: "/other/scichart2d.wasm" });
+    async function initSciChart() {
+        // Create the SciChartSurface in the div 'scichart-root'
+        // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
+        // instance must be passed to other types that exist on the same surface.
+        const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
+        // Create an X,Y Axis and add to the chart
+        const yAxis = new NumericAxis(wasmContext);
+        sciChartSurface.xAxes.add(xAxis);
+        sciChartSurface.yAxes.add(yAxis);
+        const dataSeries = new XyDataSeries(wasmContext, {
+            xValues: [1, 2, 5, 8, 10],
+            yValues: [3, 1, 7, 5, 8]
+        });
+        const renderableSeries = new FastLineRenderableSeries(wasmContext, {
+            dataSeries,
+            stroke: "steelblue"
+        });
+        sciChartSurface.renderableSeries.add(renderableSeries);
+    }
+    initSciChart();
+    ```
+6. **Create src/index.html file**
+    ```html
+    <html lang="en-us">
+        <head>
+            <meta charset="utf-8" />
+            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+            <title>SciChart.js Tutorial 1</title>
+            <script async type="text/javascript" src="bundle.js"></script>
+        </head>
+        <body>
+            <!-- the Div where the SciChartSurface will reside -->
+            <div id="scichart-root" style="width: 800px; height: 600px;"></div>
+        </body>
+    </html>
+    ```
+7. **Run it `npm start`**. As a result you will see a simple line chart.
+Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-simple-chart) to find source code for this example.
 ## Documentation
 We've taken the time to create hundreds of documentation pages for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
@@ -26,7 +205,50 @@ An online demo version of scichart.js.examples can be seen at https://demo.scich
 # Release Notes
-## Version 2 Released
+## Version 2.1 with Major Performance Improvements
+We’ve used our expertise high performance computing in other platforms of SciChart to make massive improvements to chart rendering, updating and startup speed in SciChart.js v2.1.
+**Performance improvements**:
+-   Smart Data-point Resampling was implemented. Datapoint resampling ensures the minimum viable data-set is displayed on the screen. Resampling is intended to be visually lossless, and automatic.
+-   Improved raw drawing speed of our underlying graphics engine by over 100%
+-   Added Async Label Creation option with global application or per-chart caching
+-   Optimised data transfers from JavaScript to WebAssembly
+-   Improved chart performance when using RolloverModifier and CursorModifier
+-   Implementation of Auto-detecting data distribution flags in DataSeries (flags dataSeries.isSorted, dataSeries.containsNaN). Specifying these flags gives better performance in big-data scenarios.
+-   Optimizations for Annotation notifyPropertyChange method not to be called if the property has not changed
+-   Display performance warnings in dev environment
+-   Optimisation getXRange() algorithm for unsorted data
+**Documentation**:
+-   Added Documentation of how to use SciChart.js in vannilla HTML/Js (without npm) using our Browser Bundle served by CDN
+-   Added Documentation for Performance Tips & Tricks
+-   Added Documentation for new Data-point Resampling features
+-   Added Documentation & Examples for new Generic Animations API
+**Live demo demo.scichart.com**:
+-   Added Generic Animations example to the Demo app
+**Other improvements**:
+-   Added labels support outside of a Pie Chart
+-   Better error message if wasm cannot be loaded, or the wrong version loaded
+-   Add a property to configure stacked axis length
+-   Allow passing div element reference into SciChartSurface.create to make SciChart.js possible to use in shadow DOM
+-   Improve guard checks for data series creation
+-   Snap RolloverModifier vertical line to data points
+-   Add explanation error message for trial expired on old version
+-   Add AxisRenderer.axisSize property which allows setting axis label width
+-   Add includeAxis property to MouseWheelZoomModifier
+-   Add AxisRenderer.axisThickness
+-   Prevent CursorModifier axis labels to be cut out of the chart
+See all the details at [SciChart.js v2.1 release](https://www.scichart.com/scichart-js-v2-1-released/).
+## Version 2.0
 SciChart.js v2 is a huge release with many new features, improvements and fixes including: