I’m trying to add a Frappe Chart to a Web Form.
These are steps I’ve taken so far:
-
making a new doctype and adding required fields such as a child table for storing chart data.
-
adding an HTML field with the option
<div id="chart"></div>
as a place holder for the chart. -
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:
-
making a new Web Form and adding similar fields.
-
adding an HTML field with the option
<div id="chart"></div>
as a place holder for the chart. -
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