262 lines
7.0 KiB
JavaScript
262 lines
7.0 KiB
JavaScript
"use strict";
|
|
|
|
var ctx = document.getElementById("myChart").getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
],
|
|
datasets: [
|
|
{
|
|
label: "Sales",
|
|
data: [3200, 1800, 4305, 3022, 6310, 5120, 5880, 6154],
|
|
borderWidth: 2,
|
|
backgroundColor: "rgba(63,82,227,.8)",
|
|
borderWidth: 0,
|
|
borderColor: "transparent",
|
|
pointBorderWidth: 0,
|
|
pointRadius: 3.5,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,.8)",
|
|
},
|
|
{
|
|
label: "Budget",
|
|
data: [2207, 3403, 2200, 5025, 2302, 4208, 3880, 4880],
|
|
borderWidth: 2,
|
|
backgroundColor: "rgba(254,86,83,.7)",
|
|
borderWidth: 0,
|
|
borderColor: "transparent",
|
|
pointBorderWidth: 0,
|
|
pointRadius: 3.5,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(254,86,83,.8)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
// display: false,
|
|
drawBorder: false,
|
|
color: "#f2f2f2",
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
stepSize: 1500,
|
|
callback: function (value, index, values) {
|
|
return "$" + value;
|
|
},
|
|
},
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
tickMarkLength: 15,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
var balance_chart = document.getElementById("balance-chart").getContext("2d");
|
|
|
|
var balance_chart_bg_color = balance_chart.createLinearGradient(0, 0, 0, 70);
|
|
balance_chart_bg_color.addColorStop(0, "rgba(63,82,227,.2)");
|
|
balance_chart_bg_color.addColorStop(1, "rgba(63,82,227,0)");
|
|
|
|
var myChart = new Chart(balance_chart, {
|
|
type: "line",
|
|
data: {
|
|
labels: [
|
|
"16-07-2018",
|
|
"17-07-2018",
|
|
"18-07-2018",
|
|
"19-07-2018",
|
|
"20-07-2018",
|
|
"21-07-2018",
|
|
"22-07-2018",
|
|
"23-07-2018",
|
|
"24-07-2018",
|
|
"25-07-2018",
|
|
"26-07-2018",
|
|
"27-07-2018",
|
|
"28-07-2018",
|
|
"29-07-2018",
|
|
"30-07-2018",
|
|
"31-07-2018",
|
|
],
|
|
datasets: [
|
|
{
|
|
label: "Balance",
|
|
data: [
|
|
50, 61, 80, 50, 72, 52, 60, 41, 30, 45, 70, 40, 93, 63, 50,
|
|
62,
|
|
],
|
|
backgroundColor: balance_chart_bg_color,
|
|
borderWidth: 3,
|
|
borderColor: "rgba(63,82,227,1)",
|
|
pointBorderWidth: 0,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
bottom: -1,
|
|
left: -1,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
var sales_chart = document.getElementById("sales-chart").getContext("2d");
|
|
|
|
var sales_chart_bg_color = sales_chart.createLinearGradient(0, 0, 0, 80);
|
|
balance_chart_bg_color.addColorStop(0, "rgba(63,82,227,.2)");
|
|
balance_chart_bg_color.addColorStop(1, "rgba(63,82,227,0)");
|
|
|
|
var myChart = new Chart(sales_chart, {
|
|
type: "line",
|
|
data: {
|
|
labels: [
|
|
"16-07-2018",
|
|
"17-07-2018",
|
|
"18-07-2018",
|
|
"19-07-2018",
|
|
"20-07-2018",
|
|
"21-07-2018",
|
|
"22-07-2018",
|
|
"23-07-2018",
|
|
"24-07-2018",
|
|
"25-07-2018",
|
|
"26-07-2018",
|
|
"27-07-2018",
|
|
"28-07-2018",
|
|
"29-07-2018",
|
|
"30-07-2018",
|
|
"31-07-2018",
|
|
],
|
|
datasets: [
|
|
{
|
|
label: "Sales",
|
|
data: [
|
|
70, 62, 44, 40, 21, 63, 82, 52, 50, 31, 70, 50, 91, 63, 51,
|
|
60,
|
|
],
|
|
borderWidth: 2,
|
|
backgroundColor: balance_chart_bg_color,
|
|
borderWidth: 3,
|
|
borderColor: "rgba(63,82,227,1)",
|
|
pointBorderWidth: 0,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
bottom: -1,
|
|
left: -1,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
$("#products-carousel").owlCarousel({
|
|
items: 3,
|
|
margin: 10,
|
|
autoplay: true,
|
|
autoplayTimeout: 5000,
|
|
loop: true,
|
|
responsive: {
|
|
0: {
|
|
items: 2,
|
|
},
|
|
768: {
|
|
items: 2,
|
|
},
|
|
1200: {
|
|
items: 3,
|
|
},
|
|
},
|
|
});
|