Pie chart with Charts.js

Sample description

The sample illustrates how charts can be displayed using CXP. It is composed of two parts: one part chart-pie.cxp is dedicated to displaying a pie chart, while the other part chartsjs-data.cxp provides the data that populates the chart. The Chart component utilized is from the Charts.js library.

Run in new tab

Live editor

<html>
<head>
    <title>Pie chart with Charts.js | Xbase++ | Alaska Software</title>
    <link rel="stylesheet" href="/resources/css/custom-bootstrap.min.css">
    <script type="text/javascript" src="/resources/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<div class="container">
    <h4 class="my-4">Pie chart with Charts.js</h4>
    <div class="d-flex justify-content-center align-items-center">
        <div class="w-50">
            <canvas id="pie-chart"></canvas>
        </div>
    </div>
</div>

/**
     * Loads products for a given category from chartsjs-data.cxp and
     * executes a success callback function with the loaded products as an argument.
     * @param {function} successCallback - The callback function to be called on success.
     * @param {number} [category=4] - The category ID of the products to be loaded.
     */
    const loadProducts = (successCallback, category = 4) => {
        $.ajax({
            url: "chartsjs-data.cxp?category=" + category,
            cache: false,
            success: function (products) {
                successCallback(products);
            }
        });
    }

/**
     * Creates a pie chart for displaying dairy products on-stock.
     * @param {Array} data - The data used to create the chart.
     */
    const creatChart = (data) => {
        const chart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: data.map(x => x.product),
                datasets: [{
                    data: data.map(item => item.stock),
                    backgroundColor: [
                        "#1a508e", "#f2711c", "#aad5ff", "#128023", "#9a1616"
                    ]
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Dairy products on-stock',
                        font: {
                            size: 18
                        }
                    }
                }
            }
        });
    }

loadProducts(creatChart);

</script>
</body>
</html>

                    Result
                    built with V2 2156
                