Creating Custom Plotly Charts on Datazar

June 15, 2018

(This article was first published on R Language in Datazar Blog on Medium, and kindly contributed to R-bloggers)

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

The “Libraries” button will prompt a pop up that allows you to include external JS libraires and CSS styles.

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:

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

The JS editor on the left contains the code from the histogram example.

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:

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.

To leave a comment for the author, please follow the link and comment on their blog: R Language in Datazar Blog on Medium. offers daily e-mail updates about R news and tutorials on topics such as: Data science, Big Data, R jobs, visualization (ggplot2, Boxplots, maps, animation), programming (RStudio, Sweave, LaTeX, SQL, Eclipse, git, hadoop, Web Scraping) statistics (regression, PCA, time series, trading) and more...

If you got this far, why not subscribe for updates from the site? Choose your flavor: e-mail, twitter, RSS, or facebook...

Comments are closed.

Search R-bloggers


Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)