score: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();

Related Query