Codepen, Codesandbox and JSFiddle support in SciChart.js
Tags: javascript, webdev, codepen, jsfiddle
Published: 2024-03-13 15:11:53

Two weeks ago we announced the release of SciChart.js v3.0. There's a huge list of features &amp; improvements that were added to our JavaScript Chart library in v3. If you haven't seen it, go ahead and <a href="https://www.scichart.com/scichart-js-v3-0-released/">take a look at the release note</a>.

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

Today <strong>we've just published a quick minor update, v3.0.284</strong>. One of the things that's the most interesting is we've added <a href="http://codepen.io">Codepen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> and <a href="https://codesandbox.io/">Codesandbox</a> support to SciChart.js.
<h2>Comparison of Collaborative JavaScript sandboxes</h2>
<h3>What is Codepen?</h3>
If you're not aware of it, <a href="https://codepen.io/">Codepen</a> 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.
<h3>What is JSFiddle?</h3>
<a href="https://jsfiddle.net/">JSFiddle</a> 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.
<h3>What is Codesandbox?</h3>
Codesandbox is a little more advanced. As well as runnable HTML/CSS/JS snippets, <a href="https://codesandbox.io/">Codesandbox.io</a> 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.
<h2>How we've enabled SciChart.js in Codepen/JSFiddle/CodeSandbox</h2>
To enable SciChart.js to work in these online collaborative sandboxes, we had to make a few minor changes.
<ol>
 	<li style="list-style-type: none;">
<ol>
 	<li>We've built into our core licensing that <strong>no license is required</strong> for either Codepen, JSFiddle or Codesandbox.</li>
 	<li>Secondly, we've built into SciChart.js to <strong>automatically load wasm</strong> from the cloud, by calling SciChartSurface.useWasmFromCDN().</li>
 	<li>Last, <strong>we've fixed the index.js</strong> in the npm package so that you can import everything from SciChart making imports MUCH simpler, <em>e.g. import { all, the, things } from "scichart"</em></li>
</ol>
</li>
</ol>
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 <strong>unlimited-time trial (a precursor to our upcoming community licensing)</strong> with a small watermark displayed in the chart.
<h2>Demos / Examples</h2>
Ok, enough of the chit-chat, let's try it out!
<h3>JSFiddle + SciChart.js demo</h3>
First up, let's try JSFiddle. We've prepared a demo below.

To get SciChart.js working in JSFiddle you need to:
<ol>
 	<li>Include <a href="https://cdn.jsdelivr.net/npm/scichart/index.min.js">https://cdn.jsdelivr.net/npm/scichart/index.min.js</a>  as a resource script in JSFiddle</li>
 	<li>Create a div and give it an ID</li>
 	<li>Use the browser bundle syntax to import types for SciChart e.g.
<pre><code class="language-javascript">const { SciChartSurface } = SciChart;</code></pre>
</li>
 	<li>Finally, create your chart</li>
</ol>
Here's an example: <a href="https://jsfiddle.net/scichart/sbu6wxro/13/">jsfiddle.net/scichart/sbu6wxro</a>

<iframe src="//jsfiddle.net/scichart/sbu6wxro/13/embedded/js,html,result/" width="100%" height="500" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">﻿</span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">﻿</span></iframe>
<blockquote><em><strong>Note</strong>: When JSFiddle and the <a href="https://cdn.jsdelivr.net/npm/scichart/index.min.js">index.min.js</a> file from <a href="https://www.jsdelivr.com/package/npm/scichart">JSDelivr</a> is added as resource, SciChart automatically detects this environment and calls <a href="https://www.scichart.com/documentation/js/current/webframe.html#Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html">useWasmFromCDN()</a>. There is no need to perform webassembly deployment setup or licensing in JSFiddle. </em></blockquote>
<h3>CodePen.io + SciChart.js demo</h3>
Sharing SciChart.js charts in Codepen.io is very similar.
<ol>
 	<li>Head over to codepen and create a new pen</li>
 	<li>Under Settings -&gt; JS -&gt; Add the external script to <a href="https://cdn.jsdelivr.net/npm/scichart/index.min.js">https://cdn.jsdelivr.net/npm/scichart/index.min.js</a></li>
 	<li>Create a div and give it an ID</li>
 	<li>Use the browser bundle syntax to import types for SciChart e.g.
<pre><code class="language-javascript">const { SciChartSurface } = SciChart;</code></pre>
</li>
 	<li>Finally, create your chart</li>
</ol>
Here's an example: <a href="https://codepen.io/scichart/pen/ZEjjELy">codepen.io/scichart/pen/ZEjjELy</a>

