Chartjs-Mapping data from JSON not parsing well

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

Leave a comment