Mini Shell
(function($) {
"use strict"
/* function draw() {
} */
var dlabSparkLine = function(){
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var barChart1 = function(){
if(jQuery('#barChart_1').length > 0 ){
const barChart_1 = document.getElementById("barChart_1").getContext('2d');
barChart_1.height = 100;
new Chart(barChart_1, {
type: 'bar',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: 'rgba(0,161,91)',
borderWidth: "0",
backgroundColor: 'rgba(0,161,91)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// Change here
barPercentage: 0.5
}]
}
}
});
}
}
var barChart2 = function(){
if(jQuery('#barChart_2').length > 0 ){
//gradient bar chart
const barChart_2 = document.getElementById("barChart_2").getContext('2d');
//generate gradient
const barChart_2gradientStroke = barChart_2.createLinearGradient(0, 0, 0, 250);
barChart_2gradientStroke.addColorStop(0, "rgba(0,161,91)");
barChart_2gradientStroke.addColorStop(1, "rgba(0,161,91, 0.5)");
barChart_2.height = 100;
new Chart(barChart_2, {
type: 'bar',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: barChart_2gradientStroke,
borderWidth: "0",
backgroundColor: barChart_2gradientStroke,
hoverBackgroundColor: barChart_2gradientStroke
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// Change here
barPercentage: 0.5
}]
}
}
});
}
}
var barChart3 = function(){
//stalked bar chart
if(jQuery('#barChart_3').length > 0 ){
const barChart_3 = document.getElementById("barChart_3").getContext('2d');
//generate gradient
const barChart_3gradientStroke = barChart_3.createLinearGradient(50, 100, 50, 50);
barChart_3gradientStroke.addColorStop(0, "rgba(0,161,91)");
barChart_3gradientStroke.addColorStop(1, "rgba(0,161,91, 0.5)");
const barChart_3gradientStroke2 = barChart_3.createLinearGradient(50, 100, 50, 50);
barChart_3gradientStroke2.addColorStop(0, "rgba(98, 126, 234, 1)");
barChart_3gradientStroke2.addColorStop(1, "rgba(98, 126, 234, 1)");
const barChart_3gradientStroke3 = barChart_3.createLinearGradient(50, 100, 50, 50);
barChart_3gradientStroke3.addColorStop(0, "rgba(238, 60, 60, 1)");
barChart_3gradientStroke3.addColorStop(1, "rgba(238, 60, 60, 1)");
barChart_3.height = 100;
let barChartData = {
defaultFontFamily: 'Poppins',
labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Red',
backgroundColor: barChart_3gradientStroke,
hoverBackgroundColor: barChart_3gradientStroke,
data: [
'12',
'12',
'12',
'12',
'12',
'12',
'12'
]
}, {
label: 'Green',
backgroundColor: barChart_3gradientStroke2,
hoverBackgroundColor: barChart_3gradientStroke2,
data: [
'12',
'12',
'12',
'12',
'12',
'12',
'12'
]
}, {
label: 'Blue',
backgroundColor: barChart_3gradientStroke3,
hoverBackgroundColor: barChart_3gradientStroke3,
data: [
'12',
'12',
'12',
'12',
'12',
'12',
'12'
]
}]
};
new Chart(barChart_3, {
type: 'bar',
data: barChartData,
options: {
legend: {
display: false
},
title: {
display: false
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
}
}
var lineChart1 = function(){
if(jQuery('#lineChart_1').length > 0 ){
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
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 = 'rgba(255, 0, 0, .2)';
nk.shadowBlur = 10;
nk.shadowOffsetX = 0;
nk.shadowOffsetY = 10;
_stroke.apply(this, arguments)
nk.restore();
}
}
});
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Febr", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: 'rgba(0,161,91)',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: 'rgba(0,161,91)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var lineChart2 = function(){
//gradient line chart
if(jQuery('#lineChart_2').length > 0 ){
const lineChart_2 = document.getElementById("lineChart_2").getContext('2d');
//generate gradient
const lineChart_2gradientStroke = lineChart_2.createLinearGradient(500, 0, 100, 0);
lineChart_2gradientStroke.addColorStop(0, "rgba(0,161,91)");
lineChart_2gradientStroke.addColorStop(1, "rgba(0,161,91, 0.5)");
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 = 'rgba(0, 0, 128, .2)';
nk.shadowBlur = 10;
nk.shadowOffsetX = 0;
nk.shadowOffsetY = 10;
_stroke.apply(this, arguments)
nk.restore();
}
}
});
lineChart_2.height = 100;
new Chart(lineChart_2, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: lineChart_2gradientStroke,
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: 'rgba(0,161,91, 0.5)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var lineChart3 = function(){
//dual line chart
if(jQuery('#lineChart_3').length > 0 ){
const lineChart_3 = document.getElementById("lineChart_3").getContext('2d');
//generate gradient
const lineChart_3gradientStroke1 = lineChart_3.createLinearGradient(500, 0, 100, 0);
lineChart_3gradientStroke1.addColorStop(0, "rgba(0,161,91)");
lineChart_3gradientStroke1.addColorStop(1, "rgba(0,161,91, 0.5)");
const lineChart_3gradientStroke2 = lineChart_3.createLinearGradient(500, 0, 100, 0);
lineChart_3gradientStroke2.addColorStop(0, "rgba(255, 92, 0, 1)");
lineChart_3gradientStroke2.addColorStop(1, "rgba(255, 92, 0, 1)");
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 = 'rgba(0, 0, 0, 0)';
nk.shadowBlur = 10;
nk.shadowOffsetX = 0;
nk.shadowOffsetY = 10;
_stroke.apply(this, arguments)
nk.restore();
}
}
});
lineChart_3.height = 100;
new Chart(lineChart_3, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: lineChart_3gradientStroke1,
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: 'rgba(0,161,91, 0.5)'
}, {
label: "My First dataset",
data: [5, 20, 15, 41, 35, 65, 80],
borderColor: lineChart_3gradientStroke2,
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: 'rgba(254, 176, 25, 1)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var lineChart03 = function(){
//dual line chart
if(jQuery('#lineChart_3Kk').length > 0 ){
const lineChart_3Kk = document.getElementById("lineChart_3Kk").getContext('2d');
//generate gradient
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 = 'rgba(0, 0, 0, 0)';
nk.shadowBlur = 10;
nk.shadowOffsetX = 0;
nk.shadowOffsetY = 10;
_stroke.apply(this, arguments)
nk.restore();
}
}
});
lineChart_3Kk.height = 100;
new Chart(lineChart_3Kk, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [90, 60, 80, 50, 60, 55, 80],
borderColor: 'rgba(58,122,254,1)',
borderWidth: "3",
backgroundColor: 'rgba(0,0,0,0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)'
}
]
},
options: {
legend: false,
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
},
borderWidth:3,
display:false,
lineTension:0.4,
}],
xAxes: [{
ticks: {
padding: 5
},
}]
}
}
});
}
}
var areaChart1 = function(){
//basic area chart
if(jQuery('#areaChart_1').length > 0 ){
const areaChart_1 = document.getElementById("areaChart_1").getContext('2d');
areaChart_1.height = 100;
new Chart(areaChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: 'rgba(0, 0, 1128, .3)',
borderWidth: "1",
backgroundColor: 'rgba(255,167,215,1)',
pointBackgroundColor: 'rgba(0, 0, 1128, .3)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var areaChart2 = function(){
//gradient area chart
if(jQuery('#areaChart_2').length > 0 ){
const areaChart_2 = document.getElementById("areaChart_2").getContext('2d');
//generate gradient
const areaChart_2gradientStroke = areaChart_2.createLinearGradient(0, 1, 0, 500);
areaChart_2gradientStroke.addColorStop(0, "rgba(238, 60, 60, 0.2)");
areaChart_2gradientStroke.addColorStop(1, "rgba(238, 60, 60, 0)");
areaChart_2.height = 100;
new Chart(areaChart_2, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: "#ff2625",
borderWidth: "4",
backgroundColor: areaChart_2gradientStroke
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 5
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var areaChart3 = function(){
//gradient area chart
if(jQuery('#areaChart_3').length > 0 ){
const areaChart_3 = document.getElementById("areaChart_3").getContext('2d');
areaChart_3.height = 100;
new Chart(areaChart_3, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "My First dataset",
data: [25, 20, 60, 41, 66, 45, 80],
borderColor: 'rgb(0,161,91)',
borderWidth: "1",
backgroundColor: 'rgba(255,167,215,1)'
},
{
label: "My First dataset",
data: [5, 25, 20, 41, 36, 75, 70],
borderColor: 'rgb(255, 92, 0)',
borderWidth: "1",
backgroundColor: 'rgba(255, 92, 0, .5)'
}
]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 20,
padding: 10
}
}],
xAxes: [{
ticks: {
padding: 5
}
}]
}
}
});
}
}
var radarChart = function(){
if(jQuery('#radar_chart').length > 0 ){
//radar chart
const radar_chart = document.getElementById("radar_chart").getContext('2d');
const radar_chartgradientStroke1 = radar_chart.createLinearGradient(500, 0, 100, 0);
radar_chartgradientStroke1.addColorStop(0, "rgba(54, 185, 216, .5)");
radar_chartgradientStroke1.addColorStop(1, "rgba(75, 255, 162, .5)");
const radar_chartgradientStroke2 = radar_chart.createLinearGradient(500, 0, 100, 0);
radar_chartgradientStroke2.addColorStop(0, "rgba(68, 0, 235, .5");
radar_chartgradientStroke2.addColorStop(1, "rgba(68, 236, 245, .5");
// radar_chart.height = 100;
new Chart(radar_chart, {
type: 'radar',
data: {
defaultFontFamily: 'Poppins',
labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
data: [65, 59, 66, 45, 56, 55, 40],
borderColor: '#f21780',
borderWidth: "1",
backgroundColor: radar_chartgradientStroke2
},
{
label: "My Second dataset",
data: [28, 12, 40, 19, 63, 27, 87],
borderColor: '#f21780',
borderWidth: "1",
backgroundColor: radar_chartgradientStroke1
}
]
},
options: {
legend: false,
maintainAspectRatio: false,
scale: {
ticks: {
beginAtZero: true
}
}
}
});
}
}
var pieChart = function(){
//pie chart
if(jQuery('#pie_chart').length > 0 ){
//pie chart
const pie_chart = document.getElementById("pie_chart").getContext('2d');
// pie_chart.height = 100;
new Chart(pie_chart, {
type: 'pie',
data: {
defaultFontFamily: 'Poppins',
datasets: [{
data: [45, 25, 20, 10],
borderWidth: 0,
backgroundColor: [
"rgba(0,161,91, .9)",
"rgba(0,161,91, .7)",
"rgba(255,167,215,1)",
"rgba(0,0,0,0.07)"
],
hoverBackgroundColor: [
"rgba(0,161,91, .9)",
"rgba(0,161,91, .7)",
"rgba(255,167,215,1)",
"rgba(0,0,0,0.07)"
]
}],
labels: [
"one",
"two",
"three",
"four"
]
},
options: {
responsive: true,
legend: false,
maintainAspectRatio: false
}
});
}
}
var doughnutChart = function(){
if(jQuery('#doughnut_chart').length > 0 ){
//doughut chart
const doughnut_chart = document.getElementById("doughnut_chart").getContext('2d');
// doughnut_chart.height = 100;
new Chart(doughnut_chart, {
type: 'doughnut',
data: {
weight: 5,
defaultFontFamily: 'Poppins',
datasets: [{
data: [45, 25, 20],
borderWidth: 3,
borderColor: "rgba(255,255,255,1)",
backgroundColor: [
"rgba(0,161,91)",
"rgba(98, 126, 234, 1)",
"rgba(238, 60, 60, 1)"
],
hoverBackgroundColor: [
"rgba(0,161,91, 0.9)",
"rgba(98, 126, 234, .9)",
"rgba(238, 60, 60, .9)"
]
}],
// labels: [
// "green",
// "green",
// "green",
// "green"
// ]
},
options: {
weight: 1,
cutoutPercentage: 70,
responsive: true,
maintainAspectRatio: false
}
});
}
}
var polarChart = function(){
if(jQuery('#polar_chart').length > 0 ){
//polar chart
const polar_chart = document.getElementById("polar_chart").getContext('2d');
// polar_chart.height = 100;
new Chart(polar_chart, {
type: 'polarArea',
data: {
defaultFontFamily: 'Poppins',
datasets: [{
data: [15, 18, 9, 6, 19],
borderWidth: 0,
backgroundColor: [
"rgba(0,161,91)",
"rgba(98, 126, 234, 1)",
"rgba(238, 60, 60, 1)",
"rgba(54, 147, 255, 1)",
"rgba(255, 92, 0, 1)"
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
}
/* Function ============ */
return {
init:function(){
},
load:function(){
barChart1();
barChart2();
barChart3();
lineChart1();
lineChart2();
lineChart3();
lineChart03();
areaChart1();
areaChart2();
areaChart3();
radarChart();
pieChart();
doughnutChart();
polarChart();
},
resize:function(){
// barChart1();
// barChart2();
// barChart3();
// lineChart1();
// lineChart2();
// lineChart3();
// lineChart03();
// areaChart1();
// areaChart2();
// areaChart3();
// radarChart();
// pieChart();
// doughnutChart();
// polarChart();
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
dlabSparkLine.load();
});
jQuery(window).on('resize',function(){
//dlabSparkLine.resize();
setTimeout(function(){ dlabSparkLine.resize(); }, 1000);
});
})(jQuery);