Toggle Chart / Table (external JSAPI works)
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myApp">
<div ng-controller="myController" class="row-fluid">
<!-- START SPAN3-->
<div class="span3">
<div class="span12 well well-small">
<label class="nav-header">Toggle Chart/Table</label>
<div class="btn-group">
<button id="btnBoth" btn-radio="'btnBoth'" type="button" class="btn btn-small active" data-ng-model="chartTableActive" data-ng-click="chartTableToggleFunction()"> <i class="icon-fullscreen"></i>
</button>
<button id="btnChart" btn-radio="'btnChart'" type="button" class="btn btn-small" data-ng-model="chartTableActive" data-ng-click="chartTableToggleFunction()"> <i class="icon-picture"></i>
</button>
<button id="btnTable" btn-radio="'btnTable'" type="button" class="btn btn-small" data-ng-model="chartTableActive" data-ng-click="chartTableToggleFunction()"> <i class="icon-align-justify"></i>
</button>
</div>
</div>
<div class="span12 well well-small">
<p class="nav-header">$scope.[model] updates</p>
<div class="span12">
<label>chartTableActive</label>
<input class="input-mini" data-ng-model="chartTableActive" />
...
CSS
label, input {
font-variant: small-caps !important;
text-rendering: auto;
}
<!-- Make the RESULT page wide enough to show the toggle buttons & form fields to the left and the chart & table to the right. -->
<!-- Includes -->
<!--
http://www.google.com/jsapi?ext.js
...and then the chart DOES work.
-->
JavaScript
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('myController', function ($scope) {
$scope.chartTableActive = "btnBoth";
$scope.chartCollapsed = false;
$scope.tableCollapsed = false;
$scope.chartTableToggleFunction = function () {
if ($scope.chartTableActive == "btnBoth") {
$scope.chartCollapsed = false;
$scope.tableCollapsed = false;
} else if ($scope.chartTableActive == "btnChart") {
$scope.chartCollapsed = false;
$scope.tableCollapsed = true;
} else if ($scope.chartTableActive == "btnTable") {
$scope.chartCollapsed = true;
$scope.tableCollapsed = false;
}
}
$scope.storeDataModel = {
"metadata": {
"storesInTotal": "25",
"storesInRepresentation": "2"
},
"storedata": [{
"store": {
"storeId": "1000",
"storeName": "Store 1",
"storePhone": "+46 31 1234567",
"storeAddress": "Some street 1",
"storeCity": "Gothenburg"
},
"data": {
"startDate": "2013-07-01",
"endDate": "2013-07-02",
"costTotal": "100000",
"salesTotal": "150000",
"revenueTotal": "50000",
"averageEmployees": "3.5",
"averageEmployeesHours": "26.5",
"dayData": [{
"date": "2013-07-01",
"cost": "25000",
"sales": "15000",
"revenue": "4000",
"employees": "3",
"employeesHoursSum": "24"
}, {
"date": "2013-07-02",
"cost": "25000",
"sales": "16000",
"revenue": "5000",
...