Graph is not displaying on doctype page

[sarmadmahmood969]

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.

[nikzz]

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

[bhavikpatel7023]

frappe.ui.Graph

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

Should try this.

[nikzz]

See this

Frappe-Charts application

frappe.ui.form.on(‘TestDoc’, { refresh: function(frm) { $.getScript(“https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js”,function(){ let chart = new frappe.Chart( “#chart”, { data: { labels: [“12am-3am”, “3am-6am”, “6am-9am”, “9am-12pm”, “12pm-3pm”, “3pm-6pm”, “6pm-9pm”, “9pm-12am”], datasets: [ { name: "Some Data", chartType: 'bar', values: [25, 40, 30, 35, 8, 52, 17, -4] }, { name: "Another Set", chartType: 'bar', values…

[sarmadmahmood969]

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

[sarmadmahmood969]

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.

[tmatteson]

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)

[sarmadmahmood969]

Hi @tmatteson

If this is a frappe app, charts is built in so don’t get it from a CDN - it’s already there.

I installed custom app and make it default.

It can take longer to load than the doctype so you need to run it serially. (this example is datatable, but same idea)

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.

[rahy]

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