0👍
sorry that’s the complete javascript function :
var data = **Data** ;
function onlyUnique(value, index, self) {
console.log(value, index, self);
return self.indexOf(value) === index;
}
var year;
var dates = data.map(function (e) {
var date = new Date(e.data.date);
year = date.getFullYear();
var month = date.toLocaleString('default', {
month: 'long'
})
return moment(date).format("MMM");
});
var allProducts = data.map(function (e) {
return e.data.categorie
});
var products = allProducts.filter(onlyUnique);
var array = [];
products.forEach(function (e, i) {
var prod = e;
var list = data.filter(function (e) {
return e.data.categorie === prod
})
console.log(list);
var s = list.map(function (e) {
return e.data.price
});
var obj = {
name: e,
data: s
};
array[i] = obj
return array
})
console.log(array);
var categories = dates.filter(onlyUnique);
var series = array;
var options = {
series: series,
chart: {
type: "bar",
height: 500,
stacked: true,
events: {
click: function (event, chartContext, config) {
window.FileMaker.PerformScript("Event","Hi");
console.dir(chartContext);
console.dir(config)
}
}
},
dataLabels: {
enabled: true,
style: {
colors: ['#333'],
fontSize: '10px'
},
},
plotOptions: {
bar: {
horizontal: false,
startingShape: 'flat',
endingShape: 'flat',
columnWidth: '90%',
dataLabels: {
position: 'bottom',
orientation: 'horizontal',
maxItems: 20
}
},
},
stroke: {
width: 0
},
title: {
text: "Product Sales for " + year,
},
xaxis: {
categories: categories,
labels: {
style: {
fontSize: '16px'
}
}
},
yaxis: {
title: {
text: undefined,
labels: {
formatter: function (val) {
return val;
},
},
},
},
tooltip: {
y: {
formatter: function (val) {
return val;
},
},
},
fill: {
opacity: 1,
},
legend: {
position: "top",
horizontalAlign: "left",
offsetX: 40,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Source:stackexchange.com