How to add Graph in Custom Doctype

Frappe Framework Customization
1

Hello,

I want to use frappe-chart in my custom doctype like this Graph using doctypes:

Installed frappe-chart using

npm install frappe-charts

where to include this in project ???

import Chart from “frappe-charts/dist/frappe-charts.min.esm”

Where to place this code?

// Javascript let data = { labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], 
datasets: [
  {
    title: "Some Data",
    values: [25, 40, 30, 35, 8, 52, 17, -4]
  },
  {
    title: "Another Set",
    values: [25, 50, -10, 15, 18, 32, 27, 14]
  },
  {
    title: "Yet Another",
    values: [15, 20, -3, -15, 58, 12, -17, 37]
  }
]

};

let chart = new Chart({
parent: “chart”, // or a DOM element
title: “My Awesome Chart”,
data: data,
type: ‘bar’, // or ‘line’, ‘scatter’, ‘pie’, ‘percentage’
height: 250,

colors: ['#7cd6fd', 'violet', 'blue'],
// hex-codes or these preset colors;
// defaults (in order):
// ['light-blue', 'blue', 'violet', 'red',
// 'orange', 'yellow', 'green', 'light-green',
// 'purple', 'magenta', 'grey', 'dark-grey']

format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'

});

Please someone define Use case of frappe-chart

2

Chart is already included in the bundle, you should be able to use it directly without importing.

3

Thanks @rmehta

I put javascipt code in doctype js file

Created New HTML Field name “chart”

And Console Error :

No parent element to render on was provided

4

@rmehta Simply I Need Charts Base on this child table then how to get child table data to JavaScript array?

cwe
cwe1213×332 12.2 KB

5

This may help:

You need to unpack this statement:

@rmehta Simply I Need Charts Base on this child table then how to get child table data to JavaScript array?

If you want the child table data to display a chart in the parent, you need to loop through the child table to collect your values and then use that to populate the chart.

3 Likes