Codepen, Codesandbox and JSFiddle support in SciChart.js

Two weeks ago we announced the release of SciChart.js v3.0. There's a huge list of features & improvements that were added to our JavaScript Chart library in v3. If you haven't seen it, go ahead and take a look at the release note.

https://www.scichart.com/scichart-js-v3-0-released/?nocache=1

Today we've just published a quick minor update, v3.0.284. One of the things that's the most interesting is we've added Codepen, JSFiddle and Codesandbox support to SciChart.js.

Comparison of Collaborative JavaScript sandboxes

What is Codepen?

If you're not aware of it, Codepen is an online code editor, learning environment and community front-end for web development with HTML, CSS and JavaScript. It allows you to quickly share or embed runnable code samples making it useful to try out, share or debug issues.

What is JSFiddle?

JSFiddle is almost identical. It describes itself as an online IDE service and community for showcasing user-created and collaborational HTML, CSS and JavaScript code snippets. Both of these allow for collaborative sharing of JavaScript snippets.

What is Codesandbox?

Codesandbox is a little more advanced. As well as runnable HTML/CSS/JS snippets, Codesandbox.io is pretty much an entire IDE running in the cloud. It supports TypeScript or JavaScript, npm packages and JSX/TSX, for example React or Vue. Almost anything you can build in VSCode can be done in codesandbox in the browser and can be shared as a link to colleagues or on the web.

How we've enabled SciChart.js in Codepen/JSFiddle/CodeSandbox

To enable SciChart.js to work in these online collaborative sandboxes, we had to make a few minor changes.

1. 1. We've built into our core licensing that no license is required for either Codepen, JSFiddle or Codesandbox.
   2. Secondly, we've built into SciChart.js to automatically load wasm from the cloud, by calling SciChartSurface.useWasmFromCDN().
   3. Last, we've fixed the index.js in the npm package so that you can import everything from SciChart making imports MUCH simpler, e.g. import { all, the, things } from "scichart"

When one of these environments is detected, there is no hoop to jump through to package WebAssembly files, or to license the chart. It #JustWorks out of the box, as an unlimited-time trial (a precursor to our upcoming community licensing) with a small watermark displayed in the chart.

Demos / Examples

Ok, enough of the chit-chat, let's try it out!

JSFiddle + SciChart.js demo

First up, let's try JSFiddle. We've prepared a demo below.

To get SciChart.js working in JSFiddle you need to:

1. Include https://cdn.jsdelivr.net/npm/scichart/index.min.js  as a resource script in JSFiddle
2. Create a div and give it an ID
3. Use the browser bundle syntax to import types for SciChart e.g.

   const { SciChartSurface } = SciChart;

4. Finally, create your chart

Here's an example: jsfiddle.net/scichart/sbu6wxro



Note: When JSFiddle and the index.min.js file from JSDelivr is added as resource, SciChart automatically detects this environment and calls useWasmFromCDN(). There is no need to perform webassembly deployment setup or licensing in JSFiddle. 

CodePen.io + SciChart.js demo

Sharing SciChart.js charts in Codepen.io is very similar.

1. Head over to codepen and create a new pen
2. Under Settings -> JS -> Add the external script to https://cdn.jsdelivr.net/npm/scichart/index.min.js
3. Create a div and give it an ID
4. Use the browser bundle syntax to import types for SciChart e.g.

   const { SciChartSurface } = SciChart;

5. Finally, create your chart

Here's an example: codepen.io/scichart/pen/ZEjjELy


See the Pen
SciChart.js simple chart by SciChart Official (@scichart)
on CodePen.

That's nicer huh!

Note: When Codepen and the index.min.js file from JSDelivr is added as resource, SciChart automatically detects this environment and calls useWasmFromCDN(). There is no need to perform webassembly deployment setup or licensing in Codepen. 

CodeSandbox.io + SciChart.js demo

Ok last but not least, Codesandbox. This is a newcomer to online collaborative workspaces which seems much more advanced. Codesandbox.io allows you to create node/npm projects, install packages, setup webpack or bundlers, include frameworks like React or Vue, and code in Typescript or JavaScript. It looks and acts like an IDE (VSCode) in the cloud, allowing shareable projects, not just code snippets.

Here's an example: codesandbox.io/s/scichart-js-boilerplate-v6iwge

I have to be honest, that's pretty impressive (the ability to share or host npm projects in browser).

Note: When Codesandbox is used and SciChart is installed from npm, SciChart automatically detects this environment and automatically licenses the chart with a watermark. However, WebAssembly deployment is not auto configured. You will need to call useWasmFromCDN() or to setup webpack or similar bundler to deploy our Wasm files, according to our documentation here.

Fetching SciChart.js v3 from JSDelivr

Lastly, a new about JSDelivr. You can see below SciChart.js is quite popular!

JSDelivr is a free CDN for packaging javascript libraries to the web. As well as publishing npm packages and typings to npmjs/package/scichart, we've also published a 'browser bundle' - a pure javascript that you can include in any environment including HTML pages.

You can find SciChart.js on jsdelivr.com/package/npm/scichart here.

To include the browser bundle (similar to an IIFE Bundle, or using unpkg.com) simply include one of the following scripts into your HTML.

// See https://www.jsdelivr.com/package/npm/scichart for options
// Include a specific version
<script src="https://cdn.jsdelivr.net/npm/scichart@3.0.284/index.min.js"></script>

// Include a version range e.g. latest from 3.x
<script src="https://cdn.jsdelivr.net/npm/scichart@3/index.min.js"></script>

// Include the latest major/minor version 
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js"></script>

NOTES: index.min.js support only works from v3.0.284 onwards. We recommend targeting a version range e.g. 3.x for development, and specific version e.g. 3.0.284 for production. This will avoid silent upgrades in production which could cause regression issues.

Happy Sandboxing!

So, now you know! SciChart.js can be used in JSFiddle, codepen.io and codesandbox!

We are going to be using these to share samples & help demonstrate issues, for example:

• In the SciChart.js forums
• In stackoverflow with tag=scichart.js
• Or (coming soon) by sharing code samples & snippets in our documentation.

If you have a sample you wish to share with us, or struggling with implementation or a bug, then try using one of these methods to share the code with support. We'd be more than happy to help!

Best regards,
Andrew
[SciChart Team]

Start using SciChart.js Today

SciChart.js is now available with a FREE community edition (no trial, sign-up or credit card required) where you can try out the library commercially or use it in a non-commercial application. If you have a question, or would like to give feedback, contact us.

CONTACT USGET SCICHART.JS FREE