How to create dashboard in ERPNext

sarmadmahmood969 · November 13, 2018, 7:54pm

I searched so much on internet and find of ways of creating dashboard in ERPNext. Actually I want to design a dashboard like this one

I followed so many wasy to accomplish this task but don’t succeed. For example I create page and then follow toturials like this one.
→ Faris Ansari - Frappe UI, Creating Dashboard and Reports - YouTube
→ Frappe Charts: Simple and Modern SVG Charts
→ Chart Gallery | Charts | Google Developers

But I am not succeeded till this time. It will be very appreciable for me if you help me in creating dashbard in erpnext.

littlehera · November 14, 2018, 9:19am

Have you looked into creating a Page and then putting your code there?

rk_root · November 14, 2018, 12:42pm

use metabase to create dashboard, Simple BI tool for data visualization.

sarmadmahmood969 · November 14, 2018, 1:02pm

By this this concept
Faris Ansari - Frappe UI, Creating Dashboard and Reports - YouTube

littlehera · November 16, 2018, 3:26am

Yes, you can create dashboards by creating a Page in frappe and then adding the UI elements like charts, etc to your page.

There are existing pages in ERPNext which you can check out if your interested. The source code for the pages are also available in the app folder.

sarmadmahmood969 · November 19, 2018, 1:13pm

Yes @littlehera I followed this way as I shared a YouTube link in my question. If you have other useful links kindly share with me.
Actually I am facing the issue that when I write a code for chart, it is not displaying on page. I tried so many ways and many links on internet but failed to draw the chart. Please help me here. It will be very appreciable for me.

littlehera · November 20, 2018, 2:46am

You can check the Selling Module in ERPNext.

Go to apps/erpnext/erpnext/selling/page. You should be able to see sales_funnel and sales_analytics which are 2 pages involving graphs.

iRaySpace · November 20, 2018, 3:19am

Hello @sarmadmahmood969

What charts are you using for the page?

vinhnguyent090 · November 20, 2018, 3:22am

Hello @sarmadmahmood969

I like your dashboard page and I want it, Could we work together?

sarmadmahmood969 · November 20, 2018, 5:00am

Hi @littlehera

I checked both these folders are there. sales_funnel folder having sales_funnel.css, sales_funnel.js, sales_funnel.json, sales_funnel.py and init.py files.

while sales_analytical having sales_analytical.js, sales_analytical.json and init.py files

any suggestion please…

sarmadmahmood969 · November 20, 2018, 5:32am

Hi @iRaySpace

I tried frappe.Chart and frappe.ui.grraph to create a charts.

1 way is this, I followed this link 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]
			}]
}
}

The other one is that I tried:

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

Any help please.

sarmadmahmood969 · November 20, 2018, 5:42am

Hi @vinhnguyent090

yes we can work together. You are welcome.

littlehera · November 20, 2018, 7:34am

I think you need to add the graph to an HTML element or <div> block in your page.

As for the files, you can try checking the .js files for the javascript code.

dkeith · November 20, 2018, 8:03am

Hi. Like @rk_root said, and also based on my experience, the EASIEST way is to use a BI tool (think Metabase if you’re going opensource). Create your dashboards there, publish them and embed them in a page (not Web Page) you’ve created in ERPNext. And voila! you get what you want.

vinhnguyent090 · November 20, 2018, 11:11am

Thank @sarmadmahmood969 I sent email my contact. pls check thanks,

sarmadmahmood969 · November 20, 2018, 5:04pm

I sent an email to you

iRaySpace · November 21, 2018, 4:01am

Hello @sarmadmahmood969

I believe you have to create a div with an id of “chart” as what @littlehera said.

// Create a div with an id of chart and attach it to the page
this.$chart = $('<div id="chart">').hide().appendTo(this.page.main);

// Create the charts
this.chart = new Chart(this.$chart[0], options);

// Show the charts since it is added as hidden
this.$chart.show();

Let us know what you have accomplished so far.

sarmadmahmood969 · November 21, 2018, 4:13am

can you tell me please on which page these lines have to be added

Sahil · November 21, 2018, 4:34am

hi, by using frappe charts you can make beautiful chart for your page and by adding some custom css
it works great. see my pages…

sarmadmahmood969 · November 21, 2018, 4:35am

Hi @Sahil

Can you please share how you create all this…