Chart SPA in infinite resize loop in chrome kiosk

davidmichaelkarr commented 8 years ago

I have a small SPA displaying a set of charts on a page with a title, using Angular and angular-chart. It just renders as many charts as will fit on the page, in a fluid bootstrap container. When I display the page on my laptop, it works fine.

The target for this app is to display on a large monitor in kiosk mode. Just now I tried displaying it in chrome's kiosk mode, and it immediately went into an infinite resize loop (or at least I assume it's resizing). The effect is that the entire display is constantly flashing.

I don't know whether this is a bootstrap problem or a chart.js problem.

If it matters, the following is the HTML for the page:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" data-ng-app="OrdersApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"/>
    <title>Orders</title>
    <style type="text/css">
    </style>
</head>
<body data-ng-controller="OrdersCtrl">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//cdn.jsdelivr.net/chart.js/2.2.1/Chart.min.js"></script>
    <script src="//cdn.jsdelivr.net/angular.chartjs/1.0.0/angular-chart.min.js"></script>
    <script src="js/ordersMod.js"></script>
    <script src="js/constants.js"></script>
    <script src="js/utilsMod.js"></script>
    <script src="js/ordersApp.js"></script>

    <div class="container-fluid">
        <div ng-if="hourlyDataCenterDataList == null || hourlyDataCenterDataList.length == 0">
            <h1 class="text-center col-md-4 col-md-offset-4">
                <em>Connection established. Waiting for data ...</em>
            </h1>
        </div>
        <div ng-if="hourlyDataCenterDataList != null && hourlyDataCenterDataList.length > 0">
            <h3 class="text-center">... Dashboard</h3>
            <div class="row">
                <div ng-repeat="dataCenterData in last30MinutesDataCenterDataList">
                    <div class="col-md-3">
                        <canvas id="last30Minutes-chart-{{dataCenterData.dataCenter}}"
                            class="chart chart-line" chart-data="dataCenterData.data"
                            chart-labels="dataCenterData.labels"
                            chart-series="dataCenterData.series"
                            chart-options="dataCenterData.options"></canvas>
                    </div>
                </div>
                <div ng-repeat="dataCenterData in hourlyDataCenterDataList">
                    <div class="col-md-3">
                        <canvas id="hourly-chart-{{dataCenterData.dataCenter}}"
                            class="chart chart-bar" chart-data="dataCenterData.data"
                            chart-labels="dataCenterData.labels"
                            chart-series="dataCenterData.series"
                            chart-options="dataCenterData.options"></canvas>
                    </div>
                </div>
                <div class="col-md-3">
                    <canvas id="aggregate-chart" class="chart chart-bar"
                        chart-data="aggregateData.data"
                        chart-labels="aggregateData.labels"
                        chart-series="aggregateData.series"
                        chart-options="aggregateData.options"></canvas>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

etimberg commented 8 years ago

This is a chartjs problem related to browser scrollbars. What happens is the chart becomes tall enough to make the page have scrollbars which reduces the chart width which changes the height to remove scrollbars which changes the width, etc. You might be able to work around it by always having scrollbars.

I'll try and think of a good solution.

@simonbrunel any ideas?

davidmichaelkarr commented 8 years ago

I had just found that potential workaround a couple of minutes ago. It actually solves that particular problem, noting that having scrollbars on the screen isn't ideal.

However, this now creates another problem. Curiously, instead of "packing" each chart to fill each row (typically 13 charts, 4 per row in the first rows, with one left over), for some reason it's displaying 4 charts in the first and third rows, then in the second and fourth rows, the first two positions are blank. It still results in the one left over on the bottom row.

This particular test case is displaying on a larger monitor. Perhaps this is happening because some combination of bootstrap and chart.js is trying to use the entire display space, vertically in addition to horizontally. I guess I need to figure out how to be strict in using the available horizontal space, but allowing blank space in the vertical dimension.

etimberg commented 7 years ago

Closing as duplicate of #2127

chartjs / Chart.js

Chart SPA in infinite resize loop in chrome kiosk #3264