%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/chartjs/advance/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/chartjs/advance/combo-bar-line.js |
/*========================================================================================= File Name: combo-bar-line.js Description: Chartjs combo bar line chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Combo bar line chart // ------------------------------ $(window).on("load", function(){ //Get the context of the Chart canvas element we want to select var ctx = $("#combo-bar-line"); // Chart Options var chartOptions = { responsive: true, maintainAspectRatio: false, 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: false, text: 'Chart.js Combo Bar Line Chart' } }; // Chart Data var chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ type: 'line', label: "My Second dataset", data: [28, 48, 40, 19, 86, 27, 90], backgroundColor: "rgba(250,142,117,.5)", borderColor: "transparent", borderWidth: 2, pointBorderColor: "#FA8E75", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, },{ type: 'bar', label: "My First dataset", data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: "#00A5A8", borderColor: "transparent", borderWidth: 2 }, { type: 'bar', label: "My Third dataset - No bezier", data: [45, 25, 16, 36, 67, 18, 76], backgroundColor: "#F25E75", borderColor: "transparent", borderWidth: 2 }] }; var config = { type: 'bar', // Chart Options options : chartOptions, data : chartData }; // Create the chart var lineChart = new Chart(ctx, config); });