I have make custom app.
Within an app, I have created one page.
I would like to use frappe chart in the JS file of that page. But it’s not working for me.
Console shows “Chart is not defined”.
I have tried using “frappeChart.Chart” and “frappe.Chart” too.
I have followed the instruction from the following link:
The following is the code.
frappe.pages[‘weekly-distinct-stat’].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Weekly Distinct Status of Station Entry',
single_column: true
});
wrapper = $(wrapper).find(‘.layout-main-section’);
wrapper.append(<div class="grid-report"> <div class="chart"></div> </div>
);
const data = {
labels: [“12am-3am”, “3am-6pm”, “6am-9am”, “9am-12am”,
“12pm-3pm”, “3pm-6pm”, “6pm-9pm”, “9am-12am”],
datasets: [
{
name: “OK”, type: “bar”,
values: [25, 40, 30, 35, 8, 52, 17, 55]
},
{
name: “NG”, type: “bar”,
values: [25, 50, 10, 15, 18, 32, 27, 14]
},
{
name: “ERROR”, type: “bar”,
values: [20, 55, 15, 25, 20, 22, 45, 35]
}
]
}
const graph = new Chart({
title: “WEEKLY STATION ENTRY STATUS”,
parent: “.chart”,
data: data, // or ‘bar’, ‘line’, ‘scatter’, ‘pie’, ‘percentage’, ‘axis-mixed’
type: ‘bar’,
height: 250,
colors: [’#2ded5a’, ‘#4b96f2’, ‘#eb3d3d’]
});
setTimeout(function () {graph.refresh()}, 1);
}