Results 1 to 2 of 2

Thread: fluid container rendering one chart with truncated left side

  1. #1

    fluid container rendering one chart with truncated left side

    I have a small SPA using angular, angular-chart, charts.js, and bootstrap.

    The page uses a fluid container and just dumps a bunch of bar and line charts, jamming as many in each row as can fit comfortably. In general, it works well enough, but I noticed a minor annoyance in that the first chart in the third row has the first digit of the y-axis labels cut off.

    I don't know if this is a charts.js problem or a bootstrap problem (angular-chart seems unlikely). I'm going to post a similar issue in the charts.js project.

    I'm going to attach five screenshots. One shows the overall picture of the page, showing the truncated chart. The other four are screenshots of the Firebug "Quick Info" panel that shows some of the CSS values for a selected component. Each of those four screenshots has the first chart in each row selected. Looking at these, you'll see that for rows 1, 2, and 4, the "margin-left" property is "5px". For row 3, the margin-left property is "-15px".
    Row4Col1CSSModified.jpgRow4Col1CSSModified.jpgRow4Col1CSSModified.jpgRow4Col1CSSModified.jpgRow4Col1CSSModified.jpg

    The following is the HTML for the page:
    HTML Code:
    <!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="dataCenterDataList == null || dataCenterDataList.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="dataCenterDataList != null && dataCenterDataList.length > 0">
          <h3 class="text-center">xxx</h3>
          <div class="row">
            <div ng-repeat="dataCenterData in last30MinutesDataCenterDataList">
              <div class="row col-md-3" style="margin-left: 5px">
                <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 dataCenterDataList">
              <div class="row col-md-3">
                <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>
            <div class="row col-md-3" style="margin-left: 5px">
              <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>
    Any idea where the problem for this lies, and a way to fix it?

  2. #2
    Never mind. My key problem was that I was applying the "row" class at two different levels of this hierarchy. Once I removed it from the lower level, the display was a little more sane.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •