Frappe Charts in Page

Frappe Framework Customization
16

Hi @nikzz

Pls give me your version

bench version

17 
ERPNext: v11.0.3-beta.34 () (staging)

Frappe Framework: v11.0.3-beta.48 () (staging)

and bench version

4.1.0
18

Hi @nikzz

try it

frappe.pages['charts'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Testing Page',
		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("#chart", {
		data: chart_data,
		type: 'line',
		height: 250
	})

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

Not worked. Still same issue

20

It show error or some thing?

try to add alert.

alert(1);

21

yeah, alert is working and on page its blank. Just unable to handle success response in console of browser

22

pls give me your file.

23

File ?? Are you saying about code. If yes, its the exact same thing you suggested above.

24

I have no idea about your error.

25

Along with installing npm, do I need to import it form some other method ?

26

No need to import or do anything, Frappe import this lib already

27

The same code worked, reinstalled frappe charts again and restarted supervisorctl and it worked. Thank You

2 Likes
28

One more thing, I’m having problem with setting the export option in charts.

export(): void
graph.export();

that is what i got in documentation but didn’t get it. Any suggestion ?

29

on which file import this can you please tell me?

30

No need to import anything.

1 Like
31

ok then how to use pie chart in frappe .i am not able to see the pie chart only there
1.Line
2.Bar

above 2 charts are present in my current frappe ,i want to add two more pie and drill how to add these?can you please guide me…

32

type: 'pie', // or 'bar', 'line', 'pie', 'percentage'

above are the types of chart you can use.

33

I created an example app that includes frappe-charts on any of your public-facing web pages. Works on version-12. Hope it’s useful.

3 Likes
34

@rmeyer, does it work for this scenario also, where we want a public dashboard.

35

Yes, this would probably work for your use case as well. It will require some software development:

  • whitelisted python methods that respond with your public data for a dashboard
  • some JavaScript to define and display the chart (find a code sample for this in the app mentioned above)