Adding Chart to Web Form

Frappe Framework Customization
1

I’m trying to add a Frappe Chart to a Web Form.

These are steps I’ve taken so far:

  1. making a new doctype and adding required fields such as a child table for storing chart data.

  2. adding an HTML field with the option <div id="chart"></div> as a place holder for the chart.

  3. adding a custom script for the doctype to plot data:

     frappe.ui.form.on('TestDocType', {
    refresh(frm) {
     
 	var my_data = [];
     var my_time = [];
     for (var i =0; i < cur_frm.doc.temp_data.length; i++){
         my_data[i] = cur_frm.doc.temp_data[i].data;
         my_time[i] = cur_frm.doc.temp_data[i].time;
     }   
     var chart_data = {
 		labels: my_time,
 		datasets: [
 			{
 				values: my_data
 			}
 		]
 	};
 
 	const graph = new frappe.Chart( "#chart", {
 		data: chart_data,
 		type: 'line'
 	});

 }
 })

This works quite fine and can read data from a child table and plot them using frappe.Chart.

Now I want to make a Web Form for this. These are steps I’ve done so far:

  1. making a new Web Form and adding similar fields.

  2. adding an HTML field with the option <div id="chart"></div> as a place holder for the chart.

  3. adding a custom script for the doctype to load the Chart (for now with static data):

     frappe.web_form.on('i', (field, value) => {   
     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 frappe.Chart( "#chart", {
 		data: chart_data,
 		type: 'line'
 	 });
     setTimeout(function () { graph.draw(!0); }, 1);
 
 });

But unfortunately this does not work. I get error:
Uncaught (in promise) TypeError: frappe.Chart is not a constructor

Then I tried to import Chart using this:
import { Chart } from 'frappe-charts';
and again I got another error:
Uncaught SyntaxError: Cannot use import statement outside a module

I have no idea why this one does not work for a Web Form but works fine for the documents.

Your help is appreciated.

Massoud

2

This is a related topic: