Skip to content

Instantly share code, notes, and snippets.

@aerispaha

aerispaha/index.html

Created January 6, 2017 17:06
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save aerispaha/63bb83208e6728188a4ee701d2b25ad5 to your computer and use it in GitHub Desktop.
Save aerispaha/63bb83208e6728188a4ee701d2b25ad5 to your computer and use it in GitHub Desktop.
Download ZIP
Make Plotly figures responsive in Bootstrap by assigning class
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Plotly Charts</title>
<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="/static/favicon.ico">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- ADD THE responsive-plot CLASS -->
<div id="plot1" class="responsive-plot"></div>
</div>
<div class="col-md-3">
<!-- ADD THE responsive-plot CLASS -->
<div id="plot2" class="responsive-plot"></div>
</div>
<div class="col-md-3">
<!-- ADD THE responsive-plot CLASS -->
<div id="plot3" class="responsive-plot"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- CREATE THE RESPONSIVE PLOTLY PLOTS -->
<script src="my_plot_scripts.js"></script>
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/scripts.js"></script>
</body>
</html>
Raw
my_plot_scripts.js
//create the Plotly plots
Plotly.newPlot("plot", data1);
Plotly.newPlot("plot2", data2);
Plotly.newPlot("plot3", data3);
// MAKE THE PLOTS RESPONSIVE
(function() {
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
HEIGHT_IN_PERCENT_OF_PARENT = 90;
var gd3 = d3.selectAll(".responsive-plot")
.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 nodes_to_resize = gd3[0]; //not sure why but the goods are within a nested array
window.onresize = function() {
for (var i = 0; i < nodes_to_resize.length; i++) {
Plotly.Plots.resize(nodes_to_resize[i]);
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment