graphs

by fabriziopaino86

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/arv/ExplorerCanvas/f45234ed727c849319ad1f1776bd54314c09742d/excanvas.js"></script>
<canvas id="canvas1" class="RadialGraph" data-percent="33" data-label="Test 1"></canvas>
<canvas id="canvas2" class="RadialGraph" data-percent="42" data-strokecolor="#FFC300" data-label="Test 2"></canvas>
<canvas id="canvas3" class="RadialGraph" data-percent="87" data-strokecolor="#C3FF00" data-label="Test 3"></canvas>
<canvas id="canvas4" class="RadialGraph" data-percent="19" data-label="Test 4"></canvas>

<br />
<br />
<br />
<br />
<br />

<div id="Chart" class="Chart" data-width="600" data-height="280" data-nsections="6" data-linescolor="#a4a8aa" data-graphcolor="#3DEBFF"></div>
<input id="rfsh" type="button" value="refresh" />
<br />
<br />
<br />

<div id="GridView" class="container-fluid GridView" data-modelSize="220" data-url="" data-pagesizes="[20,40,80]">
  <div class="row-fluid header">
    <div class="col-md-12">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="col-md-3">
            Test 1
          </div>
          <div class="col-md-3">
            Test 2
          </div>
          <div class="col-md-3">
            Test 3
          </div>
          <div class="col-md-3">
            Test 4
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row-fluid body">
    <div class="col-md-12">
      <div class="container-fluid content">
        <div class="row-fluid">
          <div class="col-md-3">1</div>
          <div class="col-md-3">2</div>
          <div class="col-md-3">3</div>
          <div class="col-md-3">4</div>
        </div>
        <div class="row-fluid">
          <div class="col-md-3">5</div>
          <div class="col-md-3">6</div>
          <div...

CSS

body {
  background-color: #242424;
}

.GridView {
  background-color: transparent;
  padding: 0;
}

.GridView .header {
  background-color: #fff;
  border-bottom: solid 1px #d9dde6;
  min-height: 60px;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding-top: 20px;
}

.GridView .header .container-fluid {
  padding: 0;
  margin: 0;
}

.GridView .body {
  background-color: #eeeff4;
  min-height: 500px;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  position: relative;
}

.GridView .body.row-fluid .col-md-12 {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.GridView .body .content {
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}

.GridView .body .content .row-fluid {
  height: 40px;
  padding: 10px;
  border-bottom: solid 1px #d9dde6;
  background-color: #eff0f4;
}

.GridView .body .content .row-fluid:nth-child(odd) {
  background-color: #eaebf0;
}

.GridView .body .content .row-fluid:last-child {
  border-bottom: none;
}

.GridView .footer {
  padding: 10px;
  padding-top: 15px;
  background-color: #fff;
  border-top: solid 1px #d9dde6;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

.GridView .footer .pagination > li > a,
.pagination > li > span {
  border: none;
}

#paging a,
#paging span {
  color: #12374f;
}

#paging ul {
  margin: 0;
  color: #12374f !important;
}

#paging a:hover,
#paging span:hover {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: #afd2de;
}

#paging .active a {
  background-color: #FFBE00;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

#page_size {
  width: 60px;
  float: right;
}

#page_size.open #page_size_btn {
  background-color: #FFBE00;
  border-color: #FFBE00;
}

#page_size_lbl {
  float: right;
  padding-top: 7px;
  margin-right: 5px;
  font-weight: normal;
}

.RadialGraph {
  position: relative;
  margin-left: 80px;
}

.Chart {
  position:...

JavaScript

var GridFilterSorting = function () {
            var defaultPageSize = 20;

            var SortOrder = {
                Ascending: 0,
                Descending: 1
            };

            var FilterProperties = {
                ColumnName: "",
                SortOrder: SortOrder.Ascending,
                PageSize: defaultPageSize,
                PageSelected: 1
            };

            function Paging(id) {
                var self = this;
                var mdSize;
                var numberPages;
                var rootItem;
                var fastBackwardBtn;
                var fastForwardBtn;
                var nextBtn;
                var prevBtn;

                var init = function () {
                    FilterProperties.PageSelected = 1;
                    rootItem = $("#" + id);

                    self.SetModelSize(parseInt(rootItem.data("modelsize")));
                    self.SetPageSize(20);

                    fastBackwardBtn = rootItem.find(".fastbackward");
                    fastBackwardBtn.click(fastBack);

                    prevBtn = rootItem.find(".previous");
                    prevBtn.click(previous);

                    nextBtn = rootItem.find(".next");
                    nextBtn.click(next);

                    fastForwardBtn = rootItem.find(".fastforward");
                    fastForwardBtn.click(fastForward);

                    rootItem.find(".pageNumber").click(pageNumber);
                };

                var fastBack = function () {
                    FilterProperties.PageSelected = 1;
                    self.SetCurrentPage(FilterProperties.PageSelected);

                    console.log(FilterProperties);
                };

                var fastForward = function () {
                    self.SetCurrentPage(numberPages);

                    console.log(FilterProperties);
                };

                var next = function () {
                    FilterProperties.PageSelected++;

      ...