current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

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.

share|improve this question
    
the charts website is using bootstrap css with container > row > col-md-6 for the effect – naveen 18 hours ago
    
Oh, right. Need to figure out bootstrap. – David M. Karr 18 hours ago
up vote 0 down vote

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>
share|improve this answer
    
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 15 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.