CODEWITHSUNDEEP
javascriptplotlyboxplot
Astael
Astael

Reputation: 33

How to have a fixed categorical range for box plots in plotly.js

I am currently trying to have a fixed range for categorical box plots in plotly.js, in order to always have the same graph size and layout even if some traces have no data.

If you look at this CodePen based on a example of the docs, the "David West" trace still appears because it's in the middle, but the "Demar Derozan" on the right is not seen, because it's at the end, and the graph size is computed with the data extremas.

Is it possible in plotly.js to have a fixed categorical axis for box plots?

HTML: 

<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <!-- Plotly chart will be drawn inside this DIV -->
    <div id="myDiv"></div>
    <script>
        /* JAVASCRIPT CODE GOES HERE */
    </script>
 </body>

Javascript:

var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
      'Deron<br>Williams', 'Brook<br>Lopez',
      'Damian<br>Lillard', 'David<br>West',
      'Blake<br>Griffin', 'David<br>Lee',
      'Demar<br>Derozan'];
function getrandom(num , mul) 
{
   var value = [ ]  
    for(i=0;i<=num;i++)
   {
     rand=Math.random() * mul;
    value.push(rand);
    }
    return value
}
var yData = [
   getrandom(30 ,10),
   getrandom(30, 20),
   getrandom(30, 25),
   getrandom(30, 40),
   getrandom(30, 45),
   getrandom(30, NaN),
   getrandom(30, 20),
   getrandom(30, 15),
   getrandom(30, NaN)
];

var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];

var data = [];

for ( var i = 0; i < xData.length; i ++ ) {
  var result = {
    type: 'box',
    y: yData[i],
    name: xData[i],
    boxpoints: 'all',
    jitter: 0.5,
    whiskerwidth: 0.2,
    fillcolor: 'cls',
    marker: {
      size: 2
    },
    line: {
      width: 1
    }
  };
  data.push(result);
};

layout = {
    title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
    yaxis: {
        autorange: true,
        showgrid: true,
        zeroline: true,
        dtick: 5,
        gridcolor: 'rgb(255, 255, 255)',
        gridwidth: 1,
        zerolinecolor: 'rgb(255, 255, 255)',
        zerolinewidth: 2
    },
    margin: {
        l: 40,
        r: 30,
        b: 80,
        t: 100
    },
    paper_bgcolor: 'rgb(243, 243, 243)',
    plot_bgcolor: 'rgb(243, 243, 243)',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout);

Upvotes: 3

Views: 875

Answers (1)

phil
phil

Reputation: 1359

you could add a fixed range to your xaxis in the layout-object.

xaxis:{range: [-1,9]}

To have a more dynamic way you can use the amount of different data, so its dynamic if you have less data (e.g. Top 3 instead Top 9):

xaxis:{range: [-1,data.length]}

I added it to your codepen: http://codepen.io/anon/pen/MbppBN

Hope it helps:-)

Upvotes: 2

Related Questions