<!DOCTYPE html>
<html>
<head>
<link data-semver="3.2.0" rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxangular.js"></script>
<script src="app/dashboard/dashboard.js"></script>
</head>
<body ng-app="app" ng-controller="dashboard as vm">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Razor</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row-fluid">
<jqx-tree jqx-data="kriData" jqx-height="300">
<ul>
<li ng-repeat="kriGroup in data">{{kriGroup.group}}
<ul ng-if="kriGroup.kris">
<li ng-repeat="kri in kriGroup.kris">{{kri.kri}}</li>
</ul>
</li>
</ul>
</jqx-tree>
</div>
<div class="row-fluid">
<div class="col-md-12">
JQWidgets Column Chart Example
<jqx-chart jqx-settings="vm.jqColChartSettings" style="width: 850px; height: 500px;"></jqx-chart>
</div>
</div>
</body>
</html>
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'jqwidgets' // jQWidgets init and directives (loaded in index.html)
]);
// Handle routing errors and success events
app.run(['$route', '$rootScope', function ($route, $rootScope) {
// Include $route to kick start the router.
console.log("In app.run");
}]);
})();
(function () {
/// Initial startup index.html page; see config.route.js --> url: '/'
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId,
['$scope', '$rootScope', '$routeParams', '$location', 'jqwidgets', dashboard]);
function dashboard($scope, $rootScope, $routeParams, $location, jqwidgets) {
var vm = this;
vm.sessionID = '';
vm.razorEnvParams = [];
vm.news = {
title: 'RAGE Aggregation Online',
description: 'RAGE is a Dynamic Aggregation Engine – written to read cubes and accept queries to dynamically aggregate data. .'
};
// jq grid and Column Chart settings initialized in _generic function below
vm.jqGridHierSettings = {};
vm.jqColChartSettings = {};
activate();
$scope.kriData = [
{
"group": "99_HSVaR",
"kris": [
{
"kri": "1D"
},
{
"kri": "1D CR"
},
{
"kri": "1D EQ"
},
{
"kri": "1D EUR/USD"
}
]
},
{
"group": "Additive",
"kris": [
{
"kri": "MCS"
}
]
},
{
"group": "AsianCrisis",
"kris": [
{
"kri": "Stressed"
}
]
}
];
function activate() {
alert('TEST CHART !!!!')
initChartSettings();
}
/// CREATE A GENERIC HIERARCY GRID
/// Get the grid's schema model and columns definition from gridHierarchyService.js
function initHierarchyGrid_Generic(reportType, data, isHierarchy, isDynamic) {
isDynamic = (isDynamic == undefined ? false : isDynamic);
if (isDynamic) {
if ($rootScope.reptWizard == undefined) { return }; // Problem here when user clicks on a non-leaf tree node; it a triggers a blank reports dashboard.
// in this case we have saved everything to $rootScope, all from reportmaint controller
myModel = $rootScope.reptWizard.modelDef;
myColumns = $rootScope.reptWizard.colDefs;
myData = $rootScope.reptWizard.aggrResults;
}
else {
// old way, hard coding stuff to test..
var myModel = gridHierarchyService.getDataSourceModel(reportType, data);
var myColumns = gridHierarchyService.getColumnDefs(reportType, data);
var myColumnsJQ = gridHierarchyService.getColumnDefsJQ(reportType, data);
var myData = gridHierarchyService.getDataRows(reportType, data);
if (vm.mainGridTitle == undefined || vm.mainGridTitle == "") {
vm.mainGridTitle = reportType;
}
}
// add Json data onto myModel object; define jqWidgets data adapter
myModel["localData"] = myData;
var dataAdapter = new $.jqx.dataAdapter(myModel);
$scope.jqGridHierObj = {}; // FYI: jqx-instance attrib in html doesn't like the "vm" qualifier
vm.jqGridHierSettings = { // jqwidgets grid settings binded to html
altrows: true,
sortable: true,
columnsResize: true,
editable: true,
//localization: getLocalization('en'),
showToolbar: false,
width: '100%', //600,
height: 400,
source: (isDynamic ? dataAdapter : myData),
columns: (isDynamic ? myColumns : myColumnsJQ ),
};
return vm.jqGridHierSettings;
}
function initChartSettings() {
var myData = [
{ Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
{ Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
{ Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
{ Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
{ Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
{ Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
{ Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];
var myModel = {
datatype: "json",
datafields: [
{ name: 'Day'},
{ name: 'Keith' },
{ name: 'Erica' },
{ name: 'George' }
]
};
myModel["localData"] = myData;
var dataAdapter = new $.jqx.dataAdapter(myModel);
vm.jqColChartSettings = {
title: "Fitness & exercise weekly scorecard",
description: "Time spent in vigorous exercise",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter, // myData,
xAxis:
{
dataField: 'Day',
showGridLines: true
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'column',
columnsGapPercent: 50,
seriesGapPercent: 0,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: 'Time in minutes',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Keith', displayText: 'Keith' },
{ dataField: 'Erica', displayText: 'Erica' },
{ dataField: 'George', displayText: 'George' }
]
}
]
};
}
}
})();