Dynamic Plotly.js Plot with Menu – Data Science Examples

Please follow and like us:

Plotly.js allows for dynamic plots. However, event handlers are needed to make the graphs dynamic. For complete customization of active plots, you would likely need D3, but I will not cover D3 in this tutorial.

To make plotly.js dynamic, you will need some basic HTML and javascript. The goal of this tutorial will be to generate plots that change with a dropdown menu selection. We want a dropdown menu to select among three different plots or a combination of all three.

This section will be the part III of the plotly.js tutorial, and the files should be saved as test3.html and test3.js. Again this will mean that once you start the local HTTP server, you will need test3.html at the end of the local address 0.0.0.0:8000/test3.html.

As before, we want plotly.js to render the plot as soon as the page loads. Keeping the same code as before, but adding to it can accomplish this. While this is achievable with an onload event handler, it would unnecessarily complicate the passing of global variables.

In test3.js I changed the data of the first plot to be equal to trace1 instead of the list of trace1, trace2, and trace3.

data = [trace1];

I want to start off showing one trace at a time. I also added:

range: [-1, 6],

to the xaxis within the layout variable, and

range: [-1, 18],

to the yaxis within the layout variable.

I also added a third trace.

trace3 = {
x: [0, 1, 2, 3, 4],
y: [0, 6, 5, 3, 10],
type: ‘scatter’,
name: ‘Name of Trace 3’,
};

HTML changes

First, we will need a dropdown menu in the HTML. The dropdown menu should be after the ‘myDiv’ div tag, and before the link to test3.js.

Here is the HTML code:

<!DOCTYPE html encoding>
<html>
    <head>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <div id=myDiv></div>
        <select id="plotselect" onchange="findplot()" >
            <option value="trace1">trace1</option>
            <option value="trace2">trace2</option>
            <option value="trace3">trace3</option>
            <option value="All">All</option>
        </select>
        <script src="test3.js"></script>
    </body>
</html>

You may notice that I added a meta tag that sets the character set as UTF-8. I added this command because I encountered a character set error when running a different browser.

You will also notice that the id of the dropdown menu is plotselect, and the onchange event handler of plotselect calls the javascript function findplot().

Now in the test3.js file you will need to create the findplot() function.

Javascript has several ways of calling a function. Using the word function followed by the name of the function and opened and close parenthesis is likely the most common. As with other things in Javascript, the parenthesis are followed by an open curly bracket and then ended with a closed curly bracket and a semicolon.

Function for Changing Plot

function findplot(){

The new function first has to get the selection from the dropdown menu
let eID = document.getElementById(“plotselect”);

Then, you will need to set the value of plotselect equal to a variable.

let plotVal = eID.options[eID.selectedIndex].value;

I added a varable to help figure out what is going on in the javascript.

let X=0;

Then, I made an if, else if, else statement that changes data and the value of X based on the value from plotselect.

Setting data

if (plotVal===”trace1″){
data=[trace1];
X=1;
}
else if (plotVal===”trace2″)
{
data=[trace2];
X=3;
}
else if (plotVal===”trace3″){
data=[trace3];
X=4;
}
else{
data=[trace1, trace2, trace3];
X=5;
};

After that, I printed out X’s value in the console to show what the code is doing.

console.log(X)

Finally, before ending the findplot() function, you will need to update the plot. In this case update is not the right command, it is react, which makes a new plot as quickly as possible. The react command is much faster than newPlot.

Plotly.react(‘myDiv’, data, layout);

Then you need to end the findplot() function with

};

You will notice that the xaxis moves slightly when going from the single trace to multiple traces. By default, plotly.js adds a legend. The code for this tutorial can be found at: https://github.com/scottcm73/simple_plotly.js_tutorial

Please follow and like us: