Need help on sample .py and .js file for getting database data displayed on new page using frappe chart

Frappe Framework Customization
1

I am trying to display sales trend using frappe chart on a new page. I have followed some discussion already posted on frappe chart and able to display a graph on a new page based on static data.

Can someone please share sample code how can I connect to database and fetch details in my new page. My current .js file for frappe chart is as follows…

frappe.pages[‘dashboard1’].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: ‘DashBoard’,
single_column: true
});

    frappe.breadcrumbs.add("Accounts")
    page.add_menu_item('Sales Invoice' , ()=> frappe.set_route('List', 'Sales Invoice'))
    page.add_menu_item('Purchase Invoice', ()=> frappe.set_route('List', 'Purchase Invoice'))
    
    const container = '.layout-main-section';
    jqcontainer = $(container);
    const dedicated_div = '.dedicated-chart-div';
    let chart_div = $("<div class=\"dedicated-chart-div\"></div>");
    chart_div.appendTo(jqcontainer);
    
    const options = {
   parent: $(page.dedicated_div),
   data: {
      labels: ["Jan", "Feb","Mar", "Apr",
	       "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [
	{
	    name: "Some Data", type: "bar",
	    values: [25, 40, 30, 35, 8, 52, 17, -4, 30, 35, 8, 52]
	},
	]
	},
	title: "My Awesome Chart on a page in ERPNext",
	type: 'bar',//'axis-mixed',
	height: 250,
	colors: ['#7cd6fd']
		}
const chart = new frappeChart.Chart(dedicated_div, options)
setTimeout(function () {chart.draw(!0)}, 1);

}

2

Have you tried frappe.call and callback? It can be used to call python method and pass arguments and get returned variables to be used in the .js script.

Regards
Bilal

3

Thanks…can you please share some sample .py file and how its invoked in .js file. I am not expert in coding…any sample code would be very much helpful for me.

4

I will share example, but generally speaking: you can do search from your linux consol on the frappe.call from erpnext directory as following

/home/frappe/frappe-bench/apps/erpnext/erpnext$ sudo grep -r -H “frappe.call” ./

And you will see how many results you will get as example on frappe.call

Anyway, below is example of using frappe.call:

From sales_invoice.js (erpnext/account/doctype/sales_invoice/sales_invoice.js):

    asset: function(frm, cdt, cdn) {
            var row = locals[cdt][cdn];
            if(row.asset) {
                    frappe.call({
                            method: erpnext.assets.doctype.asset.depreciation.get_disposal_account_and_cost_center,
                            args: {
                                    "company": frm.doc.company
                            },
                            callback: function(r, rt) {
                                    frappe.model.set_value(cdt, cdn, "income_account", r.message[0]);
                                    frappe.model.set_value(cdt, cdn, "cost_center", r.message[1]);
                            }
                    })
            }
    },

Regards
Bilal