demo pages #6

mg1075 · 2015-04-03T15:20:31Z

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

Is it possible to have a working demo for the range slider?
Is it possible to have the charts be responsive by default?
Is it possible to have a demo of streaming data combined with a range slider?

wcainboundary · 2015-04-03T18:00:09Z

The interaction may not be obvious in the demo, but try grabbing the edges of the top chart, and you should be able to shrink and then move the sliding window used to set the x-domain of the two lower charts.
Responsive by default is not supported at this time, but the chart's resizeToContainerSize method provides a way to achieve that. You can connect this to a window resize event, such as the following example:

    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.
3. Good idea for a future demo.

mg1075 · 2015-04-03T18:56:27Z

(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)

wcainboundary · 2015-04-08T17:00:14Z

(2). Created a new demo for this: https://github.com/boundary/firespray/blob/master/demo/responsive-demo.html

mg1075 · 2015-04-08T17:31:54Z

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>

wcainboundary · 2015-04-09T14:03:54Z

Thanks for sharing the sample! Indeed, we should update the demos that use 0.1.2.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

demo pages #6

demo pages #6

mg1075 commented Apr 3, 2015

wcainboundary commented Apr 3, 2015

mg1075 commented Apr 3, 2015

wcainboundary commented Apr 8, 2015

mg1075 commented Apr 8, 2015

wcainboundary commented Apr 9, 2015

demo pages #6

demo pages #6

Comments

mg1075 commented Apr 3, 2015

wcainboundary commented Apr 3, 2015

mg1075 commented Apr 3, 2015

wcainboundary commented Apr 8, 2015

mg1075 commented Apr 8, 2015

wcainboundary commented Apr 9, 2015