1560 lines
44 KiB
JavaScript
1560 lines
44 KiB
JavaScript
(function ($) {
|
|
"use strict";
|
|
|
|
//Earning Graph Top
|
|
var ctx = document.getElementById("earning-graph-top");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
//Earning Graph Bottom
|
|
var ctx = document.getElementById("earning-graph-bottom");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
},
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Earning Graph Left
|
|
var ctx = document.getElementById("earning-graph-left");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Earning Graph Right
|
|
var ctx = document.getElementById("earning-graph-right");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
//Sales Graph Top
|
|
var ctx = document.getElementById("sales-graph-top");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Sales Graph Top
|
|
var ctx = document.getElementById("sales-graph-bottom");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
//Revenue Graph
|
|
var ctx = document.getElementById("revenue-graph");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Expenses Graph
|
|
var ctx = document.getElementById("expenses-graph");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
//Top Product
|
|
var ctx = document.getElementById("top-product");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [50, 26, 36, 30, 46, 38, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
pointRadius: 0,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
usePointStyle: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
//Transaction Graph
|
|
var ctx = document.getElementById("transaction-graph");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [50, 26, 36, 30, 46, 38, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
pointRadius: 0,
|
|
lineTension: 0,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
usePointStyle: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
//BTC Income
|
|
var ctx = document.getElementById("btc-income");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [50, 26, 36, 30, 46, 38, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
pointRadius: 0,
|
|
lineTension: 0,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
usePointStyle: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Eth Wallet
|
|
|
|
var ctx = document.getElementById("eth-wallet");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#4c84ff',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.2
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Sales Analysis
|
|
|
|
var ctx = document.getElementById("sales-analysis");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#4c84ff',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.2
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Project Bar
|
|
|
|
var ctx = document.getElementById("project-bar");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#4c84ff',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.2
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//Overlay Graph Line
|
|
var ctx = document.getElementById("overlay-graph-line");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor: "#FF4961",
|
|
capBezierPoints: !0,
|
|
pointColor: "#fff",
|
|
pointBorderColor: "#fff",
|
|
pointBackgroundColor: "#FF4961",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
usePointStyle: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Overlay Graph Double Bar
|
|
|
|
var ctx = document.getElementById("overlay-graph-double-bar");
|
|
ctx.height = 75;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [9, 1, 17, 18, 5, 14, 8, 3, 15, 6, 2, 11, 20, 16, 4, 13, 19, 7, 10, 12],
|
|
borderColor: "#4c84ff",
|
|
borderWidth: "0",
|
|
backgroundColor: "#4c84ff"
|
|
},
|
|
{
|
|
label: "My Second dataset",
|
|
data: [6, 16, 17, 3, 11, 18, 12, 9, 10, 13, 2, 4, 7, 14, 20, 5, 8, 15, 19, 1],
|
|
borderColor: "#FF4961",
|
|
borderWidth: "0",
|
|
backgroundColor: "#FF4961"
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
// Change here
|
|
barPercentage: 0.2
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//Overlay Graph Bar
|
|
|
|
var ctx = document.getElementById("overlay-graph-bar");
|
|
ctx.height = 75;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#4c84ff',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.2
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: false
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Double Line Graph
|
|
var ctx = document.getElementById("double-line-graph");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
|
type: 'line',
|
|
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [50, 26, 36, 30, 46, 38, 60],
|
|
backgroundColor: "rgba(255,117,136,0.12)",
|
|
borderColor: "#FF4961",
|
|
pointRadius: 0,
|
|
lineTension: 0,
|
|
},
|
|
{
|
|
label: "My First dataset",
|
|
data: [35, 40, 48, 25, 35, 45, 40],
|
|
backgroundColor: "rgba(76,132,255,0.12)",
|
|
borderColor: "#4c84ff",
|
|
pointRadius: 0,
|
|
lineTension: 0,
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
usePointStyle: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// Sales Properties
|
|
|
|
|
|
|
|
var ctx = document.getElementById("sales-properties");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#fdae3b',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.3
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: true
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// Rent Properties
|
|
|
|
|
|
|
|
var ctx = document.getElementById("rent-properties");
|
|
ctx.height = 100;
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB",],
|
|
datasets: [{
|
|
label: '',
|
|
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4, 6, 9, 12, 4, 3, 6, 4.5, 6, 8, 4.5, 5, 6, 4.5, 5.5,],
|
|
backgroundColor: '#71d875',
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false, // hide main x-axis line
|
|
beginAtZero: true
|
|
},
|
|
barPercentage: 1,
|
|
categoryPercentage: 0.3
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false, // hide main y-axis line
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
beginAtZero: true
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: true
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
})(jQuery);
|
|
|
|
|
|
//////////////////
|
|
// Shadow
|
|
/////////////////
|
|
|
|
|
|
let draw = Chart.controllers.line.prototype.draw;
|
|
Chart.controllers.line = Chart.controllers.line.extend({
|
|
draw: function () {
|
|
draw.apply(this, arguments);
|
|
let nk = this.chart.chart.ctx;
|
|
let _stroke = nk.stroke;
|
|
nk.stroke = function () {
|
|
nk.save();
|
|
nk.shadowColor = '#ccc';
|
|
nk.shadowBlur = 10;
|
|
nk.shadowOffsetX = 0;
|
|
nk.shadowOffsetY = 4;
|
|
_stroke.apply(this, arguments)
|
|
nk.restore();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Line Shadow Top
|
|
|
|
(nk = document.getElementById("lineShadow-top")).height = 100;
|
|
myChart = new Chart(nk, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [100, 70, 150, 120, 300, 250, 400, 300],
|
|
borderWidth: 4,
|
|
borderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !1
|
|
},
|
|
{
|
|
data: [20, 70, 300, 120, 180, 220, 450, 250],
|
|
borderWidth: 4,
|
|
borderColor: "#f7931a",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "#f7931a",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#f7931a",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !1
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: !0,
|
|
legend: {
|
|
display: !1
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: !1,
|
|
gridLines: {
|
|
display: !1
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: !1,
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 100,
|
|
max: 600,
|
|
min: 0
|
|
},
|
|
gridLines: {
|
|
display: !0,
|
|
drawBorder: !1,
|
|
lineWidth: 1,
|
|
zeroLineColor: "#e5e5e5"
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
});
|
|
|
|
// Line Shadow Bottom
|
|
|
|
(nk = document.getElementById("lineShadow-bottom")).height = 100;
|
|
myChart = new Chart(nk, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [100, 70, 150, 120, 300, 250, 400, 300],
|
|
borderWidth: 4,
|
|
borderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !1
|
|
},
|
|
{
|
|
data: [20, 70, 300, 120, 180, 220, 450, 250],
|
|
borderWidth: 4,
|
|
borderColor: "#f7931a",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "#f7931a",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#f7931a",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !1
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: !0,
|
|
legend: {
|
|
display: !1
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: !1,
|
|
gridLines: {
|
|
display: !1
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: !1,
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 100,
|
|
max: 600,
|
|
min: 0
|
|
},
|
|
gridLines: {
|
|
display: !0,
|
|
drawBorder: !1,
|
|
lineWidth: 1,
|
|
zeroLineColor: "#e5e5e5"
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
});
|
|
|
|
// Line Shadow Background
|
|
(nk = document.getElementById("lineShadow-bg")).height = 100;
|
|
myChart = new Chart(nk, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [100, 70, 150, 120, 300, 250, 400, 300],
|
|
backgroundColor: "rgba(0, 123, 255, 0.1)",
|
|
borderWidth: 4,
|
|
borderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !0
|
|
},
|
|
{
|
|
data: [20, 70, 300, 120, 180, 220, 450, 250],
|
|
borderWidth: 4,
|
|
backgroundColor: "rgba(247,147,26,0.1)",
|
|
borderColor: "rgba(247,147,26,0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(247,147,26,0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(247,147,26,0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: !0,
|
|
legend: {
|
|
display: !1
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: !1,
|
|
gridLines: {
|
|
display: !1
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: !1,
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 100,
|
|
max: 600,
|
|
min: 0
|
|
},
|
|
gridLines: {
|
|
display: !0,
|
|
drawBorder: !1,
|
|
lineWidth: 1,
|
|
zeroLineColor: "#e5e5e5"
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
});
|
|
|
|
|
|
// Line Shadow Background
|
|
(nk = document.getElementById("sales-monitoring")).height = 100;
|
|
myChart = new Chart(nk, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [100, 70, 150, 120, 300, 250, 400, 300],
|
|
backgroundColor: "rgba(0, 123, 255, 0.1)",
|
|
borderWidth: 4,
|
|
borderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(0, 123, 255, 0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !0
|
|
},
|
|
{
|
|
data: [20, 70, 300, 120, 180, 220, 450, 250],
|
|
borderWidth: 4,
|
|
backgroundColor: "rgba(247,147,26,0.1)",
|
|
borderColor: "rgba(247,147,26,0.9)",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "rgba(247,147,26,0.9)",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "rgba(247,147,26,0.9)",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: !0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: !0,
|
|
legend: {
|
|
display: !1
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: !1,
|
|
gridLines: {
|
|
display: !1
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: !1,
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 100,
|
|
max: 600,
|
|
min: 0
|
|
},
|
|
gridLines: {
|
|
display: !0,
|
|
drawBorder: !1,
|
|
lineWidth: 1,
|
|
zeroLineColor: "#e5e5e5"
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
}); |