/******/ (function() { // webpackBootstrap var __webpack_exports__ = {}; /*!********************************************!*\ !*** ./resources/js/pages/chartjs.init.js ***! \********************************************/ /* Template Name: Skote - Admin & Dashboard Template Author: Themesbrand Website: https://themesbrand.com/ Contact: themesbrand@gmail.com File: ChartJs init Js File */ function getChartColorsArray(chartId) { if (document.getElementById(chartId) !== null) { var colors = document.getElementById(chartId).getAttribute("data-colors"); if (colors) { colors = JSON.parse(colors); return colors.map(function (value) { var newValue = value.replace(" ", ""); if (newValue.indexOf(",") === -1) { var color = getComputedStyle(document.documentElement).getPropertyValue(newValue); if (color){ color = color.replace(" ", ""); return color; } else return newValue;; } else { var val = value.split(','); if (val.length == 2) { var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]); rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")"; return rgbaColor; } else { return newValue; } } }); } } } !function ($) { "use strict"; var ChartJs = function ChartJs() {}; ChartJs.prototype.respChart = function (selector, type, data, options) { Chart.defaults.global.defaultFontColor = "#9295a4", Chart.defaults.scale.gridLines.color = "rgba(166, 176, 207, 0.1)"; // get selector by context var ctx = selector.get(0).getContext("2d"); // pointing parent container to make chart js inherit its width var container = $(selector).parent(); // enable resizing matter $(window).resize(generateChart); // this function produce the responsive Chart JS function generateChart() { // make chart width fit with its container var ww = selector.attr('width', $(container).width()); switch (type) { case 'Line': new Chart(ctx, { type: 'line', data: data, options: options }); break; case 'Doughnut': new Chart(ctx, { type: 'doughnut', data: data, options: options }); break; case 'Pie': new Chart(ctx, { type: 'pie', data: data, options: options }); break; case 'Bar': new Chart(ctx, { type: 'bar', data: data, options: options }); break; case 'Radar': new Chart(ctx, { type: 'radar', data: data, options: options }); break; case 'PolarArea': new Chart(ctx, { data: data, type: 'polarArea', options: options }); break; } // Initiate new chart or Redraw } ; // run function - render chart at first load generateChart(); }, //init ChartJs.prototype.init = function () { //creating lineChart var LinechartLinechartColors = getChartColorsArray("lineChart"); if (LinechartLinechartColors) { var lineChart = { labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"], datasets: [{ label: "Sales Analytics", fill: true, lineTension: 0.5, backgroundColor: LinechartLinechartColors[0], borderColor: LinechartLinechartColors[1], borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: LinechartLinechartColors[1], pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: LinechartLinechartColors[1], pointHoverBorderColor: "#fff", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80] }, { label: "Monthly Earnings", fill: true, lineTension: 0.5, backgroundColor: LinechartLinechartColors[2], borderColor: LinechartLinechartColors[3], borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: LinechartLinechartColors[3], pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: LinechartLinechartColors[3], pointHoverBorderColor: "#eef0f2", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36] }] }; var lineOpts = { scales: { yAxes: [{ ticks: { max: 100, min: 20, stepSize: 10 } }] } }; this.respChart($("#lineChart"), 'Line', lineChart, lineOpts); } //donut chart var DoughnutchartColors = getChartColorsArray("doughnut"); if (DoughnutchartColors) { var donutChart = { labels: ["Desktops", "Tablets"], datasets: [{ data: [300, 210], backgroundColor: DoughnutchartColors, hoverBackgroundColor: DoughnutchartColors, hoverBorderColor: "#fff" }] }; this.respChart($("#doughnut"), 'Doughnut', donutChart); } //Pie chart var PiechartColors = getChartColorsArray("pie"); if (PiechartColors) { var pieChart = { labels: ["Desktops", "Tablets"], datasets: [{ data: [300, 180], backgroundColor: PiechartColors, hoverBackgroundColor: PiechartColors, hoverBorderColor: "#fff" }] }; this.respChart($("#pie"), 'Pie', pieChart); } //barchart var BarchartColors = getChartColorsArray("bar"); if (BarchartColors) { var barChart = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "Sales Analytics", backgroundColor: BarchartColors[0], borderColor: BarchartColors[0], borderWidth: 1, hoverBackgroundColor: BarchartColors[1], hoverBorderColor: BarchartColors[1], data: [65, 59, 81, 45, 56, 80, 50, 20] }] }; var barOpts = { scales: { xAxes: [{ barPercentage: 0.4 }] } }; this.respChart($("#bar"), 'Bar', barChart, barOpts); } //radar chart var RadarchartColors = getChartColorsArray("radar"); if (RadarchartColors) { var radarChart = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [{ label: "Desktops", backgroundColor: RadarchartColors[0], borderColor: RadarchartColors[1], pointBackgroundColor: RadarchartColors[1], pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: RadarchartColors[1], data: [65, 59, 90, 81, 56, 55, 40] }, { label: "Tablets", backgroundColor: RadarchartColors[2], borderColor: RadarchartColors[3], pointBackgroundColor: RadarchartColors[3], pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: RadarchartColors[3], data: [28, 48, 40, 19, 96, 27, 100] }] }; this.respChart($("#radar"), 'Radar', radarChart); } //Polar area chart var PolarAreachartColors = getChartColorsArray("polarArea"); if (PolarAreachartColors) { var polarChart = { datasets: [{ data: [11, 16, 7, 18], backgroundColor: PolarAreachartColors, label: 'My dataset', // for legend hoverBorderColor: "#fff" }], labels: ["Series 1", "Series 2", "Series 3", "Series 4"] }; this.respChart($("#polarArea"), 'PolarArea', polarChart); } }, $.ChartJs = new ChartJs(), $.ChartJs.Constructor = ChartJs; }(window.jQuery), //initializing function ($) { "use strict"; $.ChartJs.init(); }(window.jQuery); /******/ })() ;