Graph is not displaying on doctype page

After creating custom app, I created a New Page. Then I go to its js file and add this code.

    frappe.pages['dash1'].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
	parent: wrapper,
	title: 'Dashboard',
	single_column: true
});

console.log(page)

page.add_menu_item('Projects', () => frappe.set_route('List', 'Project'))

const graph = new frappe.ui.Graph({
	height: 140,
	parent: page.main,
	mode: 'line',
	x: {
		values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
						'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	},
	y: [{
		values: [23, 34, 23, 56, 83, 2, 92, 1, 90, 34, 67, 78]
	}]
});

}

Page title and menu showing on the page but no graph displaying there. Can anyone tell me the reason or highlight my mistake.

Check in console (via debugger) whether frappe.ui.Graph exists or not

there is new frappe.Chart instead of frappe.ui.Graph
https://frappe.io/charts/docs/basic/basic_chart

Should try this.

See this

not exist
what will be the issue and how to tackle it.

Hi @bhavikpatel7023

As per your instructions I use this link. You can see this is a code that I used here.

frappe.pages['dash1'].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
	parent: wrapper,
	title: 'Dashboard',
	single_column: true
});

page.add_menu_item('Projects', () => frappe.set_route('List', 'Project'))

new frappe.Chart("#chart", {
    data: data,
    type: 'bar',
    height: 140,
    colors: ['red']
});

data = {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
					values: [18, 40, 30, 35, 8, 52, 17, -4]
				}]
}

}

Output you can see by yourself.

No graph is showing here. Actually this is the issue. Can you please help me at this point. I will be very thankful to you.

There are two things I think you’re having a problem with.

  1. If this is a frappe app, charts is built in so don’t get it from a CDN - it’s already there.
  2. It can take longer to load than the doctype so you need to run it serially. (this example is datatable, but same idea)

Hi @tmatteson

I installed custom app and make it default.

It about 1 hour going and I refreshed it many time but nothing is there till now. This is showing in console.

Any suggestion please.

Try look at the DOM you use.
If it is a new empty page, it might have style=“display:none”.
This is my case, I don’t know why