scichart 3.0.269 → 3.0.284

package/README.md

@@ -133,26 +133,44 @@ initSciChart();
 >
 > -   See the [Getting Started Page](https://scichart.com/getting-started/scichart-javascript/) as well as our [Tutorials](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Setting%20up%20a%20Project%20with%20SciChart.js.html) for more information on creating your first chart
 
-## Quick Start with vanilla JS
+## Quick Start with Browser Bundle (Iife bundle)
 
-If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module.
+[![](https://data.jsdelivr.com/v1/package/npm/scichart/badge)](https://www.jsdelivr.com/package/npm/scichart)
 
-1.**Create scichart-example.js file with a simple chart**
+If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module from [JSDlvr](https://www.jsdelivr.com/package/npm/scichart)
 
-```javascript
-async function initSciChart() {
-    // See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
-    // call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
-    SciChart.SciChartSurface.useWasmFromCDN();
+1. **Include SciChart.browser.js in your webpage**
+
+```html
+<!-- Always include latest scichart.js version -->
+<script src="https://cdn.jsdelivr.net/npm/scichart/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
+<!-- or, choose specific version -->
+<script src="https://cdn.jsdelivr.net/npm/scichart@3.0.280/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
+<!-- or, choosing latest version from 3.x -->
+<script src="https://cdn.jsdelivr.net/npm/scichart@3/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
+```
 
-    // Apply your licese key once before startup
-    SciChart, SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
+2.**Create scichart-example.js file with a simple chart**
 
+```javascript
+// Imports when using Browser Bundle
+const {
+    SciChartSurface,
+    SciChartDefaults,
+    chartBuilder,
+    SciChartJsNavyTheme,
+    XyDataSeries,
+    FastLineRenderableSeries,
+    NumericAxis
+} = SciChart;
+
+// Option 1: Create chart with Builder API
+async function initSciChartBuilderApi() {
     // Create a chart using the json builder api
-    await SciChart.chartBuilder.buildChart("scichart-root", {
+    await chartBuilder.buildChart("chart0", {
         series: {
             type: "LineSeries",
-            options: { stroke: "steelblue" },
+            options: { stroke: "steelblue", strokeThickness: 5 },
             xyData: {
                 xValues: [1, 2, 5, 8, 10],
                 yValues: [3, 1, 7, 5, 8]
@@ -161,9 +179,39 @@ async function initSciChart() {
     });
 }
 
-initSciChart();
+// Option 2: Create chart with the programmatic API
+async function initSciChartProgrammaticApi() {
+    const { sciChartSurface, wasmContext } = await SciChartSurface.create("chart1", {
+        theme: new SciChartJsNavyTheme()
+    });
+
+    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
+    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
+
+    sciChartSurface.renderableSeries.add(
+        new FastLineRenderableSeries(wasmContext, {
+            stroke: "#FF6600",
+            strokeThickness: 3,
+            dataSeries: new XyDataSeries(wasmContext, {
+                xValues: [1, 2, 5, 8, 10],
+                yValues: [3, 1, 7, 5, 8]
+            })
+        })
+    );
+}
+
+// See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
+// call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+SciChartSurface.useWasmFromCDN();
+// Also, call & set runtime license key here once before scichart shown
+SciChartSurface.setRuntimeLicenseKey("-- Your license key here --");
+
+initSciChartBuilderApi();
+initSciChartProgrammaticApi();
 ```
 
+> [View above in CodePen](https://codepen.io/scichart/pen/ZEjjELy)
+
 > See the full [browser bundle tutorial here](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Including%20SciChart.js%20in%20an%20HTML%20Page.html)
 
 # Release notes. What's New!