Frappe Chart Integration Problem

Frappe Framework
1

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

}

2

Hello Experts,

Someone can solve this please !
Still facing the same issue…

3 
	const graph = new Chart( "#chart", {
	data: chart_data,
	type: 'pie'
	});

	setTimeout(function () { graph.draw(!0); }, 1);
4

Hello @shahid , Appreciate your help.

But I have already tried this. It’s not working.

The problem is not about graph.refresh() function.
Execution of the code stop from “new Chart()” saying Chart is undefined.

5

Version?

6

ERPNext: v9.0.7 (master)

Frappe Framework: v9.0.8 (master)

I have also checked “/home/frappe/frappe-bench/apps/frappe/frappe/public/js/frappe/ui/charts.js” file is exist.

7

Its version issue, check this, will be helpful.

1 Like
8

For your version (v9, and v10), use this constructor:

const graph = new frappeChart.Chart( "#chart",

note that this will make your app incompatible to v11 (and later). You could catch this with something like

try {
    const graph = new frappeChart.Chart( "#chart", 
        ...
    );
} catch {
    const graph = new Chart( "#chart", {
        ...
    );
}

It is not nice (duplictae code), but will compensate the incompatible versions. Hope this helps.

1 Like
9

Hello @lasalesi ,

It shows “frappeChart is not defined”.

10

Hello @shahid ,

Graph is working like a charm !
But Chart isn’t working.

Thanks for the alternative… :slightly_smiling_face:

1 Like
11

Hello @shahid ,

Can we change the color of the bar in graph as we can do in chart ?

12

Yes…

13

Hello @shahid
Can you please mention how it can be done ?
What will be the name of parameter?

I have tried by adding:
colors: [’#2ded5a’, ‘#4b96f2’, ‘#eb3d3d’]

14

Check the code of Production Analytics Report on your version & use syntax accordingly.

15

Thanks for the help @shahid . :slightly_smiling_face: