✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Y axis does not show up

Hi,
I am testing dropdown menus using this link (https://plot.ly/javascript/dropdowns/) as an example. However, I am not able to see the y-axis data on the chart. Surprisingly, when I view it in the cloud (clicking on “Edit in chart studio” button), it shows up there. No matter which option I choose from the dropdown menus.

<!doctype html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div class="bubbleplot" data-num="0">
        <div class="plot" id="plotdiv"></div>
        <div class="control-row">
            Disk: <select class="diskdata">
        </select>
        </div>
    </div>
<script>

    var allDiskNames = [],
        allSnapshots = [],
        allReadsPerSec = [],
        listOfDisks = [],
        currentDisk,
        currentReadPerSec = [];

    // all the disks
    allDiskNames.push("H:\Disk1");
    allDiskNames.push("H:\Disk2");
    allDiskNames.push("H:\Disk3");
    
    //all the time snapshots
    allSnapshots.push("2017-11-24 22:03:00");
    allSnapshots.push("2017-11-24 22:04:00");
    allSnapshots.push("2017-11-24 22:05:00");
    allSnapshots.push("2017-11-24 22:06:00");
    allSnapshots.push("2017-11-24 22:07:00");
    
    for (var i = 0; i < allDiskNames.length; i++ ){
        if (listOfDisks.indexOf(allDiskNames[i]) === -1 ){
            listOfDisks.push(allDiskNames[i]);
            allReadsPerSec[i] = [];
        }
    }
      
    // reads per sec for a given disk for a given time snapshot
    allReadsPerSec[0][0]=[20];
    allReadsPerSec[1][0]=[40];
    allReadsPerSec[2][0]=[90];
    allReadsPerSec[0][1]=[30];
    allReadsPerSec[1][1]=[10];
    allReadsPerSec[2][1]=[40];
    allReadsPerSec[0][2]=[30];
    allReadsPerSec[1][2]=[20];
    allReadsPerSec[2][2]=[70];
    allReadsPerSec[0][3]=[130];
    allReadsPerSec[1][3]=[10];
    allReadsPerSec[2][3]=[70];
    allReadsPerSec[0][4]=[30];
    allReadsPerSec[1][4]=[10];
    allReadsPerSec[2][4]=[40];

    function getDiskData(chosenDisk) {
        currentReadPerSec = [];
        for (var i = 0 ; i < allDiskNames.length ; i++){
          if ( allDiskNames[i] === chosenDisk ) {
            for (var j = 0 ; j < allSnapshots.length ; j++){
                currentReadPerSec.push(allReadsPerSec[i][j]);
                //console.log(allReadsPerSec[i][j]);
                }
            } 
        }
    };

    // Default Disk Data
    setBubblePlot("H:\Disk2");
      
    function setBubblePlot(chosenDisk) {
        getDiskData(chosenDisk);
        //console.log(currentReadPerSec.length);
        //console.log(currentReadPerSec);

        var dataset1 = {
          x: allSnapshots,
          y: currentReadPerSec,
          type: 'scatter',
          mode: 'lines+markers'
        };

        var data = [dataset1];

        var layout = {		  
            yaxis: {
                title: '<b>Reads per sec</b>',
                rangemode: 'tozero',
                range: [0, 200],
                tick0: 0,
                dtick: 20
            },
            margin: {
                t: 25,
                b: 40,
                l: 30,
                r: 10
            }
        };

        Plotly.newPlot('plotdiv', data, layout);
    };
      
    var innerContainer = document.querySelector('[data-num="0"'),
        plotEl = innerContainer.querySelector('.plot'),
        diskSelector = innerContainer.querySelector('.diskdata');

    function assignOptions(textArray, selector) {
      for (var i = 0; i < textArray.length;  i++) {
          var currentOption = document.createElement('option');
          currentOption.text = textArray[i];
          selector.appendChild(currentOption);
      }
    }

    assignOptions(listOfDisks, diskSelector);

    function updateDisk(){
        setBubblePlot(diskSelector.value);
    }
      
    diskSelector.addEventListener('change', updateDisk, false);

</script>
</body>
</html>

Your y array looks like:

image

which isn’t valid. All data arrays in scatter traces must be 1D in plotly.js.


We allow a few more special configurations on plot.ly for backward compatibility that we took out of plotly.js. That’s why your graph shows up on plot.ly and not in your app.

Thanks for the quick reply. It was my mistake to assign the value as an array, don’t know what was I thinking. I have fixed it now.

allReadsPerSec[0][0]=20;
allReadsPerSec[1][0]=40;
allReadsPerSec[2][0]=90;
allReadsPerSec[0][1]=30;
allReadsPerSec[1][1]=10;
allReadsPerSec[2][1]=40;
allReadsPerSec[0][2]=30;
allReadsPerSec[1][2]=20;
allReadsPerSec[2][2]=70;
allReadsPerSec[0][3]=130;
allReadsPerSec[1][3]=10;
allReadsPerSec[2][3]=70;
allReadsPerSec[0][4]=30;
allReadsPerSec[1][4]=10;
allReadsPerSec[2][4]=40;