Y axis does not show up

plotly.js
1

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>
2

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.

3

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;