1365 lines
35 KiB
JavaScript
1365 lines
35 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: Column Chart init js
|
|
*/
|
|
|
|
// get colors array from the string
|
|
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) 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;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Basic Column Chart
|
|
var chartColumnColors = getChartColorsArray("column_chart");
|
|
if (chartColumnColors) {
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '45%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
series: [{
|
|
name: 'Net Profit',
|
|
data: [46, 57, 59, 54, 62, 58, 64, 60, 66]
|
|
}, {
|
|
name: 'Revenue',
|
|
data: [74, 83, 102, 97, 86, 106, 93, 114, 94]
|
|
}, {
|
|
name: 'Free Cash Flow',
|
|
data: [37, 42, 38, 26, 47, 50, 54, 55, 43]
|
|
}],
|
|
colors: chartColumnColors,
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: '$ (thousands)'
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f1f1',
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function(val) {
|
|
return "$ " + val + " thousands"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#column_chart"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
}
|
|
|
|
|
|
// Column with Datalabels
|
|
var chartColumnDatatalabelColors = getChartColorsArray("column_chart_datalabel");
|
|
if (chartColumnDatatalabelColors) {
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
dataLabels: {
|
|
position: 'top', // top, center, bottom
|
|
},
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function(val) {
|
|
return val + "%";
|
|
},
|
|
offsetY: -20,
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: ["#adb5bd"]
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Inflation',
|
|
data: [2.5, 3.2, 5.0, 10.1, 4.2, 3.8, 3, 2.4, 4.0, 1.2, 3.5, 0.8]
|
|
}],
|
|
colors: chartColumnDatatalabelColors,
|
|
grid: {
|
|
borderColor: '#f1f1f1',
|
|
},
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
position: 'top',
|
|
labels: {
|
|
offsetY: -18,
|
|
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
colorFrom: '#D8E3F0',
|
|
colorTo: '#BED1E6',
|
|
stops: [0, 100],
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.5,
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
offsetY: -35,
|
|
|
|
}
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "horizontal",
|
|
shadeIntensity: 0.25,
|
|
gradientToColors: undefined,
|
|
inverseColors: true,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [50, 0, 100, 100]
|
|
},
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
formatter: function(val) {
|
|
return val + "%";
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Monthly Inflation in Argentina, 2002',
|
|
floating: true,
|
|
offsetY: 320,
|
|
align: 'center',
|
|
style: {
|
|
color: '#444'
|
|
},
|
|
style: {
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#column_chart_datalabel"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
}
|
|
|
|
// Stacked Columns Charts
|
|
var chartColumnStackedColors = getChartColorsArray("column_stacked");
|
|
if (chartColumnStackedColors) {
|
|
var options = {
|
|
series: [{
|
|
name: 'PRODUCT A',
|
|
data: [44, 55, 41, 67, 22, 43]
|
|
}, {
|
|
name: 'PRODUCT B',
|
|
data: [13, 23, 20, 8, 13, 27]
|
|
}, {
|
|
name: 'PRODUCT C',
|
|
data: [11, 17, 15, 15, 21, 14]
|
|
}, {
|
|
name: 'PRODUCT D',
|
|
data: [21, 7, 25, 13, 22, 8]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
},
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom',
|
|
offsetX: -10,
|
|
offsetY: 0
|
|
}
|
|
}
|
|
}],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
borderRadius: 10
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
|
|
'01/05/2011 GMT', '01/06/2011 GMT'
|
|
],
|
|
},
|
|
legend: {
|
|
position: 'right',
|
|
offsetY: 40
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
colors: chartColumnStackedColors,
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_stacked"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// 100% Stacked Column Chart
|
|
|
|
var chartColumnStacked100Colors = getChartColorsArray("column_stacked_chart");
|
|
if (chartColumnStacked100Colors) {
|
|
var options = {
|
|
series: [{
|
|
name: 'PRODUCT A',
|
|
data: [44, 55, 41, 67, 22, 43, 21, 49]
|
|
}, {
|
|
name: 'PRODUCT B',
|
|
data: [13, 23, 20, 8, 13, 27, 33, 12]
|
|
}, {
|
|
name: 'PRODUCT C',
|
|
data: [11, 17, 15, 15, 21, 14, 15, 13]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
stackType: '100%',
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom',
|
|
offsetX: -10,
|
|
offsetY: 0
|
|
}
|
|
}
|
|
}],
|
|
xaxis: {
|
|
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2',
|
|
'2012 Q3', '2012 Q4'
|
|
],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
position: 'right',
|
|
offsetX: 0,
|
|
offsetY: 50
|
|
},
|
|
colors: chartColumnStacked100Colors,
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_stacked_chart"), options);
|
|
chart.render();
|
|
}
|
|
|
|
//grouped_stacked_columns
|
|
var groupedStackedColors = getChartColorsArray("grouped_stacked_columns");
|
|
if (groupedStackedColors) {
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'Q1 Budget',
|
|
group: 'budget',
|
|
data: [44000, 55000, 41000, 67000, 22000, 43000]
|
|
},
|
|
{
|
|
name: 'Q1 Actual',
|
|
group: 'actual',
|
|
data: [48000, 50000, 40000, 65000, 25000, 40000]
|
|
},
|
|
{
|
|
name: 'Q2 Budget',
|
|
group: 'budget',
|
|
data: [13000, 36000, 20000, 8000, 13000, 27000]
|
|
},
|
|
{
|
|
name: 'Q2 Actual',
|
|
group: 'actual',
|
|
data: [20000, 40000, 25000, 10000, 12000, 28000]
|
|
}
|
|
],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: ['#fff']
|
|
},
|
|
dataLabels: {
|
|
formatter: (val) => {
|
|
return val / 1000 + 'K'
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
'Online advertising',
|
|
'Sales Training',
|
|
'Print advertising',
|
|
'Catalogs',
|
|
'Meetings',
|
|
'Public relations'
|
|
]
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
colors: groupedStackedColors,
|
|
yaxis: {
|
|
labels: {
|
|
formatter: (val) => {
|
|
return val / 1000 + 'K'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left'
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#grouped_stacked_columns"), options);
|
|
chart.render();
|
|
}
|
|
|
|
//dumbbell_chart
|
|
var dumbbellChartColors = getChartColorsArray("dumbbell_chart");
|
|
if (dumbbellChartColors) {
|
|
var options = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
x: '2008',
|
|
y: [2800, 4500]
|
|
},
|
|
{
|
|
x: '2009',
|
|
y: [3200, 4100]
|
|
},
|
|
{
|
|
x: '2010',
|
|
y: [2950, 7800]
|
|
},
|
|
{
|
|
x: '2011',
|
|
y: [3000, 4600]
|
|
},
|
|
{
|
|
x: '2012',
|
|
y: [3500, 4100]
|
|
},
|
|
{
|
|
x: '2013',
|
|
y: [4500, 6500]
|
|
},
|
|
{
|
|
x: '2014',
|
|
y: [4100, 5600]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
chart: {
|
|
height: 350,
|
|
type: 'rangeBar',
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
isDumbbell: true,
|
|
columnWidth: 3,
|
|
dumbbellColors: dumbbellChartColors
|
|
}
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
customLegendItems: ['Product A', 'Product B']
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
type: 'vertical',
|
|
gradientToColors: ['#00E396'],
|
|
inverseColors: true,
|
|
stops: [0, 100]
|
|
}
|
|
},
|
|
grid: {
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
tickPlacement: 'on'
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#dumbbell_chart"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// column with Markers
|
|
var chartColumnMarkersColors = getChartColorsArray("column_markers");
|
|
if (chartColumnMarkersColors) {
|
|
var options = {
|
|
series: [{
|
|
name: 'Actual',
|
|
data: [{
|
|
x: '2011',
|
|
y: 1292,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 1400,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2012',
|
|
y: 4432,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 5400,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2013',
|
|
y: 5423,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 5200,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2014',
|
|
y: 6653,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 6500,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2015',
|
|
y: 8133,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 6600,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2016',
|
|
y: 7132,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 7500,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2017',
|
|
y: 7332,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 8700,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
},
|
|
{
|
|
x: '2018',
|
|
y: 6553,
|
|
goals: [{
|
|
name: 'Expected',
|
|
value: 7300,
|
|
strokeWidth: 5,
|
|
strokeColor: '#775DD0'
|
|
}]
|
|
}
|
|
]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '30%'
|
|
}
|
|
},
|
|
colors: chartColumnMarkersColors,
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: chartColumnMarkersColors
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_markers"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// Column with Rotated Labels
|
|
var chartColumnRotateLabelsColors = getChartColorsArray("column_rotated_labels");
|
|
if (chartColumnRotateLabelsColors) {
|
|
var options = {
|
|
series: [{
|
|
name: 'Servings',
|
|
data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35]
|
|
}],
|
|
annotations: {
|
|
points: [{
|
|
x: 'Bananas',
|
|
seriesIndex: 0,
|
|
label: {
|
|
borderColor: '#775DD0',
|
|
offsetY: 0,
|
|
style: {
|
|
color: '#fff',
|
|
background: '#775DD0',
|
|
},
|
|
text: 'Bananas are good',
|
|
}
|
|
}]
|
|
},
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: '50%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
colors: chartColumnRotateLabelsColors,
|
|
xaxis: {
|
|
labels: {
|
|
rotate: -45
|
|
},
|
|
categories: ['Apples', 'Oranges', 'Strawberries', 'Pineapples', 'Mangoes', 'Bananas',
|
|
'Blackberries', 'Pears', 'Watermelons', 'Cherries', 'Pomegranates', 'Tangerines', 'Papayas'
|
|
],
|
|
tickPlacement: 'on'
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Servings',
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "horizontal",
|
|
shadeIntensity: 0.25,
|
|
gradientToColors: undefined,
|
|
inverseColors: true,
|
|
opacityFrom: 0.85,
|
|
opacityTo: 0.85,
|
|
stops: [50, 0, 100]
|
|
},
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_rotated_labels"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// Column with Negative Values
|
|
var chartNagetiveValuesColors = getChartColorsArray("column_nagetive_values");
|
|
if (chartNagetiveValuesColors) {
|
|
var options = {
|
|
series: [{
|
|
name: 'Cash Flow',
|
|
data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
|
|
5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
|
|
48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
|
|
]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
colors: {
|
|
ranges: [{
|
|
from: -100,
|
|
to: -46,
|
|
color: chartNagetiveValuesColors[1]
|
|
}, {
|
|
from: -45,
|
|
to: 0,
|
|
color: chartNagetiveValuesColors[2]
|
|
}]
|
|
},
|
|
columnWidth: '80%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
colors: chartNagetiveValuesColors[0],
|
|
yaxis: {
|
|
title: {
|
|
text: 'Growth',
|
|
},
|
|
labels: {
|
|
formatter: function(y) {
|
|
return y.toFixed(0) + "%";
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
|
|
'2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
|
|
'2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
|
|
'2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
|
|
'2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
|
|
'2013-07-01', '2013-08-01', '2013-09-01'
|
|
],
|
|
labels: {
|
|
rotate: -90
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_nagetive_values"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// Range Column Chart
|
|
var chartRangeColors = getChartColorsArray("column_range");
|
|
if (chartRangeColors) {
|
|
var options = {
|
|
series: [{
|
|
data: [{
|
|
x: 'Team A',
|
|
y: [1, 5]
|
|
}, {
|
|
x: 'Team B',
|
|
y: [4, 6]
|
|
}, {
|
|
x: 'Team C',
|
|
y: [5, 8]
|
|
}, {
|
|
x: 'Team D',
|
|
y: [3, 11]
|
|
}]
|
|
}, {
|
|
data: [{
|
|
x: 'Team A',
|
|
y: [2, 6]
|
|
}, {
|
|
x: 'Team B',
|
|
y: [1, 3]
|
|
}, {
|
|
x: 'Team C',
|
|
y: [7, 8]
|
|
}, {
|
|
x: 'Team D',
|
|
y: [5, 9]
|
|
}]
|
|
}],
|
|
chart: {
|
|
type: 'rangeBar',
|
|
height: 335,
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
colors: chartRangeColors
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_range"), options);
|
|
chart.render();
|
|
}
|
|
|
|
|
|
// Dynamic Loaded Chart
|
|
|
|
Apex = {
|
|
chart: {
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
shared: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
}
|
|
|
|
|
|
var colors = getChartColorsArray("chart-year");
|
|
|
|
/**
|
|
* Randomize array element order in-place.
|
|
* Using Durstenfeld shuffle algorithm.
|
|
*/
|
|
function shuffleArray(array) {
|
|
for (var i = array.length - 1; i > 0; i--) {
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|
var temp = array[i];
|
|
array[i] = array[j];
|
|
array[j] = temp;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
var arrayData = [{
|
|
y: 400,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 120
|
|
}, {
|
|
x: 'Q2',
|
|
y: 90
|
|
}, {
|
|
x: 'Q3',
|
|
y: 100
|
|
}, {
|
|
x: 'Q4',
|
|
y: 90
|
|
}]
|
|
}, {
|
|
y: 430,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 120
|
|
}, {
|
|
x: 'Q2',
|
|
y: 110
|
|
}, {
|
|
x: 'Q3',
|
|
y: 90
|
|
}, {
|
|
x: 'Q4',
|
|
y: 110
|
|
}]
|
|
}, {
|
|
y: 448,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 70
|
|
}, {
|
|
x: 'Q2',
|
|
y: 100
|
|
}, {
|
|
x: 'Q3',
|
|
y: 140
|
|
}, {
|
|
x: 'Q4',
|
|
y: 138
|
|
}]
|
|
}, {
|
|
y: 470,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 150
|
|
}, {
|
|
x: 'Q2',
|
|
y: 60
|
|
}, {
|
|
x: 'Q3',
|
|
y: 190
|
|
}, {
|
|
x: 'Q4',
|
|
y: 70
|
|
}]
|
|
}, {
|
|
y: 540,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 120
|
|
}, {
|
|
x: 'Q2',
|
|
y: 120
|
|
}, {
|
|
x: 'Q3',
|
|
y: 130
|
|
}, {
|
|
x: 'Q4',
|
|
y: 170
|
|
}]
|
|
}, {
|
|
y: 580,
|
|
quarters: [{
|
|
x: 'Q1',
|
|
y: 170
|
|
}, {
|
|
x: 'Q2',
|
|
y: 130
|
|
}, {
|
|
x: 'Q3',
|
|
y: 120
|
|
}, {
|
|
x: 'Q4',
|
|
y: 160
|
|
}]
|
|
}];
|
|
|
|
function makeData() {
|
|
var dataSet = shuffleArray(arrayData)
|
|
|
|
var dataYearSeries = [{
|
|
x: "2011",
|
|
y: dataSet[0].y,
|
|
color: colors[0],
|
|
quarters: dataSet[0].quarters
|
|
}, {
|
|
x: "2012",
|
|
y: dataSet[1].y,
|
|
color: colors[1],
|
|
quarters: dataSet[1].quarters
|
|
}, {
|
|
x: "2013",
|
|
y: dataSet[2].y,
|
|
color: colors[2],
|
|
quarters: dataSet[2].quarters
|
|
}, {
|
|
x: "2014",
|
|
y: dataSet[3].y,
|
|
color: colors[3],
|
|
quarters: dataSet[3].quarters
|
|
}, {
|
|
x: "2015",
|
|
y: dataSet[4].y,
|
|
color: colors[4],
|
|
quarters: dataSet[4].quarters
|
|
}, {
|
|
x: "2016",
|
|
y: dataSet[5].y,
|
|
color: colors[5],
|
|
quarters: dataSet[5].quarters
|
|
}];
|
|
|
|
return dataYearSeries
|
|
}
|
|
|
|
function updateQuarterChart(sourceChart, destChartIDToUpdate) {
|
|
var series = [];
|
|
var seriesIndex = 0;
|
|
var colors = []
|
|
|
|
if (sourceChart.w.globals.selectedDataPoints[0]) {
|
|
var selectedPoints = sourceChart.w.globals.selectedDataPoints;
|
|
for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
|
|
var selectedIndex = selectedPoints[seriesIndex][i];
|
|
var yearSeries = sourceChart.w.config.series[seriesIndex];
|
|
series.push({
|
|
name: yearSeries.data[selectedIndex].x,
|
|
data: yearSeries.data[selectedIndex].quarters
|
|
})
|
|
colors.push(yearSeries.data[selectedIndex].color)
|
|
}
|
|
|
|
if (series.length === 0) series = [{
|
|
data: []
|
|
}]
|
|
|
|
return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
|
|
series: series,
|
|
colors: colors,
|
|
fill: {
|
|
colors: colors
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
var options = {
|
|
series: [{
|
|
data: makeData()
|
|
}],
|
|
chart: {
|
|
id: 'barYear',
|
|
height: 330,
|
|
width: '100%',
|
|
type: 'bar',
|
|
events: {
|
|
dataPointSelection: function(e, chart, opts) {
|
|
var quarterChartEl = document.querySelector("#chart-quarter");
|
|
var yearChartEl = document.querySelector("#chart-year");
|
|
|
|
if (opts.selectedDataPoints[0].length === 1) {
|
|
if (quarterChartEl.classList.contains("active")) {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
} else {
|
|
yearChartEl.classList.add("chart-quarter-activated")
|
|
quarterChartEl.classList.add("active");
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
}
|
|
} else {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
}
|
|
|
|
if (opts.selectedDataPoints[0].length === 0) {
|
|
yearChartEl.classList.remove("chart-quarter-activated")
|
|
quarterChartEl.classList.remove("active");
|
|
}
|
|
|
|
},
|
|
updated: function(chart) {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
distributed: true,
|
|
horizontal: true,
|
|
barHeight: '75%',
|
|
dataLabels: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
textAnchor: 'start',
|
|
style: {
|
|
colors: ['#fff']
|
|
},
|
|
formatter: function(val, opt) {
|
|
return opt.w.globals.labels[opt.dataPointIndex]
|
|
},
|
|
offsetX: 0,
|
|
dropShadow: {
|
|
enabled: false
|
|
}
|
|
},
|
|
|
|
colors: colors,
|
|
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'desaturate'
|
|
}
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: true,
|
|
filter: {
|
|
type: 'darken',
|
|
value: 1
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (val, opts) {
|
|
return opts.w.globals.labels[opts.dataPointIndex]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Yearly Results',
|
|
offsetX: 15,
|
|
style: {
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
subtitle: {
|
|
text: '(Click on bar to see details)',
|
|
offsetX: 15
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart-year"), options);
|
|
chart.render();
|
|
|
|
var optionsQuarter = {
|
|
series: [{
|
|
data: []
|
|
}],
|
|
chart: {
|
|
id: 'barQuarter',
|
|
height: 330,
|
|
width: '100%',
|
|
type: 'bar',
|
|
stacked: true
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%',
|
|
horizontal: false
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
yaxis: {
|
|
lines: {
|
|
show: false,
|
|
}
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Quarterly Results',
|
|
offsetX: 10,
|
|
style: {
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
formatter: function (val, opts) {
|
|
return opts.w.globals.seriesNames[opts.seriesIndex]
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (val, opts) {
|
|
return opts.w.globals.labels[opts.dataPointIndex]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var chartQuarter = new ApexCharts(document.querySelector("#chart-quarter"), optionsQuarter);
|
|
chartQuarter.render();
|
|
chart.addEventListener('dataPointSelection', function(e, chart, opts) {
|
|
var quarterChartEl = document.querySelector("#chart-quarter");
|
|
var yearChartEl = document.querySelector("#chart-year");
|
|
|
|
if (opts.selectedDataPoints[0].length === 1) {
|
|
if (quarterChartEl.classList.contains("active")) {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
} else {
|
|
yearChartEl.classList.add("chart-quarter-activated")
|
|
quarterChartEl.classList.add("active");
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
}
|
|
} else {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
}
|
|
|
|
if (opts.selectedDataPoints[0].length === 0) {
|
|
yearChartEl.classList.remove("chart-quarter-activated")
|
|
quarterChartEl.classList.remove("active");
|
|
}
|
|
|
|
})
|
|
|
|
chart.addEventListener('updated', function (chart) {
|
|
updateQuarterChart(chart, 'barQuarter')
|
|
})
|
|
|
|
|
|
// Distributed Columns Charts
|
|
var chartColumnDistributedColors = getChartColorsArray("column_distributed");
|
|
if (chartColumnDistributedColors) {
|
|
var options = {
|
|
series: [{
|
|
data: [21, 22, 10, 28, 16, 21, 13, 30]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
events: {
|
|
click: function (chart, w, e) {
|
|
// console.log(chart, w, e)
|
|
}
|
|
}
|
|
},
|
|
colors: chartColumnDistributedColors,
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '45%',
|
|
distributed: true,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
['John', 'Doe'],
|
|
['Joe', 'Smith'],
|
|
['Jake', 'Williams'],
|
|
'Amber', ['Peter', 'Brown'],
|
|
['Mary', 'Evans'],
|
|
['David', 'Wilson'],
|
|
['Lily', 'Roberts'],
|
|
],
|
|
labels: {
|
|
style: {
|
|
colors: [
|
|
'#038edc',
|
|
'#51d28c',
|
|
'#f7cc53',
|
|
'#f34e4e',
|
|
'#564ab1',
|
|
'#5fd0f3',
|
|
],
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#column_distributed"), options);
|
|
chart.render();
|
|
}
|
|
|
|
|
|
// column_group_labels
|
|
var chartColumnGroupLabelsColors = getChartColorsArray("column_group_labels");
|
|
if (chartColumnGroupLabelsColors) {
|
|
dayjs.extend(window.dayjs_plugin_quarterOfYear)
|
|
var optionsGroup = {
|
|
series: [{
|
|
name: "sales",
|
|
data: [{
|
|
x: '2020/01/01',
|
|
y: 400
|
|
}, {
|
|
x: '2020/04/01',
|
|
y: 430
|
|
}, {
|
|
x: '2020/07/01',
|
|
y: 448
|
|
}, {
|
|
x: '2020/10/01',
|
|
y: 470
|
|
}, {
|
|
x: '2021/01/01',
|
|
y: 540
|
|
}, {
|
|
x: '2021/04/01',
|
|
y: 580
|
|
}, {
|
|
x: '2021/07/01',
|
|
y: 690
|
|
}, {
|
|
x: '2021/10/01',
|
|
y: 690
|
|
}]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: false,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '45%',
|
|
},
|
|
},
|
|
colors: chartColumnGroupLabelsColors,
|
|
xaxis: {
|
|
type: 'category',
|
|
labels: {
|
|
formatter: function (val) {
|
|
return "Q" + dayjs(val).quarter()
|
|
}
|
|
},
|
|
group: {
|
|
style: {
|
|
fontSize: '10px',
|
|
fontWeight: 700
|
|
},
|
|
groups: [
|
|
{ title: '2020', cols: 4 },
|
|
{ title: '2021', cols: 4 }
|
|
]
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Grouped Labels on the X-axis',
|
|
style: {
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
var chartGroup = new ApexCharts(document.querySelector("#column_group_labels"), optionsGroup);
|
|
chartGroup.render();
|
|
} |