How to create Chart(chart type: custom)?

1

Hello, I am making a Chart with custom type and it requires you to have a Chart Source so I build one and created a js file. For testing purposes, I created a frappe chart JS script. However, I don’t have an html container for the chart to render. I can’t also find a way in the documentation on how to do it.

My question is, how can you add an html file or html container in the Chart Source?

Tried also the ff:

  1. Used render_template() but Template not found, with this test I created an html inside Chart Source folder. This one’s working on Doctypes I don’t know if it’s just restricted with Chart->Chart Source
  2. DOM(just for testing): I directly inserted an element in frappe template property and used render().

PS: This is purely Frappe and will be Integrated in a Dashboard. Trying Custom Chart because the Chart I’m building is complex so
basic built-in aggregation and Chart->Report source will not suffice. Thank you.

2

Hello erpnext community,

I found a solution but different way, which is also posted here.
[Tutorial] Script Report / Chart

Once you create a report, you can build a chart using purely server side and automatically rendered in the report page including the report table. By adding the chart to a dashboard, it automatically captures what is displayed in the report page for rendering in dashboard page.

I avoid using Page because I already have existing cards so that I don’t have to redo it.

3

Hello!

I was able to find a solution with this one, I explored the ERPnext source code which is more likely the same syntax like the Script Report and Page Creation.

Creation Steps:

  1. Head over to Dashboard Chart Source → add Dashboard Chart Source
  2. Fill up the name and module
    Note: this will create a folder in your module and manually add JS and Py file named like your folder because it doesn’t populate not like doctype.

3.Head to Dashboard Chart → add Dashboard Chart
4.Fill up the following → chart type:custom → chart source: the one u created(dashboard chart source)

Now for the coding, just add your code in the dashboard chart source JS and Py files.
Source Code

Client:

frappe.dashboards.chart_sources["Warehouse wise Stock Value"] = {
	method: "erpnext.stock.dashboard_chart_source.warehouse_wise_stock_value.warehouse_wise_stock_value.get",
	filters: [
		{
			fieldname: "company",
			label: __("Company"),
			fieldtype: "Link",
			options: "Company",
			default: frappe.defaults.get_user_default("Company")
		}
	]
};

Server:

def get(
chart_name=None,
	chart=None,
	no_cache=None,
	filters=None,
	from_date=None,
	to_date=None,
	timespan=None,
	time_interval=None,
	heatmap_year=None,
        ):

	return {
		"labels": labels,
		"datasets": [{"name": _("Stock Value"), "values": datapoints}],
		"type": "bar",
	}

Fore more details, please look at the link as I removed the functionality in the server side, only the return is remained.
I hope this helps, especially with the new ones.

3 Likes