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

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

}

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

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.

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