Graph plot in a responsive div using Plotly.js

Question

Graph plot in a responsive div using Plotly.js

My project involves creating a webpage with dynamic div elements that resize upon mouseover using a straightforward CSS class. I've set it up so that these divs start off small when the page loads, but expand when a user hovers over them.

The CSS code looks something like this:

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

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

I am currently working on making the plots generated by Plotly.js within these divs automatically adjust their size as the user hovers over them.

Here's the JavaScript function for creating the graphs:

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});

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

        })();
    }
}

The section of commented out code indicates where I'm uncertain about how to make everything function as intended. I've tried various approaches without success so far.

All the content on the page is dynamically generated in C# code based on text files provided by users.

A related question that I came across can be found here, but I'm unsure if and how it applies to my specific implementation.

javascript c#jquery css plotly

Answer 1

Answer №1

Check out plotly's resize feature.

The graph in the code snippet below adjusts its size randomly when hovered over. Feel free to customize it according to your requirements.

(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: 'Graph resizes randomly on hover',
    font: {
      size: 16
    }
  });

  document.getElementById("myDiv").on('plotly_hover', function(data) {
    window.alert("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 size on hover, return to 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>

Answer 2

Check out plotly's resize feature.

The graph in the code snippet below adjusts its size randomly when hovered over. Feel free to customize it according to your requirements.

(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: 'Graph resizes randomly on hover',
    font: {
      size: 16
    }
  });

  document.getElementById("myDiv").on('plotly_hover', function(data) {
    window.alert("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 size on hover, return to 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>

Answer 3

Answer №2

Transforming a div into a resizable element is achievable by applying the style properties resize:both; overflow: auto. Plotly's responsiveness to window resizing can be enhanced by setting the configuration option responsive: true, enabling synchronization between div and window resize events. The method of detecting div resizing is elaborated at this link. To see these principles in action, check out this demo on JSFiddle.

<html>
<head>
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id='myDiv' style="resize:both; overflow: auto; border: 1px solid; height:250px">
</div>

<script>

let observer = new MutationObserver(function(mutations) {
  window.dispatchEvent(new Event('resize'));
});

let child = document.getElementById('myDiv');
observer.observe(child, {attributes: true})

var trace1 = {
  type: 'bar',
  x: [1, 2, 3, 4],
  y: [5, 10, 2, 8],
}

var data = [trace1]
var layout = {
  margin: {l: 20, r: 10, b: 20, t: 10}
}
var config = {responsive: true}

Plotly.newPlot('myDiv', data, layout, config);
</script>

</body>
</html>

Answer 4

Transforming a div into a resizable element is achievable by applying the style properties resize:both; overflow: auto. Plotly's responsiveness to window resizing can be enhanced by setting the configuration option responsive: true, enabling synchronization between div and window resize events. The method of detecting div resizing is elaborated at this link. To see these principles in action, check out this demo on JSFiddle.

<html>
<head>
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id='myDiv' style="resize:both; overflow: auto; border: 1px solid; height:250px">
</div>

<script>

let observer = new MutationObserver(function(mutations) {
  window.dispatchEvent(new Event('resize'));
});

let child = document.getElementById('myDiv');
observer.observe(child, {attributes: true})

var trace1 = {
  type: 'bar',
  x: [1, 2, 3, 4],
  y: [5, 10, 2, 8],
}

var data = [trace1]
var layout = {
  margin: {l: 20, r: 10, b: 20, t: 10}
}
var config = {responsive: true}

Plotly.newPlot('myDiv', data, layout, config);
</script>

</body>
</html>

Answer 5

Answer №3

As per the information found on resizing elements, the parameter responsive is included in the configuration:

var settings = {responsive: true}

Plotly.newPlot('myContainer', dataset, design, settings );

Answer 6

As per the information found on resizing elements, the parameter responsive is included in the configuration:

var settings = {responsive: true}

Plotly.newPlot('myContainer', dataset, design, settings );

Graph plot in a responsive div using Plotly.js

Answer №1

Answer №2

Answer №3

Similar questions

XSLT issue with Internet Explorer 11 - unable to transform XML file

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

The UI in an angular directive is not getting refreshed due to issues with the

Exploring the application of conditional logic within HTML coding

What is causing my Nuxt.js application to show a blank page following deployment on Netlify?

What is a clever way to code this Angular HTML using just a single <a> tag?

When interacting with Chrome, the div gets automatically blurred upon being clicked

The validation of class names in jQuery is not functioning correctly for text fields that are dynamically

Having difficulty dynamically updating a button's state based on the number of elements in a list

How to incorporate an $gte/$lt condition within an $in operator in node.js with MongoDB

Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

"Table layout set to fixed is failing to function as intended

Update submenu panel in jQuery Mobile version 1.4.3 following AJAX request

The Codepen demo for SemanticUI is not functioning properly

What are the differences between a Chrome app and extension? Is there any other way to access the tabs currently open in your

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

What could be causing the content to disappear when switching from flex: column to flex: row?

Guide to setting up a multi-column grid system with Bootstrap and CSS

Uploading a JSON file in Azure Cosmos DB using C#/.NET

Modifying material in Three.js