Creating Custom Plotly Charts on Datazar

Have you ever wondered how you create or use Plotly (plotly.js) on Datazar? No? Well here it is anyway.

Datazar’s live chart editor allows you to create custom D3js charts with a JavaScript and CSS editor. Using the DatazarJS library, you can call your datasets without having to worry about file paths or URLs; simply do Datazar.dataset('someDataset.csv',()=>{}).

Is your data being automatically updated via the Datazar REST API? The charts update themselves so you don’t have to worry about taking into account new data.

Including Plotly

Plotly provides a CDN link so you can use their library without saving your own copy. That’s wonderful; let’s use that and copy it into the popup.

The Code

Let’s use one of the examples Plotly was kind enough to create on their site: https://plot.ly/javascript/histograms/

Copy and paste the JS code to the Datazar JS editor and you’re done.

Note this example actually generates the data on the fly but it’s the same principle as grabbing your data using the async Dataset function.

The CSS editor is just making sure the container page keeps the same color as the Plotly chart.

Using the Chart in a Paper

To use your newly minted chart on a Paper, Datazar’s new interactive research paper, create a Paper and use the option bar on the right to include it. The chart will be on the “Visualization” tab.

The cool thing about using the Plotly chart along with the interactive Paper is that it will keep its interactivity so you can zoom in and do all the fun things Plotly allows on their charts even AFTER you publish your Paper. This means your readers can play with your charts and get a better understanding; after all, that’s the whole point.

Checkout more features here: https://www.datazar.com/features

Creating Custom Plotly Charts on Datazar was originally published in Datazar Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.