Charts example code does not work when added to a frappe page

[ollyboy]

[email protected]

It would be great to see a solid example of charts in frappe page which to me would be a highly relevant use case. I see three issues, 2 major

• Chart does not render on page until I move the mouse
• There are data out of range issues even with the main example code

[ollyboy]

Code:

frappe.pages['project-charts'].on_page_load = function(wrapper) {


        frappe.require([
          "assets/clearsight/js/frappe-charts.min.esm.js",
          "assets/clearsight/css/frappe-charts.min.css"
        ]);

        var page = frappe.ui.make_app_page({
                parent: wrapper,
                title: 'Project Charts',
                single_column: true
        });


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

  let chart = new frappe.Chart( "#my_chart", { // or DOM element
        data: {
        labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
                "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

        datasets: [
                {
                        name: "Some Data", chartType: 'bar',
                        values: [25, 40, 30, 35, 8, 52, 17, 4]
                },
                {
                        name: "Another Set", chartType: 'bar',
                        values: [25, 50, 10, 15, 18, 32, 27, 14]
                },
                {
                        name: "Yet Another", chartType: 'line',
                        values: [15, 20, 3, 15, 58, 12, 17, 37]
                }
        ],

        yMarkers: [{ label: "Marker", value: 70,
                options: { labelPos: 'left' }}],
        yRegions: [{ label: "Region", start: -10, end: 50,
                options: { labelPos: 'right' }}]
        },

        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',
        }
   });

  // chart.export();

  //setTimeout(function () { my_chart.refresh()}, 1);
}

[ollyboy]

The third issue is that you cannot have a statement like this in the frappe .js page file import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";

We have to add the js and ccs to frappe public folder ( or maybe assets or maybe hooks.py ) again confusing info on where is best

[ollyboy]

https://github.com/frappe/charts/issues/191 is still an issue, forced refresh workaround is not right

This workaround does not work in the page js:

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

[ollyboy]

OK fixed the unexpected "token" error. Seems you can't have any reference to javascript files in the .js file.

This does NOT work:

        frappe.require([
          "assets/clearsight/js/frappe-charts.min.esm.js",
          "assets/clearsight/css/frappe-charts.min.css"
        ]);

The only way to stop "unexpected token export" is to add the js via hooks.py

This does work:

# include js in page
# page_js = {"page" : "public/js/file.js"}
page_js = {"page" : "public/js/frappe-charts.min.iife.js"}
page_css = {"page" : "public/css/frappe-charts.min.css"}

But there are lots of java script errors regarding attribute width ( see above ) and the chart still does not display until I re-size the window. It's really not sensible to have a frappe/charts project when it has obviously not been tested in frappe pages

[ollyboy]

this is a hack but will display a chart via the page .js. The non-display of appended divs used for charting seems to be a common problem across javascript libraries

setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 100);

[scmmishra]

Hey @ollyboy

The only way to stop "unexpected token export" is to add the js via hooks.py

You seem to be using charts inside a frappe app. In case you're using any latest version on Frappe Framework, you don't need to explicitly import charts using frappe.require it is available by default in the frappe.Charts namespace.

[ollyboy]

thanks, will look into. There seems to be no good example resources on using charts with frappe app, am I missing something

[scmmishra]

There seems to be no good example resources on using charts with frappe app

In Frappe framework there is frappe/public/ui/chart.js, which adds Chart constructor to the frappe namespace. So new frappe.Chart will work across the application.

A good example will be make_chart in report_view.js

make_chart() {
	const args = this.chart_args;
	let data = {
		labels: args.labels,
		datasets: args.datasets
	};

	this.last_chart_type = args.chart_type;

	const get_df = (field) => this.columns_map[field].docfield;
	const get_doc = (value, field) => this.data.find(d => d[field] === value);

	this.$charts_wrapper.removeClass('hidden');

	this.chart = new frappe.Chart(this.$charts_wrapper.find('.charts-inner-wrapper')[0], {
		title: __("{0} Chart", [this.doctype]),
		data: data,
		type: args.chart_type,
		truncateLegends: 1,
		colors: ['#70E078', 'light-blue', 'orange', 'red'],
		axisOptions: {
			shortenYAxisNumbers: 1
		},
		tooltipOptions: {
			formatTooltipY: value => frappe.format(value, get_df(this.chart_args.y_axes[0]), { always_show_decimals: true, inline: true }, get_doc(value.doc))
		}
	});
}

[ollyboy]

bit confused, in another thread, I am told we need to install charts via npm, but here we are saying no need as native to frappe namespace?

[scmmishra]

but here we are saying no need as native to frappe namespace?

What I meant by this is that frappe charts comes bundled with the Frappe Framework already.