current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
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 Aug 11 at 22:44
    
Oh, right. Need to figure out bootstrap. – David M. Karr Aug 11 at 22:54
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 Aug 12 at 2:38

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.