You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.2 KiB
107 lines
3.2 KiB
6 years ago
|
/*=========================================================================================
|
||
|
|
File Name: line-stacked-area.js
|
||
|
|
Description: Chartjs line stacked area chart
|
||
|
|
----------------------------------------------------------------------------------------
|
||
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
||
|
|
Version: 1.0
|
||
|
|
Author: PIXINVENT
|
||
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
||
|
|
==========================================================================================*/
|
||
|
|
|
||
|
|
// Line stacked area chart
|
||
|
|
// ------------------------------
|
||
|
|
$(window).on("load", function(){
|
||
|
|
|
||
|
|
//Get the context of the Chart canvas element we want to select
|
||
|
|
// var ctx = document.getElementById("line-stacked-area").getContext("2d");
|
||
|
|
var ctx = $('#line-stacked-area');
|
||
|
|
|
||
|
|
// Chart Options
|
||
|
|
var chartOptions = {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
legend: {
|
||
|
|
position: 'bottom',
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
mode: 'label'
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
xAxes: [{
|
||
|
|
display: true,
|
||
|
|
gridLines: {
|
||
|
|
color: "#f3f3f3",
|
||
|
|
drawTicks: false,
|
||
|
|
},
|
||
|
|
scaleLabel: {
|
||
|
|
display: true,
|
||
|
|
labelString: 'Month'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
yAxes: [{
|
||
|
|
display: true,
|
||
|
|
gridLines: {
|
||
|
|
color: "#f3f3f3",
|
||
|
|
drawTicks: false,
|
||
|
|
},
|
||
|
|
scaleLabel: {
|
||
|
|
display: true,
|
||
|
|
labelString: 'Value'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'Chart.js Line Chart - Legend'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Chart Data
|
||
|
|
var chartData = {
|
||
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||
|
|
datasets: [{
|
||
|
|
label: "My First dataset",
|
||
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||
|
|
backgroundColor: "rgba(22,211,154,.5)",
|
||
|
|
borderColor: "transparent",
|
||
|
|
pointBorderColor: "#28D094",
|
||
|
|
pointBackgroundColor: "#FFF",
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
pointHoverBorderWidth: 2,
|
||
|
|
pointRadius: 4,
|
||
|
|
}, {
|
||
|
|
label: "My Second dataset",
|
||
|
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||
|
|
backgroundColor: "rgba(81,117,224,.5)",
|
||
|
|
borderColor: "transparent",
|
||
|
|
pointBorderColor: "#5175E0",
|
||
|
|
pointBackgroundColor: "#FFF",
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
pointHoverBorderWidth: 2,
|
||
|
|
pointRadius: 4,
|
||
|
|
}, {
|
||
|
|
label: "My Third dataset",
|
||
|
|
data: [80, 25, 16, 36, 67, 18, 76],
|
||
|
|
backgroundColor: "rgba(249,142,118,.5)",
|
||
|
|
borderColor: "transparent",
|
||
|
|
pointBorderColor: "#F98E76",
|
||
|
|
pointBackgroundColor: "#FFF",
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
pointHoverBorderWidth: 2,
|
||
|
|
pointRadius: 4,
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = {
|
||
|
|
type: 'line',
|
||
|
|
|
||
|
|
// Chart Options
|
||
|
|
options : chartOptions,
|
||
|
|
|
||
|
|
// Chart Data
|
||
|
|
data : chartData
|
||
|
|
};
|
||
|
|
|
||
|
|
// Create the chart
|
||
|
|
var stackedAreaChart = new Chart(ctx, config);
|
||
|
|
});
|