%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/chartjs/bar/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/chartjs/bar/column-stacked.js |
/*========================================================================================= File Name: column-stacked.js Description: Chartjs column stacked chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Column stacked chart // ------------------------------ $(window).on("load", function(){ // Get the context of the Chart canvas element we want to select var ctx = $("#column-stacked"); // Chart Options var chartOptions = { title:{ display:false, text:"Chart.js Column Chart - Stacked" }, tooltips: { mode: 'label' }, responsive: true, maintainAspectRatio: false, responsiveAnimationDuration:500, scales: { xAxes: [{ stacked: true, display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, } }], yAxes: [{ stacked: true, display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, } }] } }; // Chart Data var chartData = { labels: ["January", "February", "March", "April", "May"], datasets: [{ label: "My First dataset", data: [65, 59, 80, 81, 56], backgroundColor: "#5175E0", hoverBackgroundColor: "rgba(81,117,224,.8)", borderColor: "transparent" }, { label: "My Second dataset", data: [28, 48, 40, 19, 86], backgroundColor: "#28D094", hoverBackgroundColor: "rgba(22,211,154,.8)", borderColor: "transparent" }, { label: "My Third dataset", data: [80, 25, 16, 36, 67], backgroundColor: "#F98E76", hoverBackgroundColor: "rgba(249,142,118,.8)", borderColor: "transparent" }] }; var config = { type: 'bar', // Chart Options options : chartOptions, data : chartData }; // Create the chart var lineChart = new Chart(ctx, config); });