ERPNext Foundation ERPNext Cloud Chat Blog Discuss Frappé* Donate

Graph is not displaying on doctype page

bug
custom_script

#1

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.


#2

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


#3

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

Should try this.


#4

See this


#5

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


#6

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.


#7

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)

#8

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.