<iframe style="width: 100%;" title="SciChart.js simple chart" src="https://codepen.io/scichart/embed/ZEjjELy?default-tab=js%2Cresult&amp;editable=true" height="500" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">﻿</span>
See the Pen <a href="https://codepen.io/scichart/pen/ZEjjELy">
SciChart.js simple chart</a> by SciChart Official (<a href="https://codepen.io/scichart">@scichart</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

That's nicer huh!

<em><strong>Note</strong>: When Codepen and the <a href="https://cdn.jsdelivr.net/npm/scichart/index.min.js">index.min.js</a> file from <a href="https://www.jsdelivr.com/package/npm/scichart">JSDelivr</a> is added as resource, SciChart automatically detects this environment and calls <a href="https://www.scichart.com/documentation/js/current/webframe.html#Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html">useWasmFromCDN()</a>. There is no need to perform webassembly deployment setup or licensing in Codepen. </em>
<h3>CodeSandbox.io + SciChart.js demo</h3>
Ok last but not least, <a href="https://codesandbox.io/">Codesandbox</a>. This is a newcomer to online collaborative workspaces which seems much more advanced. <a href="https://codesandbox.io/">Codesandbox.io</a> 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: <a href="https://codesandbox.io/s/scichart-js-boilerplate-v6iwge?file=/src/index.ts">codesandbox.io/s/scichart-js-boilerplate-v6iwge</a>

<iframe style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;" title="scichart-js-boilerplate" src="https://codesandbox.io/embed/scichart-js-boilerplate-v6iwge?fontsize=14&amp;hidenavigation=1&amp;theme=dark?fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2Findex.ts&amp;theme=dark&amp;view=editor" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

<a href="https://codesandbox.io/s/scichart-js-boilerplate-v6iwge?fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2Findex.ts&amp;theme=dark&amp;view=editor">
<img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit scichart-js-boilerplate" />
</a>

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

<em><strong>Note</strong>: 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. <strong>You will need to call useWasmFromCDN()</strong> or to setup webpack or similar bundler to deploy our Wasm files, according to our <a href="https://www.scichart.com/documentation/js/current/webframe.html#Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html">documentation here</a>.</em>
<h2>Fetching SciChart.js v3 from JSDelivr</h2>
Lastly, a new about JSDelivr. You can see below SciChart.js is quite popular!

<a href="https://www.jsdelivr.com/package/npm/scichart"><img class="alignnone size-full" src="https://data.jsdelivr.com/v1/package/npm/scichart/badge" alt="SciChart.js on JSDelivr" width="154" height="20" /></a>

<a href="https://www.jsdelivr.com/">JSDelivr</a> is a free CDN for packaging javascript libraries to the web. As well as publishing npm packages and typings to <a href="https://www.npmjs.com/package/scichart">npmjs/package/scichart</a>, 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 <a href="https://www.jsdelivr.com/package/npm/scichart">jsdelivr.com/package/npm/scichart</a> 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.
<pre><code class="language-javascript">// See https://www.jsdelivr.com/package/npm/scichart for options
// Include a specific version
&lt;script src="https://cdn.jsdelivr.net/npm/scichart@3.0.284/index.min.js"&gt;&lt;/script&gt;

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

// Include the latest major/minor version 
&lt;script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js"&gt;&lt;/script&gt;</code></pre>
<blockquote><em><strong>NOTES</strong>: index.min.js support only works from v3.0.284 onwards.</em>
<em>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.</em></blockquote>
<h2>Happy Sandboxing!</h2>
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 &amp; help demonstrate issues, for example:
<ul>
 	<li>In the SciChart.js <a href="https://www.scichart.com/questions/categories/js">forums</a></li>
 	<li>In <a href="https://stackoverflow.com/questions/tagged/scichart.js">stackoverflow</a> with tag=scichart.js</li>
 	<li>Or (coming soon) by sharing code samples &amp; snippets in our <a href="https://www.scichart.com/documentation/js/current/webframe.html#SciChart_JS_User_Manual.html">documentation</a>.</li>
</ul>
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]

<blockquote>
<h2>Start using SciChart.js Today</h2>
SciChart.js is now available with a <a href="https://www.scichart.com/getting-started/scichart-javascript"><strong>FREE community edition</strong></a> (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.<br /><br />
<p style="text-align: center;"><a class="button" href="https://scichart.com/contact-us">CONTACT US</a><a class="button" href="https://www.scichart.com/getting-started/scichart-javascript/">GET SCICHART.JS FREE</a></p>
</blockquote>