Skip to content

Instantly share code, notes, and snippets.

@xuanphi7895

xuanphi7895/index.html

Created March 19, 2019 17:37
Show Gist options
  • Save xuanphi7895/c598abd7006fb9ffdf177b0f5f65cd4c to your computer and use it in GitHub Desktop.
Save xuanphi7895/c598abd7006fb9ffdf177b0f5f65cd4c to your computer and use it in GitHub Desktop.
Download ZIP
XuanPhi-Front-end
Raw
index.html
<!doctype html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="19_03_2019.css">
<script src="scripts/kendojs/jquery-1.12.4.min.js"></script>
<script src="scripts/js/jquery.min.js"></script>
<script src="scripts/19_03_2019.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<title>Example</title>
</head>
<body>
<header id="pageHeader">Header</header>
<nav id="mainNav">
<div>ttttt</div>
<ul id="menu"></ul>
</nav>
<main id="mainArticle">
<div id="main-site-first">
<div class="panel-sub" id="chart" style="height:280px;"></div>
</div>
<div id="main-site-two">
<div class="panel-sub" id="chart-are" style="height:280px;"> </div>
</div>
<div id="main-site-three">
<div id="gauge-container">
<input id="monthly" value="62" style="width: 45%;margin-left: -100px;" />
<div id="gauge"></div>
<h4>Renewal (%) in the Month</h4>
</div>
</div>
</div>
<div id="main-site-four">
<div class="tabstrip">
<ul>
<li>Total</li>
<li>Forecasted Amount</li>
<li>Payment Amount</li>
</ul>
<div class="demo-section k-content wide">
<div id="chart-tab" style="height:280px"></div>
</div>
<div id="chart-column-forecasted" style="height:290px;">
<!-- <button class='k-button'>Chart DEMO Forecasted Amount</button> -->
</div>
<div class="demo-section k-content wide">
<div id="chart-pie" style="height:280px;"></div>
</div>
</div>
</div>
<div id="main-site-five">
<div id="grid"></div>
</div>
<div id="main-site-six">
<div class="demo-section k-content wide">
<h4>NET RESULT MONTHLY ADDED In 2018</h4>
<div id="chart-oct"></div>
</div>
</div>
</main>
</body>
Raw
script.js
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [{
text: "Item 1",
cssClass: "myClass", // (Optional) Add custom CSS class to the item, added 2012 Q3 SP1
url: "http://www.telerik.com" // (Optional) Link URL if navigation is needed
},
{
text: "<b>Item 2</b>",
encoded: false, // Allows the use of HTML for item text
content: "text" // Content within an item
},
{
text: "Item 3",
imageUrl: "http://www.telerik.com/test.jpg", // (Optional) Item image URL
items: [{ // Sub-item collection
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}
]
},
{
text: "Item 4",
spriteCssClass: "imageClass3" // (Optional) Item image sprite CSS class
},
{
text: "Item 5"
}
],
select: function(e) { // Item select event handler, optional
// e.sender - returns reference to the Kendo Menu widget
// e.target - returns the clicked element. Typically, the span.k-link element.
// handle event
}
})
});
//main-site-first
$(function() {
$("#chart").kendoChart({
title: {
text: "Contract Margin of The Books In 2018",
color: "black",
margin: {
top: 0
}
},
legend: {
position: "bottom",
padding: {
top: 0
}
},
chatArea: {
height: 280
},
series: [{
name: "Net difference on the books",
type: "column",
data: [48.586, 94, -30.587, 43.434, -182.562, -16.211, -7.609, 26.204, -20.971, -52.794, -163.196, -38.189],
color: "rgb(120, 210, 55)"
}, {
name: "Net added to the books",
type: "column",
data: [150.532, 119.963, 110.424, 149.408, -68.083, 103.321, 136.608, 223.462, 108.616, 183.332, 53.148, 128.025],
color: "rgb(255, 210, 70)"
}, {
type: "line",
name: "Total",
data: [101.946, 119.869, 141.011, 105.974, 114.479, 119.532, 144.217, 197.258, 129.587, 236.126, 216.344, 166.214],
color: "rgb(255, 99, 88)"
}],
valueAxis: {
labels: {
format: "{0}$"
},
line: {
visible: false
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: {
padding: { top: 75 }
},
majorGridLines: {
visible: true
}
},
tooltip: {
visible: true,
format: "{0}$",
template: "#= series.name #: #= value #"
}
});
});
$(window).on("resize", function() {
kendo.resize($("#main-site-first"));
});
//main-site-two
$(document).ready(function() {
$("#chart-are").kendoChart({
title: {
text: "Annual Margin of The Books In 2018",
color: "black",
margin: {
top: 0
}
},
legend: {
position: "bottom",
padding: {
top: 10
}
},
seriesDefaults: {
type: "area"
},
chartArea: {
height: 280,
background: "#FFFFF0",
opacity: 0.1
},
series: [{
name: "Net difference on the books",
data: [25.485, -8.073, -18.793, 10.619, -94.332, -6.354, -7.393, -18.764, -14.454, -42.162, -33.893, -34.428],
color: "green"
}, {
name: "Net added to the books",
data: [38.622, 48.459, 51.822, 49.095, -52.240, 49.804, 46.750, 49.750, 32.968, 43.046, 45.998, 26.164],
color: "yellow"
}, {
type: "line",
name: "Total",
data: [64.107, 40.386, 33.029, 59.714, 42.092, 43.450, 54.143, 68.514, 47.422, 85.208, 79.891, 60.592],
color: "red"
}],
valueAxis: {
labels: {
format: "{0}$"
},
line: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: {
padding: {
top: 95
}
},
majorGridLines: {
visible: true
}
},
tooltip: {
visible: true,
format: "{0}$",
template: "#= series.name #: #= value #"
}
});
})
//main-site-three
$(document).ready(function() {
temp = 62;
function createGauge(labelPosition) {
$("#gauge").kendoRadialGauge({
pointer: {
value: temp
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
position: labelPosition || "inside"
},
ranges: [{
from: 0,
to: 30,
color: "#ffc700"
}, {
from: 30,
to: 70,
color: "#ff7a00"
}, {
from: 70,
to: 100,
color: "#c20000"
}]
}
});
}
$(document).ready(function() {
createGauge();
var data = [
{ text: "January", value: "62" },
{ text: "February", value: "67.92" },
{ text: "March", value: "55.84" },
{ text: "April", value: "66.67" },
{ text: "May", value: "44.45" },
{ text: "June", value: "39.29" },
{ text: "July", value: "44" },
{ text: "August", value: "68.57" },
{ text: "September", value: "51.11" },
{ text: "October", value: "71.01" },
{ text: "November", value: "61.63" },
{ text: "December", value: "52.58" }
];
function onChange() {
$("#gauge").data("kendoRadialGauge").value($("#monthly").val());
}
// create DropDownList from input HTML element
$("#monthly").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
})
//main-site-four: li:One
$(document).ready(function() {
var drawing = kendo.drawing;
var geometry = kendo.geometry;
function createChartTab() {
$("#chart-tab").kendoChart({
title: {
text: "Total of Payment and Forecasted in 2018",
margin: {
top: 0
}
},
chatArea: {
height: 270
},
legend: {
position: "bottom",
item: {
visual: createLegendItem
}
},
seriesDefaults: {
type: "column",
stack: true,
highlight: {
toggle: function(e) {
// Don't create a highlight overlay,
// we'll modify the existing visual instead
e.preventDefault();
var visual = e.visual;
var opacity = e.show ? 0.8 : 1;
visual.opacity(opacity);
}
},
visual: function(e) {
return createColumn(e.rect, e.options.color);
}
},
series: [{
name: "Total Forecasted",
data: [71794.08, 78446.26, 84586.92, 84176.76, 82919.52, 81873.52, 81682.36, 81991.16, 79717.33, 78874.05, 76155.66, 60257.76],
color: "red"
}, {
name: "Total Payment",
data: [71794.08, 78446.26, 84586.92, 84176.76, 82919.52, 81873.52, 81682.36, 81991.16, 79717.33, 78874.05, 76155.66, 60257.76],
color: "green"
}],
panes: [{
clip: false
}],
valueAxis: {
line: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
majorGridLines: {
visible: false
},
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}$",
template: "#= series.name #: #= value #$"
}
});
}
function createColumn(rect, color) {
var origin = rect.origin;
var center = rect.center();
var bottomRight = rect.bottomRight();
var radiusX = rect.width() / 2;
var radiusY = radiusX / 3;
var gradient = new drawing.LinearGradient({
stops: [{
offset: 0,
color: color
}, {
offset: 0.5,
color: color,
opacity: 0.9
}, {
offset: 0.5,
color: color,
opacity: 0.9
}, {
offset: 1,
color: color
}]
});
var path = new drawing.Path({
fill: gradient,
stroke: {
color: "none"
}
}).moveTo(origin.x, origin.y)
.lineTo(origin.x, bottomRight.y)
.arc(180, 0, radiusX, radiusY, true)
.lineTo(bottomRight.x, origin.y)
.arc(0, 180, radiusX, radiusY);
var topArcGeometry = new geometry.Arc([center.x, origin.y], {
startAngle: 0,
endAngle: 360,
radiusX: radiusX,
radiusY: radiusY
});
var topArc = new drawing.Arc(topArcGeometry, {
fill: {
color: color
},
stroke: {
color: "#ebebeb"
}
});
var group = new drawing.Group();
group.append(path, topArc);
return group;
}
function createLegendItem(e) {
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var rect = new geometry.Rect([0, 0], [120, 50]);
var layout = new drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
var overlay = drawing.Path.fromRect(rect, {
fill: {
color: "#fff",
opacity: 0
},
stroke: {
color: "none"
},
cursor: "pointer"
});
var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
var label = new drawing.Text(e.series.name, [0, 0], {
fill: {
color: labelColor
}
})
layout.append(column, label);
layout.reflow();
var group = new drawing.Group().append(layout, overlay);
return group;
}
$(document).ready(createChartTab);
$(document).bind("kendo:skinChange", createChartTab);
//main-site-foure: li:two
function createChartForecasted() {
$("#chart-column-forecasted").kendoChart({
title: {
text: "Forecasted Amount annual $"
},
legend: {
position: "top"
},
chartArea: {
background: "",
height: 290
},
seriesDefaults: {
type: "column",
style: "smooth"
},
series: [{
name: "AEP",
data: [10284.88, 12284.82, 15561.45, 15121.54, 14427.73, 14531.07, 14913.72, 14977.68, 14962.69],
color: "rgb(255, 99, 88)"
}, {
name: "Agera",
data: [8500, 8545.51, 9053.26, 9140.5, 8947.74, 8830.63, 8301.6, 8278.34, 8271.82, 8271.67],
color: "rgb(40, 180, 200)"
}, {
name: "Agway",
data: [638.2, 650.22, 640.39, 545.32, 605.18, 673, 597.22, 698.22, 560.23, 590],
color: "#800080"
}, {
name: "Constellation",
data: [123, 105, 190, 117.56, 148.56, 101.04, 202.6, 186.22, 120.55, 111.31],
color: "rgb(255, 210, 70)"
}, {
name: "Direct Energy",
data: [52248, 56860.71, 59141.82, 59251.84, 58790.31, 57737.78, 57667.22, 57850.7, 55802.04, 55228.9],
color: "rgb(120, 210, 55)"
}],
valueAxis: {
labels: {
format: "{0}$"
},
line: {
visible: false
},
axisCrossingValue: -10,
plotBands: [{
from: 100,
to: 10000,
color: "#c00",
opacity: 0.3
}, {
from: 10000,
to: 10500,
color: "#c00",
opacity: 0.8
}],
max: 70000,
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Agu", "Sep", "Oct"],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChartForecasted);
$(document).bind("kendo:skinChange", createChartForecasted);
//main-site-four: li:three
function createChartPie() {
$("#chart-pie").kendoChart({
title: {
position: "top",
text: "Payment Amount Of 2018",
},
legend: {
visible: false,
position: "top"
},
chartArea: {
height: 280
},
seriesDefaults: {
labels: {
visible: false,
background: "transparent"
},
type: "line",
style: "smooth"
},
series: [{
name: "AEP",
data: [10284.88, 12284.82, 15561.45, 15121.54, 14427.73, 14531.07, 14913.72, 14977.68, 14962.69],
color: "rgb(255, 99, 88)"
}, {
name: "Agera",
data: [8500, 8545.51, 9053.26, 9140.5, 8947.74, 8830.63, 8301.6, 8278.34, 8271.82, 8271.67],
color: "rgb(40, 180, 200)"
}, {
name: "Agway",
data: [638.2, 650.22, 640.39, 545.32, 605.18, 673, 597.22, 698.22, 560.23, 590],
color: "#800080"
}, {
name: "Constellation",
data: [123, 105, 190, 117.56, 148.56, 101.04, 202.6, 186.22, 120.55, 111.31],
color: "rgb(255, 210, 70)"
}, {
name: "Direct Energy",
data: [52248, 56860.71, 59141.82, 59251.84, 58790.31, 57737.78, 57667.22, 57850.7, 55802.04, 55228.9],
color: "rgb(120, 210, 55)"
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Agu", "Sep", "Oct"],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
format: "{0}$",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChartPie);
$(document).bind("kendo:skinChange", createChartPie);
//tab: main-site-four: li
var tabStrip = $(".tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("li:first"); // Select by jQuery selector
$(".tabstrip").on("click", ".k-button", function() {
tabStrip.select(0); // Select by index
})
})
//main-site-five
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Monthy of 2018"
}],
dataSource: [{
name: "January",
descriptions: [
{ Supplier: "AEP", Forecasted: 10284.88, Payment: 10101.23 },
{ Supplier: "Agera", Forecasted: 8500, Payment: 8600.11 },
{ Supplier: "Agway", Forecasted: 638.2, Payment: 640 },
{ Supplier: "Constellation", Forecasted: 123, Payment: 98.22 },
{ Supplier: "Direct Energy", Forecasted: 52248, Payment: 52035.6 },
{ Supplier: "TOTAL", Forecasted: 71794.08, Payment: 71475.16 }
]
},
{
name: "February",
descriptions: [
{ Supplier: "AEP", Forecasted: 12284.82, Payment: 13001 },
{ Supplier: "Agera", Forecasted: 8545.51, Payment: 8232.57 },
{ Supplier: "Agway", Forecasted: 650.22, Payment: 666.35 },
{ Supplier: "Constellation", Forecasted: 105, Payment: 20 },
{ Supplier: "Direct Energy", Forecasted: 56860.71, Payment: 54290.32 },
{ Supplier: "TOTAL", Forecasted: 78446.26, Payment: 76210.24 }
]
},
{
name: "March",
descriptions: [
{ Supplier: "AEP", Forecasted: 15561.45, Payment: 15561.2 },
{ Supplier: "Agera", Forecasted: 9053.26, Payment: 9123 },
{ Supplier: "Agway", Forecasted: 640.39, Payment: 601.32 },
{ Supplier: "Constellation", Forecasted: 117.56, Payment: 150 },
{ Supplier: "Direct Energy", Forecasted: 59141.82, Payment: 58856.27 },
{ Supplier: "TOTAL", Forecasted: 84586.92, Payment: 84291.79 }
]
},
{
name: "April",
descriptions: [
{ Supplier: "AEP", Forecasted: 15121.54, Payment: 15020 },
{ Supplier: "Agera", Forecasted: 9140.5, Payment: 9140 },
{ Supplier: "Agway", Forecasted: 545.32, Payment: 560 },
{ Supplier: "Constellation", Forecasted: 148.56, Payment: 127.65 },
{ Supplier: "Direct Energy", Forecasted: 59251.84, Payment: 59251.88 },
{ Supplier: "TOTAL", Forecasted: 84176.76, Payment: 84099.53 }
]
},
{
name: "May",
descriptions: [
{ Supplier: "AEP", Forecasted: 14427.73, Payment: 13227.63 },
{ Supplier: "Agera", Forecasted: 8947.74, Payment: 8900.37 },
{ Supplier: "Agway", Forecasted: 605.18, Payment: 620.37 },
{ Supplier: "Constellation", Forecasted: 148.56, Payment: 150 },
{ Supplier: "Direct Energy", Forecasted: 58790.31, Payment: 58770.32 },
{ Supplier: "TOTAL", Forecasted: 82919.52, Payment: 81099.53 }
]
},
{
name: "June",
descriptions: [
{ Supplier: "AEP", Forecasted: 14531.07, Payment: 14000.06 },
{ Supplier: "Agera", Forecasted: 8830.63, Payment: 8930.63 },
{ Supplier: "Agway", Forecasted: 673, Payment: 698 },
{ Supplier: "Constellation", Forecasted: 101.04, Payment: 102 },
{ Supplier: "Direct Energy", Forecasted: 57737.78, Payment: 56923.45 },
{ Supplier: "TOTAL", Forecasted: 81873.52, Payment: 80654.14 }
]
},
{
name: "July",
descriptions: [
{ Supplier: "AEP", Forecasted: 14913.72, Payment: 14920.07 },
{ Supplier: "Agera", Forecasted: 8301.6, Payment: 8290.5 },
{ Supplier: "Agway", Forecasted: 597.22, Payment: 580.31 },
{ Supplier: "Constellation", Forecasted: 202.6, Payment: 198.22 },
{ Supplier: "Direct Energy", Forecasted: 57667.22, Payment: 55677.94 },
{ Supplier: "TOTAL", Forecasted: 81682.36, Payment: 79667.04 }
]
},
{
name: "August",
descriptions: [
{ Supplier: "AEP", Forecasted: 14977.68, Payment: 14223.26 },
{ Supplier: "Agera", Forecasted: 8278.34, Payment: 8250.34 },
{ Supplier: "Agway", Forecasted: 698.22, Payment: 701.37 },
{ Supplier: "Constellation", Forecasted: 186.22, Payment: 137.46 },
{ Supplier: "Direct Energy", Forecasted: 57850.7, Payment: 56223.69 },
{ Supplier: "TOTAL", Forecasted: 81991.16, Payment: 79536.12 }
]
},
{
name: "September",
descriptions: [
{ Supplier: "AEP", Forecasted: 14962.69, Payment: 14556.78 },
{ Supplier: "Agera", Forecasted: 8271.82, Payment: 8270 },
{ Supplier: "Agway", Forecasted: 560.23, Payment: 530.26 },
{ Supplier: "Constellation", Forecasted: 120.55, Payment: 152.74 },
{ Supplier: "Direct Energy", Forecasted: 55802.04, Payment: 56000.31 },
{ Supplier: "TOTAL", Forecasted: 79717.33, Payment: 79510.09 }
]
},
{
name: "October",
descriptions: [
{ Supplier: "AEP", Forecasted: 14672.17, Payment: 14337 },
{ Supplier: "Agera", Forecasted: 8271.67, Payment: 8260.22 },
{ Supplier: "Agway", Forecasted: 590, Payment: 545 },
{ Supplier: "Constellation", Forecasted: "111.31", Payment: 103.63 },
{ Supplier: "Direct Energy", Forecasted: 55228.9, Payment: 55230.01 },
{ Supplier: "TOTAL", Forecasted: 78874.05, Payment: 78475.86 }
]
},
{
name: "November",
descriptions: [
{ Supplier: "AEP", Forecasted: 14543.79, Payment: 14554.6 },
{ Supplier: "Agera", Forecasted: 8154.14, Payment: 8001.22 },
{ Supplier: "Agway", Forecasted: 570, Payment: 507.28 },
{ Supplier: "Constellation", Forecasted: 118.9, Payment: 115 },
{ Supplier: "Direct Energy", Forecasted: 52768.83, Payment: 52601.98 },
{ Supplier: "TOTAL", Forecasted: 76155.66, Payment: 75780.08 }
]
},
{
name: "December",
descriptions: [
{ Supplier: "AEP", Forecasted: 0, Payment: 18700.05 },
{ Supplier: "Agera", Forecasted: 8066.08, Payment: 8066.09 },
{ Supplier: "Agway", Forecasted: 605, Payment: 635 },
{ Supplier: "Constellation", Forecasted: 145.28, Payment: 143.79 },
{ Supplier: "Direct Energy", Forecasted: 51441.4, Payment: 52134.2 },
{ Supplier: "TOTAL", Forecasted: 60257.76, Payment: 79679.13 }
]
}
],
height: 330,
sortable: true,
pageable: false,
detailTemplate: ' <div class="grid-sub"></div>',
detailInit: function(e) {
e.detailRow.find(".grid-sub").kendoGrid({
dataSource: e.data.descriptions,
scrollable: false,
sortable: true,
pageable: false,
columns: [
{ field: "Supplier", title: "Supplier" },
{ field: "Forecasted", title: "Forecasted Amount ($)" },
{ field: "Payment", title: "Payment Amount ($)" }
]
});
}
});
})
//main-site-six
$(document).ready(function() {
var octData = [{
category: "Jan",
name: "Jan",
value: 5.342,
color: "#398622"
}, {
category: "Feb",
name: "Feb",
value: 3.336,
color: "#166f99"
}, {
category: "Mar",
value: 2.752,
color: "#2185b4"
}, {
category: "Apr",
value: 4.976,
color: "#319fd2"
}, {
category: "May",
value: -4.353,
color: "#FF000B"
}, {
category: "Jun",
value: 3.621,
color: "#3D496B"
}, {
category: "Jul",
value: 3.896,
color: "#166f99"
}, {
category: "Aug",
value: 4.416,
color: "#2185b4"
}, {
category: "Sep",
value: 2.747,
color: "#5C6FA2"
}, {
category: "Oct",
value: 3.587,
color: "#3eaee2"
}, {
category: "Nov",
value: 3.833,
color: "#319fd2"
}, {
category: "Dec",
value: 2.180,
color: "#2D427B "
}];
function createChart(chartName, data, text) {
$('#' + chartName).kendoChart({
title: {
text: text,
position: "bottom"
},
legend: {
visible: false
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
color: "white",
font: "15px",
format: "{0}$",
template: "#=category#:#=value# $",
align: "center",
padding: { top: 15 }
},
dynamicSlope: true,
dynamicHeight: true
},
series: [{
type: "funnel",
data: data
}],
tooltip: {
visible: true,
template: "#=category# : #=value# $"
}
});
}
function refresh() {
var slider = $('#neckSlider').data("kendoSlider");
var chartNames = ["chart-oct"];
for (var idx in chartNames) {
var chart = $("#" + chartNames[idx]).data("kendoChart");
var options = {
seriesDefaults: {
neckRatio: slider.value(),
dynamicHeight: $('#dynamicHeight').is(':checked'),
dynamicSlope: $('#dynamicSlope').is(':checked'),
labels: {
visible: true,
background: "transparent",
color: "white",
format: "{0}$"
},
}
}
chart.setOptions(options);
slider.enable(!options.seriesDefaults.dynamicSlope);
}
}
function createCharts() {
createChart('chart-oct', octData, "");
}
$(document).ready(function() {
$("#neckSlider").kendoSlider({
change: refresh,
value: 0.1,
min: 0,
max: 13,
smallStep: 4,
largeStep: 2,
showButtons: true
});
createCharts();
$(document).bind("kendo:skinChange", createCharts);
});
})
Raw
style.css
body {
display: grid;
grid-template-areas:
"nav header"
"nav main"
"nav main"
"nav main";
grid-template-rows: 50px 1fr 1fr 50px;
grid-template-columns: 10% 1fr;
grid-row-gap: 1px;
grid-column-gap: 1px;
border-radius:3px;
height: 100vh;
margin: 0;
}
header, footer, main, nav, div {
padding: 0.2em;
}
#pageHeader {
grid-area: header;
background:#3c8dbc;
color:white;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: main;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(6, 1fr);
grid-column-gap:10px;
grid-row-gap:5px;
background: white;
height: 90vh;
}
#mainNav {
grid-area: nav;
background: #222d32;
color:white;
}
#main-site-first {
background:#A8D4FF;
border-radius: 10px;
grid-column:span 2;
border: 1px solid blue;
/* height: 40vh*/
}
#main-site-two{
background: #F5F5F5;
border-radius: 10px;
grid-column:span 2;
border: 1px solid blue;
}
#main-site-three{
background:#F5F5F5;
border-radius: 10px;
grid-column:span 2;
}
#main-site-four{
background:#A8D4FF;
border-radius: 10px;
-moz-border-radius: 1px;
grid-column:span 3;
/*height: 45vh*/
}
#main-site-five{
background:#74A8DC;
border-radius: 10px;
grid-column:span 2;
}
#grid:nth-child(odd){
/*background: #A8D4FF;*/
background: #e6e6e6;
}
#main-site-six{
background:#ebf0fa;
grid-column:span 1;
border-radius: 5px;
}
#main-site-six h4{
margin:0;
}
.demo-section {
text-align: center;
}
#chart-oct {
display: inline-block;
width: 250px;
height: 320px;
}
#gauge-container {
width: 250px;
height: 200px;
text-align: center;
}
#gauge {
height: 200px;
padding-left: 100px;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
display: grid;
grid-template-areas:
"nav header"
"main main"
"main main";
grid-template-rows:10% 1fr;
grid-template-columns:150px 1fr;
}
#mainArticle{
display: grid;
grid-template-areas:
"first"
"two"
"three"
"four"
"five"
"six";
grid-template-rows:1fr 1fr 1fr 1fr 1fr;
grid-template-columns:1fr
}
#main-site-first{
grid-area:first;
}
#main-site-two{
grid-area:two;
}
#main-site-three{
grid-area:three;
}
#main-site-four{
grid-area:four;
}
#main-site-five{
grid-area:five;
}
#main-site-six{
grid-area:six;
}
.panel-sub{
width:auto;
height:150px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment