Skip to content

Instantly share code, notes, and snippets.

@etpinard

etpinard/ plotlyjs auto-resize

Last active October 2, 2015 20:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save etpinard/edc678711ca231a8a4a5 to your computer and use it in GitHub Desktop.
Save etpinard/edc678711ca231a8a4a5 to your computer and use it in GitHub Desktop.
Download ZIP
plotlyjs auto-resize
Raw
plotlyjs auto-resize
plotlyjs auto-resize
Raw
README.md

For more info about plotlyjs, refer to our online documentation page.

Raw
index.html
<html>
<head>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/237913/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.5/d3.js" charset="utf-8"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/237913/plotly.min.js" charset="utf-8"></script>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
Raw
main.js
/* global Plotly:false, d3:false */
// Some info about viewport percentages:
// http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window
(function() {
var WIDTH_IN_PERCENT_OF_PARENT = 60,
HEIGHT_IN_PERCENT_OF_PARENT = 80;
var gd3 = d3.select('body')
.append('div')
.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();
Plotly.plot(gd, [{
type: 'bar',
x: [1, 2, 3, 4],
y: [5, 10, 2, 8],
marker: {
color: '#d3d3d3',
line: {
width: 2.5
}
}
}], {
title: 'plotlyjs auto-resize',
font: {
size: 16
}
});
window.onresize = function() {
Plotly.Plots.resize(gd);
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment