Frappe-Charts application

Frappe Framework Customization
1

Dear Experts,
I’m tryng to use frappe-charts on a custom app, the idea is to graph data from doctype table and print data and chart as pdf, but I’m facing newbie problems to make frappe-charts work. This is so far what I did:

1.- I download erpnext VM, set developer mode= 1, an install charts doing: npm install frappe-charts

2.- Create a Doctype on the app called TestDoc
3.- On the Doctype I entere a HTM field called “chart” and declare in the content of the field id=“chart”
4.- In the TestDoc.js I add the code:

frappe.ui.form.on(‘TestDoc’, {
refresh: function(frm) {

const data = {
labels: [“12am-3am”, “3am-6pm”, “6am-9am”, “9am-12am”,
“12pm-3pm”, “3pm-6pm”, “6pm-9pm”, “9am-12am”
],
datasets: [
{
name: “Some Data”, type: “bar”,
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: “Another Set”, type: “line”,
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
}

const chart = new Chart( {
parent:frm.fields_dict[“chart”].wrapper,
title: “My Awesome Chart”,
data: data,
type: ‘axis-mixed’, // or ‘bar’, ‘line’, ‘scatter’, ‘pie’, ‘percentage’
height: 250,
colors: [‘#7cd6fd’, ‘#743ee2’]
})

}

});

I get this error window:
yntaxError: Unexpected identifier
at Class.setup (http://localhost:8080/assets/js/form.min.js?ver=1530839094.0:2691:18)
at _f.Frm.setup (http://localhost:8080/assets/js/form.min.js?ver=1530839094.0:172:22)
at _f.Frm.refresh (http://localhost:8080/assets/js/form.min.js?ver=1530839094.0:446:9)
at Class.load (http://localhost:8080/assets/js/form.min.js?ver=1530839094.0:87:33)
at http://localhost:8080/assets/js/form.min.js?ver=1530839094.0:82:7
at Object.callback (http://localhost:8080/assets/js/desk.min.js?ver=1530839094.0:5516:6)
at Object.callback [as success_callback] (http://localhost:8080/assets/js/desk.min.js?ver=1530839094.0:1437:16)
at _ (http://localhost:8080/assets/js/desk.min.js?ver=1530839094.0:1461:34)
at Object. (http://localhost:8080/assets/js/desk.min.js?ver=1530839094.0:1562:5)
at i (http://localhost:8080/assets/frappe/js/lib/jquery/jquery.min.js:2:27151)

from the console:

VM79:27 Uncaught (in promise) ReferenceError: Chart is not defined
at refresh (eval at setup (form.min.js?ver=1530839094.0:2686), :27:15)
at runner (form.min.js?ver=1530839094.0:2625)
at form.min.js?ver=1530839094.0:2640

Obviously Chart object is not defined, so how can I included into the framework to use it??
I’m missing something else?

Before instead of Chart I use frappe.chart but the error where “frappe.chart is not a constructor”

Any expert help will be appreciated

1 Like
2

frappe.ui.form.on(‘TestDoc’, {
refresh: function(frm) {

$.getScript(“https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js”,function(){

let chart = new frappe.Chart( “#chart”, {
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: "Chart",
type: 'axis-mixed',
height: 300,
colors: ['purple', '#ffa3ef', 'light-blue'],

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

});

});
}
});

Hope this will help

3

Thank you !!! Works like charm!!