LinkStack/assets/js/chart.js

2260 lines
58 KiB
JavaScript
Raw Normal View History

/* ====== Index ======
1. DUAL LINE CHART
2. DUAL LINE CHART2
3. LINE CHART
4. LINE CHART1
5. LINE CHART2
6. AREA CHART
7. AREA CHART1
8. AREA CHART2
9. AREA CHART3
10. GRADIENT LINE CHART
11. DOUGHNUT CHART
12. POLAR CHART
13. RADAR CHART
14. CURRENT USER BAR CHART
15. ANALYTICS - USER ACQUISITION
16. ANALYTICS - ACTIVITY CHART
17. HORIZONTAL BAR CHART1
18. HORIZONTAL BAR CHART2
19. DEVICE - DOUGHNUT CHART
20. BAR CHART
21. BAR CHART1
22. BAR CHART2
23. BAR CHART3
24. GRADIENT LINE CHART1
25. GRADIENT LINE CHART2
26. GRADIENT LINE CHART3
27. ACQUISITION3
28. STATISTICS
====== End ======*/
$(document).ready(function() {
"use strict";
/*======== 1. DUAL LINE CHART ========*/
var dual = document.getElementById("dual-line");
if (dual !== null) {
var urChart = new Chart(dual, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Old",
pointRadius: 4,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: false,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#fdc506",
data: [0, 4, 3, 5.5, 3, 4.7, 0]
},
{
label: "New",
fill: false,
pointRadius: 4,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#4c84ff",
data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
right: 10
}
},
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 1. DUAL LINE CHART2 ========*/
var dual3 = document.getElementById("dual-line3");
if (dual3 !== null) {
var urdChart = new Chart(dual3, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Old",
pointRadius: 4,
pointBackgroundColor: "#fec400",
pointBorderWidth: 2,
fill: false,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#fcdf80",
data: [0, 4, 3, 5.5, 3, 4.7, 0]
},
{
label: "New",
fill: false,
pointRadius: 4,
pointBackgroundColor: "#fec400",
pointBorderWidth: 2,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#ffffff",
data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
layout: {
padding: {
right: 10
}
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: true
}
}
});
}
/*======== 3. LINE CHART ========*/
var ctx = document.getElementById("linechart");
if (ctx !== null) {
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "",
backgroundColor: "transparent",
borderColor: "rgb(82, 136, 255)",
data: [
100,
11000,
10000,
14000,
11000,
17000,
14500,
18000,
5000,
23000,
14000,
19000
],
lineTension: 0.3,
pointRadius: 5,
pointBackgroundColor: "rgba(255,255,255,1)",
pointHoverBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
pointHoverRadius: 8,
pointHoverBorderWidth: 1
}
]
},
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
layout: {
padding: {
right: 10
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
}
}
],
yAxes: [
{
gridLines: {
display: true,
color: "#eee",
zeroLineColor: "#eee",
},
ticks: {
callback: function(value) {
var ranges = [
{ divider: 1e6, suffix: "M" },
{ divider: 1e4, suffix: "k" }
];
function formatNumber(n) {
for (var i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (
(n / ranges[i].divider).toString() + ranges[i].suffix
);
}
}
return n;
}
return formatNumber(value);
}
}
}
]
},
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return data["labels"][tooltipItem[0]["index"]];
},
label: function(tooltipItem, data) {
return "$" + data["datasets"][0]["data"][tooltipItem["index"]];
}
},
responsive: true,
intersect: false,
enabled: true,
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 18,
backgroundColor: "rgba(256,256,256,0.95)",
xPadding: 20,
yPadding: 10,
displayColors: false,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 10,
caretPadding: 15
}
}
});
}
/*======== 4. LINE CHART1 ========*/
var lchart1 = document.getElementById("linechart1");
if (lchart1 !== null) {
var urChart = new Chart(lchart1, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Old",
pointRadius: 0,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: false,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#fcdf80",
data: [0, 5, 2.5, 9.5, 3.3, 8, 0]
},
{
label: "New",
fill: false,
pointRadius: 0,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#4c84ff",
data: [0, 2, 6, 5, 8.5, 3, 3.8]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 5. LINE CHART2 ========*/
var lchart2 = document.getElementById("linechart2");
if (lchart2 !== null) {
var urChart2 = new Chart(lchart2, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Old",
pointRadius: 0,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: false,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#fcdf80",
data: [0, 5, 2.5, 9.5, 3.3, 8, 0]
},
{
label: "New",
fill: false,
pointRadius: 0,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
backgroundColor: "transparent",
borderWidth: 2,
borderColor: "#ffffff",
data: [0, 2, 6, 5, 8.5, 3, 3.8]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 6. AREA CHART ========*/
var area = document.getElementById("area-chart");
if (area !== null) {
var areaChart = new Chart(area, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "New",
pointHitRadius: 10,
pointRadius: 0,
fill: true,
backgroundColor: "rgba(76, 132, 255, 0.9)",
borderColor: "rgba(76, 132, 255, 0.9)",
data: [0, 4, 2, 6.5, 3, 4.7, 0]
},
{
label: "Old",
pointHitRadius: 10,
pointRadius: 0,
fill: true,
backgroundColor: "rgba(253, 197, 6, 0.9)",
borderColor: "rgba(253, 197, 6, 1)",
data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
layout: {
padding: {
right: 10
}
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 7. AREA CHART1 ========*/
var area1 = document.getElementById("areaChart1");
if (area1 !== null) {
var areaChart = new Chart(area1, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "New",
pointRadius: 0.1,
fill: true,
lineTension: 0.3,
backgroundColor: "rgba(76, 132, 255, 0.9)",
borderColor: "rgba(76, 132, 255, 0.9)",
data: [0, 5, 2.5, 9, 3.5, 6.5, 0]
},
{
label: "Old",
pointRadius: 0.1,
fill: true,
lineTension: 0.3,
backgroundColor: "rgba(253, 197, 6, 0.9)",
borderColor: "rgba(253, 197, 6, 1)",
data: [0, 2, 5.5, 2.6, 5.7, 4, 2.8]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 8. AREA CHART2 ========*/
var area2 = document.getElementById("areaChart2");
if (area2 !== null) {
var areaChart = new Chart(area2, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "New",
pointRadius: 0.1,
fill: true,
lineTension: 0.6,
backgroundColor: "rgba(255, 255, 255, 0.4)",
borderColor: "rgba(255, 255, 255,0)",
data: [0, 5, 2.5, 9, 3.5, 6.5, 0]
},
{
label: "Old",
pointRadius: 0.1,
fill: true,
lineTension: 0.6,
backgroundColor: "rgba(255, 255, 255, 0.8)",
borderColor: "rgba(255, 255, 255, 0)",
data: [0, 2, 5.5, 2.6, 5.7, 4, 2.8]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 9. AREA CHART3 ========*/
var area3 = document.getElementById("area-chart3");
if (area3 !== null) {
var areaChart3 = new Chart(area3, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "New",
pointHitRadius: 10,
pointRadius: 0,
fill: true,
backgroundColor: "rgba(255, 255, 255, 0.4)",
borderColor: "rgba(255, 255, 255,0)",
data: [0, 4, 2, 6.5, 3, 4.7, 0]
},
{
label: "Old",
pointHitRadius: 10,
pointRadius: 0,
fill: true,
backgroundColor: "rgba(255, 255, 255, 0.8)",
borderColor: "rgba(255, 255, 255, 0)",
data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
layout: {
padding: {
right: 10
}
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: true
}
}
});
}
/*======== 10. GRADIENT LINE CHART ========*/
var line = document.getElementById("line");
if (line !== null) {
line = line.getContext("2d");
var gradientFill = line.createLinearGradient(0, 120, 0, 0);
gradientFill.addColorStop(0, "rgba(41,204,151,0.10196)");
gradientFill.addColorStop(1, "rgba(41,204,151,0.30196)");
var lChart = new Chart(line, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Rev",
lineTension: 0,
pointRadius: 4,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: true,
backgroundColor: gradientFill,
borderColor: "#29cc97",
borderWidth: 2,
data: [0, 4, 3, 5.5, 3, 4.7, 1]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
layout: {
padding: {
right: 10
}
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 11. DOUGHNUT CHART ========*/
var doughnut = document.getElementById("doChart");
if (doughnut !== null) {
var myDoughnutChart = new Chart(doughnut, {
type: "doughnut",
data: {
labels: ["completed", "unpaid", "pending", "canceled"],
datasets: [
{
label: ["completed", "unpaid", "pending", "canceled"],
data: [4100, 2500, 1800, 2300],
backgroundColor: ["#4c84ff", "#29cc97", "#8061ef", "#fec402"],
borderWidth: 1
// borderColor: ['#4c84ff','#29cc97','#8061ef','#fec402']
// hoverBorderColor: ['#4c84ff', '#29cc97', '#8061ef', '#fec402']
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
cutoutPercentage: 75,
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return "Order : " + data["labels"][tooltipItem[0]["index"]];
},
label: function(tooltipItem, data) {
return data["datasets"][0]["data"][tooltipItem["index"]];
}
},
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 12. POLAR CHART ========*/
var polar = document.getElementById("polar");
if (polar !== null) {
var configPolar = {
data: {
datasets: [
{
data: [43, 23, 53, 33, 55],
backgroundColor: [
"rgba(41,204,151,0.5)",
"rgba(254,88,101,0.5)",
"rgba(128,97,239,0.5)",
"rgba(254,196,0,0.5)",
"rgba(76,132,255,0.5)"
],
label: "" // for legend
}
],
labels: ["Total Sales", "Rejected", "Completed", "Pending", "Reserve"]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: "right",
display: false
},
layout: {
padding: {
top: 10,
bottom: 10,
right: 10,
left: 10
}
},
title: {
display: false,
text: "Chart.js Polar Area Chart"
},
scale: {
ticks: {
beginAtZero: true,
fontColor: "#1b223c",
fontSize: 12,
stepSize: 10,
max: 60
},
reverse: false
},
animation: {
animateRotate: false,
animateScale: true
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
};
window.myPolarArea = Chart.PolarArea(polar, configPolar);
}
/*======== 13. RADAR CHART ========*/
var radar = document.getElementById("radar");
if (radar !== null) {
var myRadar = new Chart(radar, {
type: "radar",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
datasets: [
{
label: "Current Year",
backgroundColor: "rgba(76,132,255,0.2)",
borderColor: "#4c84ff",
pointBorderWidth: 2,
pointRadius: 4,
pointBorderColor: "rgba(76,132,255,1)",
pointBackgroundColor: "#ffffff",
data: [25, 31, 43, 48, 21, 36, 23, 12, 33, 36, 28, 55]
},
{
label: "Previous Year",
backgroundColor: "rgba(41, 204, 151, 0.2)",
borderColor: "#29cc97",
pointBorderWidth: 2,
pointRadius: 4,
pointBorderColor: "#29cc97",
pointBackgroundColor: "#ffffff",
data: [45, 77, 22, 12, 56, 43, 71, 23, 54, 19, 32, 55]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
title: {
display: false,
text: "Chart.js Radar Chart"
},
layout: {
padding: {
top: 10,
bottom: 10,
right: 10,
left: 10
}
},
scale: {
ticks: {
beginAtZero: true,
fontColor: "#1b223c",
fontSize: 12,
stepSize: 10,
max: 60
}
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 14,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 14. CURRENT USER BAR CHART ========*/
var cUser = document.getElementById("currentUser");
if (cUser !== null) {
var myUChart = new Chart(cUser, {
type: "bar",
data: {
labels: [
"1h",
"10 m",
"50 m",
"30 m",
"40 m",
"20 m",
"30 m",
"25 m",
"20 m",
"5 m",
"10 m"
],
datasets: [
{
label: "signup",
data: [15, 30, 27, 43, 39, 18, 42, 25, 13, 18, 59],
// data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
backgroundColor: "#4c84ff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif",
display: false, // hide main x-axis line
beginAtZero: true,
callback: function(tick, index, array) {
return index % 2 ? "" : tick;
}
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: true,
display: true,
color: "#eee",
zeroLineColor: "#eee"
},
ticks: {
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif",
display: true,
beginAtZero: true
}
}
]
},
tooltips: {
mode: "index",
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5
}
}
});
}
/*======== 15. ANALYTICS - USER ACQUISITION ========*/
var acquisition = document.getElementById("acquisition");
if (acquisition !== null) {
var acqData = [
{
first: [100, 180, 44, 75, 150, 66, 70],
second: [144, 44, 177, 76, 23, 189, 12],
third: [44, 167, 102, 123, 183, 88, 134]
},
{
first: [144, 44, 110, 5, 123, 89, 12],
second: [22, 123, 45, 130, 112, 54, 181],
third: [55, 44, 144, 75, 155, 166, 70]
},
{
first: [134, 80, 123, 65, 171, 33, 22],
second: [44, 144, 77, 76, 123, 89, 112],
third: [156, 23, 165, 88, 112, 54, 181]
}
];
var configAcq = {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
"4 Jan",
"5 Jan",
"6 Jan",
"7 Jan",
"8 Jan",
"9 Jan",
"10 Jan"
],
datasets: [
{
label: "Referral",
backgroundColor: "rgb(76, 132, 255)",
borderColor: "rgba(76, 132, 255,0)",
data: acqData[0].first,
lineTension: 0.3,
pointBackgroundColor: "rgba(76, 132, 255,0)",
pointHoverBackgroundColor: "rgba(76, 132, 255,1)",
pointHoverRadius: 3,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded"
},
{
label: "Direct",
backgroundColor: "rgb(254, 196, 0)",
borderColor: "rgba(254, 196, 0,0)",
data: acqData[0].second,
lineTension: 0.3,
pointBackgroundColor: "rgba(254, 196, 0,0)",
pointHoverBackgroundColor: "rgba(254, 196, 0,1)",
pointHoverRadius: 3,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded"
},
{
label: "Social",
backgroundColor: "rgb(41, 204, 151)",
borderColor: "rgba(41, 204, 151,0)",
data: acqData[0].third,
lineTension: 0.3,
pointBackgroundColor: "rgba(41, 204, 151,0)",
pointHoverBackgroundColor: "rgba(41, 204, 151,1)",
pointHoverRadius: 3,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded"
}
]
},
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
display: false
}
}
],
yAxes: [
{
gridLines: {
display: true,
color: "#eee",
zeroLineColor: "#eee"
},
ticks: {
beginAtZero: true,
stepSize: 50,
max: 200
}
}
]
},
tooltips: {
mode: "index",
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 20,
yPadding: 10,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 10,
caretPadding: 15
}
}
};
var ctx = document.getElementById("acquisition").getContext("2d");
var lineAcq = new Chart(ctx, configAcq);
document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend();
var items = document.querySelectorAll(
"#user-acquisition .nav-tabs .nav-item"
);
items.forEach(function (item, index) {
item.addEventListener("click", function() {
configAcq.data.datasets[0].data = acqData[index].first;
configAcq.data.datasets[1].data = acqData[index].second;
configAcq.data.datasets[2].data = acqData[index].third;
lineAcq.update();
});
});
}
/*======== 16. ANALYTICS - ACTIVITY CHART ========*/
var activity = document.getElementById("activity");
if (activity !== null) {
var activityData = [
{
first: [0, 65, 52, 115, 98, 165, 125],
second: [45, 38, 100, 87, 152, 187, 85]
},
{
first: [0, 65, 77, 33, 49, 100, 100],
second: [88, 33, 20, 44, 111, 140, 77]
},
{
first: [0, 40, 77, 55, 33, 116, 50],
second: [55, 32, 20, 55, 111, 134, 66]
},
{
first: [0, 44, 22, 77, 33, 151, 99],
second: [60, 32, 120, 55, 19, 134, 88]
}
];
var config = {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
"4 Jan",
"5 Jan",
"6 Jan",
"7 Jan",
"8 Jan",
"9 Jan",
"10 Jan"
],
datasets: [
{
label: "Active",
backgroundColor: "transparent",
borderColor: "rgb(82, 136, 255)",
data: activityData[0].first,
lineTension: 0,
pointRadius: 5,
pointBackgroundColor: "rgba(255,255,255,1)",
pointHoverBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
pointHoverRadius: 7,
pointHoverBorderWidth: 1
},
{
label: "Inactive",
backgroundColor: "transparent",
borderColor: "rgb(255, 199, 15)",
data: activityData[0].second,
lineTension: 0,
borderDash: [10, 5],
borderWidth: 1,
pointRadius: 5,
pointBackgroundColor: "rgba(255,255,255,1)",
pointHoverBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
pointHoverRadius: 7,
pointHoverBorderWidth: 1
}
]
},
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
fontColor: "#8a909d", // this here
},
}
],
yAxes: [
{
gridLines: {
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif",
display: true,
color: "#eee",
zeroLineColor: "#eee"
},
ticks: {
// callback: function(tick, index, array) {
// return (index % 2) ? "" : tick;
// }
stepSize: 50,
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif"
}
}
]
},
tooltips: {
mode: "index",
intersect: false,
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5
}
}
};
var ctx = document.getElementById("activity").getContext("2d");
var myLine = new Chart(ctx, config);
var items = document.querySelectorAll("#user-activity .nav-tabs .nav-item");
items.forEach(function(item, index){
item.addEventListener("click", function() {
config.data.datasets[0].data = activityData[index].first;
config.data.datasets[1].data = activityData[index].second;
myLine.update();
});
});
}
/*======== 17. HORIZONTAL BAR CHART1 ========*/
var hbar1 = document.getElementById("hbar1");
if (hbar1 !== null) {
var hbChart1 = new Chart(hbar1, {
type: "horizontalBar",
data: {
labels: ["India", "USA", "Turkey"],
datasets: [
{
label: "signup",
data: [18, 13, 9.5],
backgroundColor: "#4c84ff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: true,
color: "#eee",
zeroLineColor: "#eee",
tickMarkLength: 3
},
ticks: {
display: true, // false will hide main x-axis line
beginAtZero: true,
fontFamily: "Roboto, sans-serif",
fontColor: "#8a909d",
callback: function(value) {
return value + " %";
}
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: true,
beginAtZero: false,
fontFamily: "Roboto, sans-serif",
fontColor: "#8a909d",
fontSize: 14
},
barPercentage: 1.6,
categoryPercentage: 0.2
}
]
},
tooltips: {
mode: "index",
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5
}
}
});
}
/*======== 18. HORIZONTAL BAR CHART2 ========*/
var hbar2 = document.getElementById("hbar2");
if (hbar2 !== null) {
var hbChart2 = new Chart(hbar2, {
type: "horizontalBar",
data: {
labels: ["Florida", "Poland", "UK"],
datasets: [
{
label: "signup",
data: [7.5, 4.6, 4],
backgroundColor: "#4c84ff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: true,
color: "#eee",
zeroLineColor: "#eee",
tickMarkLength: 3
},
ticks: {
display: true, // false will hide main x-axis line
beginAtZero: true,
fontFamily: "Roboto, sans-serif",
fontColor: "#8a909d",
max: 20,
callback: function(value) {
return value + "%";
}
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: true,
beginAtZero: false,
fontFamily: "Roboto, sans-serif",
fontColor: "#8a909d",
fontSize: 14
},
barPercentage: 1.6,
categoryPercentage: 0.2
}
]
},
tooltips: {
mode: "index",
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5
}
}
});
}
/*======== 19. DEVICE - DOUGHNUT CHART ========*/
var deviceChart = document.getElementById("deviceChart");
if (deviceChart !== null) {
var mydeviceChart = new Chart(deviceChart, {
type: "doughnut",
data: {
labels: ["Desktop", "Tablet", "Mobile"],
datasets: [
{
label: ["Desktop", "Tablet", "Mobile"],
data: [60000, 15000, 25000],
backgroundColor: [
"rgba(76, 132, 255, 1)",
"rgba(76, 132, 255, 0.85)",
"rgba(76, 132, 255, 0.70)",
],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
cutoutPercentage: 75,
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return data["labels"][tooltipItem[0]["index"]];
},
label: function(tooltipItem, data) {
return (
data["datasets"][0]["data"][tooltipItem["index"]] + " Sessions"
);
}
},
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5
}
}
});
}
});
/*======== 20. BAR CHART ========*/
var barX = document.getElementById("barChart");
if (barX !== null) {
var myChart = new Chart(barX, {
type: "bar",
data: {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "signup",
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4],
// data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
backgroundColor: "#4c84ff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: false,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2
}
}
});
}
/*======== 21. BAR CHART1 ========*/
var bar1 = document.getElementById("barChart1");
if (bar1 !== null) {
var myChart = new Chart(bar1, {
type: "bar",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "signup",
data: [5, 7.5, 5.5, 6.5, 4, 9],
// data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
backgroundColor: "#4c84ff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 22. BAR CHART2 ========*/
var bar2 = document.getElementById("barChart2");
if (bar2 !== null) {
var myChart2 = new Chart(bar2, {
type: "bar",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "signup",
data: [5, 7.5, 5.5, 6.5, 4, 9],
// data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
backgroundColor: "#ffffff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 23. BAR CHART3 ========*/
var bar3 = document.getElementById("barChart3");
if (bar3 !== null) {
var bar_Chart = new Chart(bar3, {
type: "bar",
data: {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "signup",
data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4],
// data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
backgroundColor: "#ffffff"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: true
}
}
});
}
/*======== 24. GRADIENT LINE CHART1 ========*/
var gline1 = document.getElementById("gline1");
if (gline1 !== null) {
gline1 = gline1.getContext("2d");
var gradientFill = gline1.createLinearGradient(0, 120, 0, 0);
gradientFill.addColorStop(0, "rgba(41,204,151,0.10196)");
gradientFill.addColorStop(1, "rgba(41,204,151,0.30196)");
var lChart = new Chart(gline1, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Rev",
lineTension: 0,
pointRadius: 0.1,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: true,
backgroundColor: gradientFill,
borderColor: "#29cc97",
borderWidth: 2,
data: [0, 5.5, 4, 9, 4, 7, 4.7]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 25. GRADIENT LINE CHART2 ========*/
var gline2 = document.getElementById("gline2");
if (gline2 !== null) {
gline2 = gline2.getContext("2d");
var gradientFill = gline2.createLinearGradient(0, 90, 0, 0);
gradientFill.addColorStop(0, "rgba(255,255,255,0.10196)");
gradientFill.addColorStop(1, "rgba(255,255,255,0.30196)");
var lChart2 = new Chart(gline2, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Rev",
lineTension: 0,
pointRadius: 0.1,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: true,
backgroundColor: gradientFill,
borderColor: "#ffffff",
borderWidth: 2,
data: [0, 5.5, 4, 9, 4, 7, 4.7]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: false
}
}
});
}
/*======== 26. GRADIENT LINE CHART3 ========*/
var gline3 = document.getElementById("line3");
if (gline3 !== null) {
gline3 = gline3.getContext("2d");
var gradientFill = gline3.createLinearGradient(0, 90, 0, 0);
gradientFill.addColorStop(0, "rgba(255,255,255,0.10196)");
gradientFill.addColorStop(1, "rgba(255,255,255,0.30196)");
var lChart3 = new Chart(gline3, {
type: "line",
data: {
labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
datasets: [
{
label: "Rev",
lineTension: 0,
pointRadius: 4,
pointBackgroundColor: "#29cc97",
pointBorderWidth: 2,
fill: true,
backgroundColor: gradientFill,
borderColor: "#ffffff",
borderWidth: 2,
data: [0, 4, 3, 5.5, 3, 4.7, 1]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
right: 10
}
},
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false, // hide main x-axis line
beginAtZero: true
},
barPercentage: 1.8,
categoryPercentage: 0.2
}
],
yAxes: [
{
gridLines: {
drawBorder: false, // hide main y-axis line
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
},
tooltips: {
enabled: true
}
}
});
}
/*======== 27. ACQUISITION3 ========*/
var acquisition3 = document.getElementById("bar3");
if (acquisition3 !== null) {
var acChart3 = new Chart(acquisition3, {
// The type of chart we want to create
type: "bar",
// The data for our dataset
data: {
labels: ["4 Jan", "5 Jan", "6 Jan", "7 Jan", "8 Jan", "9 Jan", "10 Jan"],
datasets: [
{
label: "Referral",
backgroundColor: "rgb(76, 132, 255)",
borderColor: "rgba(76, 132, 255,0)",
data: [78, 90, 70, 75, 45, 52, 22],
pointBackgroundColor: "rgba(76, 132, 255,0)",
pointHoverBackgroundColor: "rgba(76, 132, 255,1)",
pointHoverRadius: 3,
pointHitRadius: 30
},
{
label: "Direct",
backgroundColor: "rgb(254, 196, 0)",
borderColor: "rgba(254, 196, 0,0)",
data: [88, 115, 80, 96, 65, 77, 38],
pointBackgroundColor: "rgba(254, 196, 0,0)",
pointHoverBackgroundColor: "rgba(254, 196, 0,1)",
pointHoverRadius: 3,
pointHitRadius: 30
},
{
label: "Social",
backgroundColor: "rgb(41, 204, 151)",
borderColor: "rgba(41, 204, 151,0)",
data: [103, 135, 102, 116, 83, 97, 55],
pointBackgroundColor: "rgba(41, 204, 151,0)",
pointHoverBackgroundColor: "rgba(41, 204, 151,1)",
pointHoverRadius: 3,
pointHitRadius: 30
}
]
},
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
display: false
}
}
],
yAxes: [
{
gridLines: {
display: true
},
ticks: {
beginAtZero: true,
stepSize: 50,
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif",
max: 200
}
}
]
},
tooltips: {}
}
});
document.getElementById("customLegend").innerHTML = acChart3.generateLegend();
}
/*======== 28. STATISTICS ========*/
var mstat = document.getElementById("mstat");
if (mstat !== null) {
var msdChart = new Chart(mstat, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "Old",
pointRadius: 4,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: true,
lineTension: 0,
backgroundColor: "rgba(66,208,163,0.2)",
borderWidth: 2.5,
borderColor: "#42d0a3",
data: [10000, 17500, 2000, 11000, 19000, 10500, 18000]
},
{
label: "New",
pointRadius: 4,
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 2,
fill: true,
lineTension: 0,
backgroundColor: "rgba(76,132,255,0.2)",
borderWidth: 2.5,
borderColor: "#4c84ff",
data: [2000, 11500, 10000, 14000, 11000, 16800, 14500]
}
]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: true,
display: false
},
ticks: {
display: true, // hide main x-axis line
beginAtZero: true,
fontFamily: "Roboto, sans-serif",
fontColor: "#8a909d"
}
}
],
yAxes: [
{
gridLines: {
drawBorder: true, // hide main y-axis line
display: true
},
ticks: {
callback: function(value) {
var ranges = [
{ divider: 1e6, suffix: "M" },
{ divider: 1e3, suffix: "k" }
];
function formatNumber(n) {
for (var i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (
(n / ranges[i].divider).toString() + ranges[i].suffix
);
}
}
return n;
}
return formatNumber(value);
},
stepSize: 5000,
fontColor: "#8a909d",
fontFamily: "Roboto, sans-serif",
beginAtZero: true
}
}
]
},
tooltips: {
enabled: true
}
}
});
}