More chart types like pie chart in dashboard

1

How can we add more chart types in the dashboard as only line and bar chart exists?

2

@Khadija, I have used Chart.js in my custom doctype. To make it work you need to add js and css file of Chart.js. I have added css file into this apps/erpnext/erpnext/public/css and js file into apps/erpnext/erpnext/public/js this directory. Then add those file into public/build.json. CSS file into css/erpnext.css this section and JS file into js/erpnext.min.js section named “public/css/Chart.min.css” and “public/js/Chart.min.js” respectively.

Create a custom html field in your doctype and use it. Full docs can be found here DOCS.

This is my working doughnut and line charts :slight_smile:

charts
charts740Ă—762 29.9 KB

You can use any kinds of charts(line, doughnut, pie, bar etc.) as you want. Hope this will help you. You’re welcome for any kind of further queries. :slightly_smiling_face:

3

@Khadija you can refer the document below.

https://frappe.io/charts

You can use charts with type bar, line, pie etc.

},

	title: "My Awesome Chart",
	type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
	height: 300,
	colors: ['purple', '#ffa3ef', 'light-blue'],

	tooltipOptions: {
		formatTooltipX: d => (d + '').toUpperCase(),
		formatTooltipY: d => d + ' pts',
	}
  });
4

where to get the files?

5

@Khadija, you can get these files from here

6

Dear @pabon_cse_12,

I followed all your steps, but at the time of opening the page in the console appears the error of Chart is not defined

Can you help me please

7

Same happened with me, I needed them on my desk page (not the website page) so I declared its cdn in frappe/www/desk.html file and its working
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet">
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

1 Like
8

Sorry for being late, I wasn’t available. This error is for frappe didn’t find Chart.js file. To find that simply do this:

frappe.require(["/assets/erpnext/css/Chart.min.css",
		"/assets/erpnext/js/Chart.min.js"], function(){

	// write your code here.
});

Let me know if this works. Thank you. :slight_smile:

2 Likes
9

can you give me some more information about this?