BAR Chart in Custom Html Block

ERPNext
, , , ,
1

Hi,
i want to create bar chart by custom html block.So i use html, javascript code. In project doctye , i have one percent field called custom_progress_completed. In Y axis, it should show 0 to 100% and X axis , it should show the list of project one by one. under the bar, it should show the project one by one horizontally and the bar should be change based on that “custom_progress_completed”.

its not appearing , anyone suggest me a solution.

<div id="bar-chart-container">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="bar-chart" width="400" height="200"></canvas>
</div>

// Fetch projects and their custom_progress_completed values
frappe.call({
    method: "frappe.client.get_list",
    args: {
        doctype: "Project",
        fields: ["name", "custom_progress_completed"],
        limit_page_length: 100  // Adjust as needed
    },
    callback: function(response) {
        if (response.message) {
            const projects = response.message;
            const labels = projects.map(project => project.name);
            const data = projects.map(project => project.custom_progress_completed || 0);

            // Create the bar chart
            const ctx = root_element.querySelector('#bar-chart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Progress Completed (%)',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.6)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            ticks: {
                                stepSize: 10
                            }
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        } else {
            console.error("No projects found or error fetching data.");
        }
    }
});
2

@Syed_Ahamed Please write this code in your custom html block

HTML Code :

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="bar-chart-container">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="bar-chart" width="400" height="200"></canvas>
</div>

</body>
</html>

Javascript Code :

const loadChartScript = () => {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/chart.js";
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
};

loadChartScript().then(() => {

// Fetch projects and their custom_progress_completed values
frappe.call({
    method: "frappe.client.get_list",
    args: {
        doctype: "Project",
        fields: ["name", "custom_progress_completed"],
        limit_page_length: 100  // Adjust as needed
    },
    callback: function(response) {
        console.log(response.message, "message");
        if (response.message) {
            const projects = response.message;
            const labels = projects.map(project => project.name);
            const data = projects.map(project => project.custom_progress_completed|| 0);

            // Create the bar chart
            const ctx = root_element.querySelector('#bar-chart');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Progress Completed (%)',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.6)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            ticks: {
                                stepSize: 10
                            }
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        } else {
            console.error("No projects found or error fetching data.");
        }
    }
});

}).catch(error => {
    console.error("Chart.js failed to load", error);
});
2 Likes
3

Thank you