Open mg1075 opened 9 years ago
window.addEventListener('resize', function() {
chart.resizeToContainerSize();
});
The above does the trick, assuming the container has appropriate size and styles. It's probably a good idea to throttle the resize handler function. Working on a demo showing this.
(1). Ah, thanks for pointing that out; I completely missed it. It would be cool if, by default and irrespective of whether the range is maxed out, the slider had handles like the range sliders you see in Google finance charts, dygraphs, and Boundary itself.
(2). Sounds good. I tried a simple experiment inside a bootstrap container, and the resize call worked well.
(3). If it is possible, that would be great. I have seen other libraries like rickshaw and dygraphs not handle the range slider properly out-of-the-box. The live data updates come, you drag the range handles, and then the handles themselves end up getting pushed off the screen. (I opened a query about this on stackoverflow: http://stackoverflow.com/questions/28820515/live-update-to-dygraphs-and-impact-on-rangeselector-position)
(2). Created a new demo for this: https://github.com/boundary/firespray/blob/master/demo/responsive-demo.html
Thanks.
Looks like it is worth noting the api for generating data from is different between 0.1.2 and 0.1.3.
0.1.2: firespray.utils.generateData(...)
0.1.3: firespray.dataUtils.generateData(...)
If it helps, here also is a responsive demo using bootstrap and firespray 0.1.3.
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive demo with Bootstrap</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="../lib/d3.js"></script>
<script src="../firespray-0.1.3.js"></script>
<!-- use the src scripts below if you want to quickly test in jsbin or other online editor -->
<!--
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/boundary/firespray/master/firespray-0.1.3.js"></script>
-->
<style>
.chart-holder-1 {
height: 100px;
}
.chart-holder-2 {
height: 300px;
}
.chart-holder-3 {
height: 300px;
}
text {
font-size: 10px;
}
.spacer100 {
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div class="spacer100"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="chart-holder-1"></div>
</div>
<div class="col-md-4">
<div class="chart-holder-2"></div>
</div>
<div class="col-md-4">
<div class="chart-holder-3"></div>
</div>
</div>
</div>
<script type="text/javascript">
var container1 = document.querySelector('.chart-holder-1');
var data = firespray.dataUtils.generateData({pointCount: 100, lineCount: 5});
var timeSelectorChart = firespray.chart()
.setConfig({
container: container1,
width: container1.clientWidth,
height: container1.clientHeight,
theme: 'default',
geometryType: 'line',
showAxisY: false,
useBrush: true
})
.on('brushChange', function(brushExtent) {
chart1.setData(timeSelectorChart.getDataUnderBrush());
chart2.setData(timeSelectorChart.getDataUnderBrush());
})
.setData(data);
var container2 = document.querySelector('.chart-holder-2');
var chart1 = firespray.chart()
.setConfig({
container: container2,
width: container2.clientWidth,
height: container2.clientHeight,
theme: 'default',
geometryType: 'stackedArea'
})
.setData(data);
var container3 = document.querySelector('.chart-holder-3');
var chart2 = firespray.chart()
.setConfig({
container: container3,
width: container3.clientWidth,
height: container3.clientHeight,
theme: 'default',
geometryType: 'stackedBar'
})
.setData(data);
window.addEventListener('resize', function () {
timeSelectorChart.resizeToContainerSize();
chart1.resizeToContainerSize();
chart2.resizeToContainerSize();
});
</script>
</body>
</html>
Thanks for sharing the sample! Indeed, we should update the demos that use 0.1.2.
The old time slider example looks great; the slider works and the chart itself is responsive to browser re-sizing.
http://bl.ocks.org/biovisualize/raw/bdf17be85fc96d629ade/
However, the slider-demo in the github project does not work for me. All that displays is a crosshair cursor with no sliding action. The charts are not responsive to browser re-sizing, either.
https://github.com/boundary/firespray/blob/master/demo/slider-demo.html