Frappe Chart in ERPNext v10 vs v11 (compatibility)

Frappe Framework
1

Dear colleagues,

another topic on Frappe Charts: I found that when using Frappe/ERPNext v10, the constructor for a new chart is

let chart = new frappeChart.Chart( ... );

However, this will return ReferenceError: frappeChart is not defined when executed in v11. In v11, the constructor

let chart = new Chart( ... );

will work nicely, however, running this on v10 will result in ReferenceError: Chart is not defined.

Is there a common constructur that can be used which will work in both v10 and v11? Like this, there need to be different branches of an app for each target version, which is not nice…

2 Likes
2

@lasalesi thanks for informing but I am trying to make chart using new Chart() in version 11

ERPNext: v11.1.18 (master)
Frappe Framework: v11.1.18 (master)

but getting below error

console.trace() TypeError: "options is undefined"
    Chart libs.min.js:5966
    on_page_load (index):24
    trigger_page_event pageview.js:94
    init pageview.js:84
    show pageview.js:49
    callback pageview.js:33
    success request.js:73
    200 request.js:98
    call request.js:217

Code is :

frappe.pages['dashboard'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Dashboard',
		single_column: true
	});

	wrapper = $(wrapper).find('.layout-main-section');
	wrapper.append(`
			<div id="chart"></div>
		`);


	const chart_data = {
		labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		datasets: [
			{
				values:['0','10','20','30','40','50','60','70','50','40','30','20']
			}
		]
	};

	const graph = new Chart({
		parent: "#chart",
		data: chart_data,
		type: 'line'
	});

	setTimeout(function () {graph.refresh()}, 1);
}
3

Hi @shahid,

thanks for your comment. I am not sure if this is directly related. Place the target element not as parent parameter, but first argument:

const graph = new Chart( "#chart", {
	data: chart_data,
	type: 'line'
});

and use draw instead of refresh (known workaround):

setTimeout(function () { graph.draw(!0); }, 1);
1 Like
4

@lasalesi Thanks, its working…

5

Hi,
Neither of the constructors work for me. Getting “ReferenceError: Chart is not defined”

Am on Erpnext 12.10 and frappe 12.8.

Any pointers?

Krithi

6 
const graph = new frappe.Chart( "#chart", {

works now!

7

Yes, this changes from version to version :wink: who knows what v13 will bring…