0

I'm using angular-chart (and Angular, obviously) and chart.js to draw several charts on a single page. Presently, each chart takes up the entire width of the screen. I've tried many different variations to limit the width based on a ratio of "window.innerWidth", and many different structural variations. All of my efforts are ignored. It draws a perfectly fine chart, but with an unwavering width (except for changing when I expand/narrow the overall window).

Here is an excerpt of my current HTML:

<div ng-repeat="dataCenterData in dataCenterDataList">
 <div ng-style="{'width': windowWidth / 2}">
  <canvas id="daily-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 ng-style="{'width': windowWidth / 2}">
  <canvas id="last30Minutes-chart-{{dataCenterData.dataCenter}}"
  class="chart chart-line"
  chart-data="last30MinutesDataCenterDataList[$index].data"
  chart-labels="last30MinutesDataCenterDataList[$index].labels"
  chart-series="last30MinutesDataCenterDataList[$index].series"
  chart-options="last30MinutesDataCenterDataList[$index].options"></canvas>
 </div>
</div>

Where I have "$scope.windowWidth = window.innerWidth" in my controller. I determined in my current test case, it's setting "$scope.windowWidth" to 1432.

David M. Karr
  • 14,317
  • 20
  • 94
  • 199

1 Answers1

0

Bootstrap grid system will help you two display charts in two columns of the same row. A row in bootstrap has 12 columns. so, for a two column layout, we split them into two div of 6 each like this.

<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
        <div class="col-md-6">
            Column1
        </div>
        <div class="col-md-6">
            Column2
        </div>
    </div>
</div>

Demo: https://jsfiddle.net/codeandcloud/vz4qhqpw/show/
Source Code: https://jsfiddle.net/codeandcloud/vz4qhqpw/

Dependencies

  1. jQuery.js
  2. Bootstrap.js
  3. Bootstrap.css

If you want them in two rows do something like

<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            Column1
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            Column2
        </div>
    </div>
</div>
naveen
  • 53,448
  • 46
  • 161
  • 251
  • I want it to render with each "daily-chart" and "last30Minutes-chart" to be on top of each other, so the "daily-chart" instances are in the first row, and the "last30Minutes-chart" instances are in the second row, but I might create some visual grouping to make it clear each "daily-chart" is associated with the "last30Minutes-chart" below it. – David M. Karr Aug 12 '16 at 02:38