# Y axis does not show up

**URL:** <https://community.plotly.com/t/y-axis-does-not-show-up/7709>\
**Category:** plotly.js\
**Created:** [January 12, 2018, 11:25pm UTC](https://community.plotly.com/t/y-axis-does-not-show-up/7709 "2018-01-12T23:25:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![garga1](https://avatars.discourse-cdn.com/v4/letter/g/ecae2f/32.png) [@garga1](https://community.plotly.com/u/garga1)\
**Post date:** [January 12, 2018, 11:25pm UTC](https://community.plotly.com/t/y-axis-does-not-show-up/7709/1 "2018-01-12T23:25:06Z")

</div>

Hi,  
I am testing dropdown menus using this link ([https://plot.ly/javascript/dropdowns/](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>
```

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [January 12, 2018, 11:58pm UTC](https://community.plotly.com/t/y-axis-does-not-show-up/7709/2 "2018-01-12T23:58:38Z")

</div>

Your `y` array looks like:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9bd38d78120dec1ff2ba2e66810d44438f272497.png)

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.

---

<div class="post-metadata">

**Author:** ![garga1](https://avatars.discourse-cdn.com/v4/letter/g/ecae2f/32.png) [@garga1](https://community.plotly.com/u/garga1)\
**Post date:** [January 13, 2018, 12:59am UTC](https://community.plotly.com/t/y-axis-does-not-show-up/7709/3 "2018-01-13T00:59:22Z")

</div>

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;
```
