%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.js |
/*========================================================================================= File Name: column.js Description: Chartjs column 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 chart // ------------------------------ $(window).on("load", function(){ //Get the context of the Chart canvas element we want to select var ctx = $("#column-chart"); // Chart Options var chartOptions = { // Elements options apply to all of the options unless overridden in a dataset // In this case, we are setting the border of each bar to be 2px wide and green elements: { rectangle: { borderWidth: 2, borderColor: 'rgb(0, 255, 0)', borderSkipped: 'bottom' } }, responsive: true, maintainAspectRatio: false, responsiveAnimationDuration:500, legend: { position: 'top', }, scales: { xAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, } }], yAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, } }] }, title: { display: true, text: 'Chart.js Bar Chart' } }; // Chart Data var chartData = { labels: ["January", "February", "March", "April", "May"], datasets: [{ label: "My First dataset", data: [65, 59, 80, 81, 56], backgroundColor: "#28D094", hoverBackgroundColor: "rgba(22,211,154,.9)", borderColor: "transparent" }, { label: "My Second dataset", data: [28, 48, 40, 19, 86], backgroundColor: "#F98E76", hoverBackgroundColor: "rgba(249,142,118,.9)", borderColor: "transparent" }] }; var config = { type: 'bar', // Chart Options options : chartOptions, data : chartData }; // Create the chart var lineChart = new Chart(ctx, config); });