<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>
Kendo Bootstrap Dashboard
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.