Guernica88 Guernica88 - 17 days ago 21
C# Question

Plotly js responsive graph in div

I am making a page with dynamically created divs that resize on mouseover using a simple css class. I use it so these divs are small when the page is loaded then if a user wants a closer look they just mouse over.

CSS basically looks like this

.resize {
width: 400px;
height: 300px;
transition: all 1s;
}

.resize:hover {
width: 800px;
height: 600px;
}


I am trying to make the plot I create with Plotly.js in this div automatically resize as the user mouses over.

JS code

function doGraph(){
for(index = 0; index < divArr.length; ++index){
(function() {
var d3 = Plotly.d3;

var gd3 = d3.select("div[id='"+divArr[index]+"']");
//.append('div')
//.style({
// width: "95%", "margin-left": "2.5%",

// height: "95%", "margin-top": "2.5%"
//});

var gd = gd3.node();

Plotly.newPlot(gd, [{
mode:'lines',
x: xArr[index],
y: yArr[index], }],
layout , {scrollZoom:true,modeBarButtonsToRemove:['sendDataToCloud'],showLink:false,displaylogo:false});

//gd.onresize = function() {
// Plotly.Plots.resize(gd);
//};
window.addEventListener('resize', function() { Plotly.Plots.relayout(gd); });

})();
}
}


The commented out code shows where I'm not sure what I need to do to make this work. So far all the tinkering I've done has resulted in nothing.

Everything on the page is dynamically created in c# codebehind based on txt files generated by my users.

I found a q/a that seemed relevent Here but to be honest I'm not sure how it might apply to my code.

Answer

Have a look at plotly's resize function.

The graph in the snippet below randomly resizes on hover-over. I hope you can easily modify to it for your use.

(function() {
  var d3 = Plotly.d3;

  var WIDTH_IN_PERCENT_OF_PARENT = 60,
    HEIGHT_IN_PERCENT_OF_PARENT = 80;

  var gd3 = d3.select('#myDiv')
    .style({
      width: (Math.random() + Math.random()) * WIDTH_IN_PERCENT_OF_PARENT + '%',
      'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

      height: (Math.random() + Math.random()) * HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
    });

  var gd = gd3.node();

  a = Plotly.plot(gd, [{
    type: 'bar',
    x: [1, 2, 3, 4],
    y: [5, 10, 2, 8],

  }], {
    title: 'Random resize on hover',
    font: {
      size: 16
    }
  });

  document.getElementById("myDiv").on('plotly_hover', function(data) {
    window.alert("I'm resizing now");
    gd3 = d3.select('#myDiv')
      .style({
        width: (0.5 + Math.random() + Math.random()) * WIDTH_IN_PERCENT_OF_PARENT + '%',
        height: (0.5 + Math.random() + Math.random()) * HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      });
    gd = gd3.node()
    Plotly.Plots.resize(gd);;
  });


})();
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>


(function() {
  var d3 = Plotly.d3;

  var WIDTH_IN_PERCENT_OF_PARENT = 60,
    HEIGHT_IN_PERCENT_OF_PARENT = 80;

  var gd3 = d3.select('#myDiv')
    .style({
      width: WIDTH_IN_PERCENT_OF_PARENT + '%',
      'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

      height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
    });

  var gd = gd3.node();

  a = Plotly.plot(gd, [{
    type: 'bar',
    x: [1, 2, 3, 4],
    y: [5, 10, 2, 8],

  }], {
    title: 'Double on hover, normal on unhover',
    font: {
      size: 16
    }
  });

  document.getElementById("myDiv").on('plotly_hover', function(data) {
    gd3.style({
        width: 2 * WIDTH_IN_PERCENT_OF_PARENT + '%',
        height: 2 * HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      });
    gd = gd3.node()
    Plotly.Plots.resize(gd);;
  });

  document.getElementById("myDiv").on('plotly_unhover', function(data) {
    gd3.style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      });
    gd = gd3.node()
    Plotly.Plots.resize(gd);;
  });


})();
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<div id='myDiv'></div>

Comments