Skip to content

Instantly share code, notes, and snippets.

@CesarNog

CesarNog/Kendo-Bootstrap-Dashboard.markdown

Created January 28, 2015 18:32
Show Gist options
  • Save CesarNog/c8014242b9d80eecce9a to your computer and use it in GitHub Desktop.
Save CesarNog/c8014242b9d80eecce9a to your computer and use it in GitHub Desktop.
Download ZIP
Kendo Bootstrap Dashboard
Raw
index.html
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Survey Board</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.bootstrap.mobile.min.css">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<script src="https://cdn.rawgit.com/kendo-labs/angular-kendo/master/angular-kendo.js"></script>
<body ng-controller="DashboardController">
<header id="header">
<div kendo-mobile-nav-bar>
<span kendo-mobile-view-title><i class="icon-bar-chart icon-medium"> Survey Board</i></span>
</div>
</header>
<div class="container" id="dashboard">
<div class="row">
<!-- side column -->
<div kendo-sortable class="col-sm-4 placeholder" id="side"
k-connect-with="'#main'"
k-placeholder="placeholder"
k-hint="hint"
k-filter="'.widget'"
k-on-change="dropped(kendoEvent)">
<div class="widget">
<ul kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Picture</span>
<div class="widget-centered">
</div>
</li>
</ul>
</div>
<div class="widget">
<div kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Sleep</span>
<div>
<h4>Hours Spent Asleep Per Day</h4>
<div kendo-linear-gauge class="chart" k-theme="'bootstrap'" k-pointer="{ value: 16 }" k-scale="{ max: 24, vertical: false }"></div>
</div>
</li>
</div>
</div>
<div class="widget">
<ul kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Tastebuds</span>
<div>
<h4>Number Of Tastebuds (Millions)</h4>
<div kendo-linear-gauge class="chart" k-theme="'bootstrap'" k-pointer="{ value: 473 }" k-scale="{ max: 1000, vertical: false }"></div>
</div>
</li>
</ul>
</div>
<!-- end side column -->
</div>
<!-- main column -->
<div kendo-sortable class="col-sm-8 placeholder" id="main"
k-connect-with="'#side'"
k-placeholder="placeholder"
k-hint="hint"
k-filter="'.widget'"
k-on-change="dropped(kendoEvent)">
<div class="widget">
<ul kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Surveys </span>
<div class="widget-centered">
<center><img src="http://www.surveyfunnel.com/wdp/wp-content/uploads/2014/04/survey2.gif"/></center>
</div>
</li>
</ul>
</div>
<div class="widget">
<ul kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Ownership By Country</span>
<div>
<div kendo-chart class="chart"
k-theme="'bootstrap'"
k-series-defaults="{ type: 'column' }"
k-series="[{ field: 'value', tooltip: { visible: true, format: '000,' } }]"
k-value-axis="{ labels: { template: '#: data.value/1000000 # M' } }"
k-data-source="country"
k-category-axis="{ field: 'country', majorGridLines: false }"
k-title="'Owernship By Country'" ></div>
</div>
</li>
</ul>
</div>
<div class="widget">
<ul kendo-panel-bar>
<li class="k-state-active">
<span class="k-link k-state-selected">Household Pet Ownership</span>
<div>
<div kendo-chart
k-theme="'bootstrap'"
k-data-source="pct"
k-series-defaults="{ type: 'pie' }"
k-series="[{ field: 'value', categoryField: 'type', tooltip: { visible: true, template: '#: category # #: value #' } }]"
k-title="'Household Pet Ownership'"></div>
</div>
</li>
</ul>
</div>
<!-- end main column -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
</body>
</html>
Raw
script.js
(function($) {
var app = angular.module('app', ['kendo.directives']);
app.controller('DashboardController', function ($scope) {
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder");
};
$scope.hint = function(element) {
return element.clone().addClass("hint")
.height(element.height())
.width(element.width());
};
$scope.country = new kendo.data.DataSource({
data: [
{ country: "USA", value: 76430000 },
{ country: "China", value: 53100000 },
{ country: "Brazil", value: 12466000 },
{ country: "France", value: 9600000 },
{ country: "Italy", value: 9400000 },
{ country: "UK", value: 7700000 },
{ country: "Ukraine", value: 7350000 }
]
});
$scope.pct = new kendo.data.DataSource({
data: [
{ type: "Dog", value: 36.5 },
{ type: "Cat", value: 30.4 },
{ type: "Other", value: 33.1 }
]
});
// when an item is dropped in either the side or
// main containers, resize any Kendo UI widgets
// inside
$scope.dropped = function(e) {
if (e.action === 'receive') {
kendo.resize(e.item);
}
};
$(window).resize(function () {
kendo.resize('.widget');
});
});
}(jQuery));
Raw
style.css
html, body {
padding: 0;
margin: 0;
width: 100%;
}
.widget {
margin-bottom: 10px;
}
.widget .k-panelbar .k-content {
padding: 10px;
}
.placeholder {
min-height: 100px;
}
.widget.placeholder {
opacity: 0.4;
border: 1px dashed #a6a6a6;
}
.widget-centered > img {
margin: auto;
}
#header {
position: fixed;
top: 0;
z-index: 1024;
width: 100%;
}
#dashboard {
margin-top: 60px;
}
.km-navbar {
background: #428bca;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment