Earlier this year we blogged about enabling SciChart.js to work out of the box in sandbox environments like JSFiddle, Codepen.io and CodeSandbox.io. Take a look at the blog if you haven't seen it already which gives a run-down of what you can do in these environments.
https://www.scichart.com/blog/codepen-codesandbox-and-jsfiddle-support-in-scichart-js/?nocache=1
Using that, we've now built upon it and added two major enhancements to the SciChart.js developer experience. These are:
- A re-work of key documentation pages embedding live codepen samples
- Allowing you to extract any demo into a stand-alone codesandbox
Read on to find out what this means & how it will level up your developer experience with SciChart.js
Documentation Snippets with Codepens
SciChart.js has over 200 hand-written documentation pages. In addition, over a thousand TypeDoc generated docs. You can view the SciChart.js documentation at scichart.com/javascript-chart-documentation.
One of the problems with keeping docs updated is that simple typo on page could result in a runtime or compilation error. Docs have to have up to date code samples that are tested and embedded in the page. Bonus points for a runnable sample (like JSFiddle or Codepen) in the page. The last problem is you can copy-paste the code sample, miss something and it still doesn't work.
So what have we done to solve this?
- We've open sourced the docs and all the example code to go with it. Find this at github.com/abtsoftware/scichart.js.examples - under Documentation.
- We've created a number of example snippets with both the traditional SciChart API and the Builder API in this folder.
- Lastly, we've embedded the example snippets in the documentation itself using Codepen.
Try it out!
Head over to scichart.com/javascript-chart-documentation, click on any documentation page under 2D Charts API or Axis APIs and you should see embedded samples like this.
So far we've completed all the pages under 2D Chart Types and Axis APIs. We intend to complete all the pages plus add new ones. This is a long process so bear with us!
Showcase Demos & CodeSandbox integration
Head over to any showcase demo on demo.scichart.com. Click on the 'Code Sandbox' button at the top of the page. This will open the demo in a stand-alone app inside Codesandbox - a brand new in-browser IDE that will let you edit the code, try new things and share results with your colleagues.
You'll notice as well there's a Docs button. This opens contextual documentation for the current example. Try it out!
[caption id="attachment_7428" align="alignnone" width="1409"]
Codesandbox integration and context sensitive documentation in the SciChart.js demo (see demo.scichart.com)[/caption]
CodeSandbox integration means we can extract each showcase demo as a standalone app. From there you can click Fork to save your own version of the sandbox. Try editing the code and see how it affects the chart!
We've integrated the codesandbox toolbar into examples found on the main website as well.If you see this toolbar, hover over and you can do the same thing (open in codesandbox), as well as jump to contextual documentation for the example or demo.
[caption id="attachment_7411" align="alignnone" width="1506"]
Example Toolbar in all SciChart.js showcases. Click to open contextual documentation or this example in a Code Sandbox (See scichart.com/javascript-chart-examples)[/caption]
Got an error?
Codesandbox plus this integration is relatively new. Some of the examples are showing an error like this:
RangeError Potential infinite loop: exceeded 10001 iterations. You can disable this check by creating a sandbox.config.json file.
This is easily resolved by adding a sandbox.config.json file and disabling infiniteLoopProtection. We will update our showcase demo app soon to do this automatically.
What's Next?
These are the items on our roadmap to improve the developer experience with SciChart.js
- In the next few weeks we will be releasing a new Getting Started page with embedded tutorials, codepens and sandboxes to help you get started with SciChart fast.
- In the next 3 months we plan a community edition of SciChart.js, which will require a signup & have special T&C, and will work with watermark for non-commercial projects & applications.
- We're continuing to work through the documentation pages, updating all code samples and embedded codepens. There's a lot to do! Almost 200 pages and we've completed 30% so far.
- Finally, improvements to our support systems to handle the volume of requests we are getting.
Keep watching this space!
Best regards,
Andrew
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.
Top comments (0)