How to Create Chart Studio Dashboards
Create dashboards using the Chart Studio data visualization tool
Introduction
Chart Studio dashboards are a stunning way to display and share your graphs. Your charts are fully interactive with publication-quality graphics, and there's nothing to download or install — it's 100% web-based.
Our dashboards are used by companies such as Netflix, Tesla, and Google for their customization options and features. If you too want to present your plots in a cool way, keep reading.
For this tutorial we've taken screenshots from our dashboard, which can be found here.
Create a Dashboard
Go to https://plot.ly/dashboard/create/. You can also get there from your Organize page and clicking on the blue '+ New' button, then selecting 'Dashboard'.
The image below is what an empty dashboard looks like. As you can see, you have a few options of what to add, including a plot, text or a webpage.
Add a Plot
To add a chart to your dashboard click on 'Plot'.
Another window will be displayed, and you'll have the option of adding it by entering the URL of the plot, or uploading it from your list of files.
If you choose 'URL', it's the Shareable Link that's provided when you share your plot.
Clicking on 'Your Files' will open a popup that will display your saved plots. These are plots that are in your Organize.
After adding your first plot, you can continue to add more plots or start styling the dashboard.
Add Additional Plots
To add a second plot, we'll click on the 'Plot' button as the bottom left side of the page.
It'll open another 'Add a Plot' window below your first chart, so you may have to scroll down to view it. Note that we've zoomed out for the purpose of this tutorial.
The second plot appears below the first. We'll also go ahead and add a third and forth plot.
If you need to replace the plot for another, you can hit the 'Edit' button and you'll be shown the same 'Add a Plot' modal window as when we first started. You can also remove a plot you've decided you no longer need.
Size and Arrange the Plots
The plots in your dashboard can be resized and re-arranged, and now it's easier than ever to do this.
In the image below, we move our second plot by dragging it over so it's next to the first.
You can also resize your plots by hovering over the edges and clicking on the arrow as you hold and drag.
Style Your Dashboard
We'll start styling our dashboard by adding titles. You can add a title above each of the plots. This is easily done by typing directly on the 'Enter a title…' space on top.
You can also add a title for the entire dashboard by clicking on 'Settings'. It's important to note that the URL of your dashboard reflects this dashboard title upon the first save. If you want your URL to have the same name as your header, save your dashboard only after you've added this title.
This will open a panel to the right, which is also the general area where we'll style our dashboard.
Type your title directly in the field under 'Title'. As you type, you'll notice it being added to the dashboard header bar.
You can add a logo by adding the URL of a hosted image and it'll appear next to your dashboard title.
There's also an option of adding a subtitle and a URL linked to it. Once the dashboard is shared, the viewer can click on the subtitle and they'll be redirected to the URL.
The Settings panel is where you can change the color of your dashboard, including the header bar and box borders.
Add Text
Clicking the 'Text' button at the bottom left-hand side will open a text box at the bottom of your dashboard.
Add a Webpage
The 'Webpage' button will open a small window where you can embed a URL to your dashboard.
Save and Share a Dashboard
Your dashboard is now ready! Click SAVE on the right-hand side.
A small modal window will appear. Give your dashboard a filename and select the privacy setting. Click here to learn more about dashboard privacy. For more information on how sharing works, including the difference between private, public, and secret sharing, visit this page.
When you want to locate your dashboard, just visit your Organize or Profile page, and it's there with your other saved plots and grids!
See https://help.plot.ly/embed-dashboards/: to learn how to embed your dashboards in webpages as iframes.
Tips and Tricks
We mentioned selecting the privacy setting for your dashboard, but don't forget to check the privacy settings for the individual plots in your dashboard as well. You may need to change the setting of each plot in order for others to view your entire dashboard.
Python API
If you're familiar with python, you can utilise the python API to create dashboards programmatically. If you're looking more to create reactive web applications in pure python, try Dash
