RE: How to show graph on suitelet?
I have created suitelet script to create custom page. which is shown on portlet on dashboard. I have created html table to show data. Now I want to show that data as a graph. Please help!
Below is my suitelet script:
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
*/
define([‘N/search’,’N/log’,’N/record’,’N/runtime’,”N/ui/serverWidget”],
function(search, log, record, runtime, serverWidget) {
function onRequest(context) {
if (context.request.method === ‘GET’) {
try{
var sub = context.request.parameters.custpage_susbsidry;
log.debug(“sub”,sub);
var displayCurrency;
if(sub)
{
var fieldLookUp = search.lookupFields({
type: search.Type.SUBSIDIARY,
id: sub,
columns: [‘currency’]
});
var currency=fieldLookUp.currency;
log.debug(“currency”,currency);
var fcurrency=currency[0].text
log.debug(“fcurrency”,fcurrency);
if(fcurrency==’GBP’)
{
displayCurrency=’£’;
}
else if(fcurrency==’USD’)
{
displayCurrency=’$’
}
}
else{
displayCurrency=’$’;
}
log.debug(“displayCurrency”,displayCurrency);
var period = context.request.parameters.custpage_period;
if(period)
{
var month = parseInt(period);
log.debug(“month”,month);
}
var year = context.request.parameters.custpage_year;
log.debug(“year”,year);
if(month && year)
{
// var currentYear=new Date().getFullYear();
// log.debug(“currentYear”,currentYear) ;
var d = new Date(year, month, 0);
var lastDay=d.getDate();
log.debug(“lastDay”,lastDay);
//[“formuladate”,”within”,”2/1/2023″,”2/28/2023″]
var startDate=month+”/”+”1″+”/”+year;
log.debug(“startDate”,startDate);
var endDate=month+”/”+lastDay+”/”+year;
log.debug(“endDate”,endDate);
var today = new Date();
log.debug(“today”,today);
var endDateObj = new Date(endDate);
log.debug(“endDateObj”,endDateObj);
if (endDateObj > today) {
endDate = today.getMonth() + 1 + “/” + today.getDate() + “/” + today.getFullYear();
log.debug(“Adjusted endDate to today”, endDate);
}
}
// Create a form
var form = serverWidget.createForm({
title: ‘KPI Analysis’,
hideNavBar:true
});
form.addField({
id: ‘custpage_subsidiary’,
label: ‘Subsidiary’,
type: serverWidget.FieldType.SELECT,
source: ‘subsidiary’
}).defaultValue = _logValidation(sub) ? sub : ”;
form.clientScriptModulePath = ‘/SuiteScripts/cs_call_suitelet.js’
var kpiArray=[];
// Load the saved search
var accountSearchObj = search.load({
id: ‘customsearch882’
});
if(_logValidation(sub)){
accountSearchObj.filters.push(
search.createFilter({
name: ‘subsidiary’,
operator: search.Operator.IS,
values: sub
})
)
}
if(_logValidation(startDate&&endDate)){
accountSearchObj.filters.push(
search.createFilter({
name: ‘formuladate’,
operator: search.Operator.WITHIN,
values:[startDate, endDate]
})
)
}
var searchResults = accountSearchObj.run().getRange({
start: 0,
end: 1000, // Adjust the range as needed
});
log.debug(“searchResults”,searchResults);
for(var i=0;i<searchResults.length;i++)
{
//fetched sales order link from work order record
var kpiGroup = searchResults[i].getText({
name: “custrecord1”,
summary: “GROUP”,
sort: search.Sort.ASC,
label: “KPI Account Group”
});
//log.debug(“kpiGroup”,kpiGroup);
var balance=searchResults[i].getValue({
name: “custrecord1”,
name: “balance”,
summary: “SUM”,
label: “Balance”
});
//log.debug(“balance”,balance);
kpiArray.push({‘type’:kpiGroup,’amount’:balance})
}
log.debug(“kpiArray”,kpiArray);
var grossBurn=expensesAmount + otherExpensesAmount + interestExpenseAmount + adjustmentsAmount + (fixedAssetAmount – depreciationAmount);
//log.debug(“grossBurn”,grossBurn);
var netBurn=grossBurn-revenueAmount-interestEarnedAmount-otherIncomeAmount;
//log.debug(“netBurn”,netBurn);
var ebidta=revenueAmount+otherIncomeAmount+expensesAmount;
//log.debug(“ebidta”,ebidta);
// Create an HTML table
var htmlTable = ‘<table align=”left” style=”width: 300px; border-top: 0px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; border-left: 0px solid #CCCCCC; border-right: 0px solid #CCCCCC; border-collapse: collapse; font-family: Arial, sans-serif; margin-top:100px;”>’;
htmlTable += ‘<tr><th align=”left” style=”font-size: 14px;”>KPI Type</th><th align=”left” style=”font-size: 14px;”>Amount</th></tr>’;
htmlTable += ‘<tr><td style=”height: 5px;”></td></tr>’; // Adjust the height value as needed
htmlTable += ‘<tr><td style=”font-size: 12px;”>Gross Burn</td><td style=”font-size: 12px;”>’+displayCurrency + grossBurn.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + ‘</td></tr>’;
htmlTable += ‘<tr><td style=”font-size: 12px;”>Net Burn</td><td style=”font-size: 12px;”>’+displayCurrency + netBurn.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + ‘</td></tr>’;
htmlTable += ‘<tr><td style=”font-size: 12px;”>EBITDA</td><td style=”font-size: 12px;”>’+displayCurrency + ebidta.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, “,”) + ‘</td></tr>’;
htmlTable += ‘<tr><td style=”height: 5px;”></td></tr>’; // Adjust the height value as needed
htmlTable += ‘</table>’;
// Add the HTML table to the form
form.addField({
id: ‘custom_html_field’,
label: ‘Custom HTML Field’,
type: serverWidget.FieldType.INLINEHTML,
}).defaultValue = htmlTable;
var periodField=form.addField({
id: ‘custpage_period’,
label: ‘Period’,
type: serverWidget.FieldType.SELECT
//source: ‘customlist_periods’
})
periodField.defaultValue = _logValidation(month) ? month : ”;
periodField.addSelectOption({
value : ”,
text : ”
});
periodField.addSelectOption({
value : ‘1’,
text : ‘January’
});
periodField.addSelectOption({
value : ‘2’,
text : ‘February’
});
periodField.addSelectOption({
value: ‘3’,
text: ‘March’
});
periodField.addSelectOption({
value: ‘4’,
text: ‘April’
});
periodField.addSelectOption({
value: ‘5’,
text: ‘May’
});
periodField.addSelectOption({
value: ‘6’,
text: ‘June’
});
periodField.addSelectOption({
value: ‘7’,
text: ‘July’
});
periodField.addSelectOption({
value: ‘8’,
text: ‘August’
});
periodField.addSelectOption({
value: ‘9’,
text: ‘September’
});
periodField.addSelectOption({
value: ’10’,
text: ‘October’
});
periodField.addSelectOption({
value: ’11’,
text: ‘November’
});
periodField.addSelectOption({
value: ’12’,
text: ‘December’
});
var yearField=form.addField({
id: ‘custpage_year’,
label: ‘Year’,
type: serverWidget.FieldType.SELECT
//source: ‘customlist_periods’
})
yearField.defaultValue = _logValidation(year) ? year : ”;
yearField.addSelectOption({
value : ”,
text : ”
});
yearField.addSelectOption({
value : ‘2021’,
text : ‘2021’
});
yearField.addSelectOption({
value : ‘2022’,
text : ‘2022’
});
yearField.addSelectOption({
value : ‘2023’,
text : ‘2023’
});
var remainingUsage = runtime.getCurrentScript().getRemainingUsage();
log.debug(“Remaining Usage at End”, remainingUsage);
}
catch(e)
{
log.debug(“error”,e);
}
context.response.writePage(form);
}
}
return {
onRequest: onRequest
};
});
