I want to add frappe-chart in page.
I had code for frappe-chart in Page tempreture_graph.js file but when load I got one UTF-8 error
please give me solution.
tempreture_graph.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Frappe from '/node_modules/frappe-charts/dist/frappe-charts.min.esm'
import {Chart} from “/node_modules/frappe-charts/dist/frappe-charts.min.esm”
frappe.pages['tempreture-graph'].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Graph',
single_column: true
});
console.log(page)
frappe.breadcrumbs.add("Selling")
page.add_menu_item('Sales Order', () => frappe.set_route('List', 'Sales Order'))
// Chart constructor works like this:
// const your-chart
// Parameters required are:
// #1 container element = This is any CSS selector or DOM Object
// #2 options object = At a minimum: Data, composed itself of an array of labels and array of datasets
const container = '.layout-main-section';
// .layout-main-section
const options = {
parent: $(page.container),
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]
}
]
},
title: "My Awesome Chart on a page in ERPNext",
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
}
// existing code
const chart = new frappeChart.Chart(dedicated_div, options)
// add
setTimeout(function () {chart.draw(!0)}, 1);
}
Thank You
Aum Trivedi