446 lines
9.1 KiB
JavaScript
446 lines
9.1 KiB
JavaScript
var chartColors = {
|
|
red: "rgb(255, 99, 132)",
|
|
orange: "rgb(255, 159, 64)",
|
|
yellow: "rgb(255, 205, 86)",
|
|
green: "rgb(75, 192, 192)",
|
|
info: "#41B1F9",
|
|
blue: "#3245D1",
|
|
purple: "rgb(153, 102, 255)",
|
|
grey: "#EBEFF6",
|
|
}
|
|
|
|
var config1 = {
|
|
type: "line",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "Balance",
|
|
backgroundColor: "#fff",
|
|
borderColor: "#fff",
|
|
data: [20, 40, 20, 70, 10, 50, 20],
|
|
fill: false,
|
|
pointBorderWidth: 100,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
left: -10,
|
|
top: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
tooltips: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: "nearest",
|
|
intersect: true,
|
|
},
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
var config2 = {
|
|
type: "line",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "Revenue",
|
|
backgroundColor: "#fff",
|
|
borderColor: "#fff",
|
|
data: [20, 800, 300, 400, 10, 50, 20],
|
|
fill: false,
|
|
pointBorderWidth: 100,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
left: -10,
|
|
top: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
tooltips: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: "nearest",
|
|
intersect: true,
|
|
},
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
var config3 = {
|
|
type: "line",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "Orders",
|
|
backgroundColor: "#fff",
|
|
borderColor: "#fff",
|
|
data: [20, 40, 20, 200, 10, 540, 723],
|
|
fill: false,
|
|
pointBorderWidth: 100,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
left: -10,
|
|
top: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
title: {
|
|
display: false,
|
|
text: "Chart.js Line Chart",
|
|
},
|
|
tooltips: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: "nearest",
|
|
intersect: true,
|
|
},
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
var config4 = {
|
|
type: "line",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "My First dataset",
|
|
backgroundColor: "#fff",
|
|
borderColor: "#fff",
|
|
data: [20, 40, 20, 70, 10, 5, 23],
|
|
fill: false,
|
|
pointBorderWidth: 100,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
left: -10,
|
|
top: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
title: {
|
|
display: false,
|
|
text: "Chart.js Line Chart",
|
|
},
|
|
tooltips: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: "nearest",
|
|
intersect: true,
|
|
},
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
|
|
var ctxBar = document.getElementById("bar").getContext("2d")
|
|
var myBar = new Chart(ctxBar, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
datasets: [
|
|
{
|
|
label: "Students",
|
|
backgroundColor: [
|
|
chartColors.grey,
|
|
chartColors.grey,
|
|
chartColors.grey,
|
|
chartColors.grey,
|
|
chartColors.info,
|
|
chartColors.blue,
|
|
chartColors.grey,
|
|
],
|
|
data: [5, 10, 30, 40, 35, 55, 15],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
barRoundness: 1,
|
|
title: {
|
|
display: true,
|
|
text: "Students in 2020",
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
suggestedMax: 40 + 20,
|
|
padding: 10,
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
},
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
})
|
|
var line = document.getElementById("line").getContext("2d")
|
|
var gradient = line.createLinearGradient(0, 0, 0, 400)
|
|
gradient.addColorStop(0, "rgba(50, 69, 209,1)")
|
|
gradient.addColorStop(1, "rgba(265, 177, 249,0)")
|
|
|
|
var gradient2 = line.createLinearGradient(0, 0, 0, 400)
|
|
gradient2.addColorStop(0, "rgba(255, 91, 92,1)")
|
|
gradient2.addColorStop(1, "rgba(265, 177, 249,0)")
|
|
|
|
var myline = new Chart(line, {
|
|
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",
|
|
],
|
|
datasets: [
|
|
{
|
|
label: "Balance",
|
|
data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45],
|
|
backgroundColor: "rgba(50, 69, 209,.6)",
|
|
borderWidth: 3,
|
|
borderColor: "rgba(63,82,227,1)",
|
|
pointBorderWidth: 0,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
{
|
|
label: "Balance",
|
|
data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53],
|
|
backgroundColor: "rgba(253, 183, 90,.6)",
|
|
borderWidth: 3,
|
|
borderColor: "rgba(253, 183, 90,.6)",
|
|
pointBorderWidth: 0,
|
|
pointBorderColor: "transparent",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "transparent",
|
|
pointHoverBackgroundColor: "rgba(63,82,227,1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
layout: {
|
|
padding: {
|
|
top: 10,
|
|
},
|
|
},
|
|
tooltips: {
|
|
intersect: false,
|
|
titleFontFamily: "Helvetica",
|
|
titleMarginBottom: 10,
|
|
xPadding: 10,
|
|
yPadding: 10,
|
|
cornerRadius: 3,
|
|
},
|
|
legend: {
|
|
display: true,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
display: true,
|
|
drawBorder: true,
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
},
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
})
|
|
|
|
// let ctx1 = document.getElementById("canvas1").getContext("2d");
|
|
// let ctx2 = document.getElementById("canvas2").getContext("2d");
|
|
// let ctx3 = document.getElementById("canvas3").getContext("2d");
|
|
// let ctx4 = document.getElementById("canvas4").getContext("2d");
|
|
// var lineChart1 = new Chart(ctx1, config1);
|
|
// var lineChart2 = new Chart(ctx2, config2);
|
|
// var lineChart3 = new Chart(ctx3, config3);
|
|
// var lineChart4 = new Chart(ctx4, config4);
|