Jira Code: TAIP -180
We have written a Suitelet that displays a custom page with table and graphs showing the activities by Rep Per Day/Week/Month. As per the proposed solution, we have created a custom page in NetSuite and the link is provided below.
We have deployed a suitelet that creates searches of
- PhoneCalls to fetch values for fields: Number of Outbound Calls, Number of Online Logins, Number of Appointments Set Up.
- Estimate and opportunity to fetch values for fields: Number of Quotes, Number of Opportunities respectively.
- Customer to fetch values for fields: Number of Clients.
Which incorporates these data to display a page with the report and graphs of sales rep activity. We have also set filters: Daily, Weekly and Monthly. By default, the page displays the values with filter Daily. The page will be refreshed at a fixed interval of time.
Custom page Development: Table
On the Table section of the report, the Actual column will be calculated as follows
- Number of OUTBOUND CALLS: Total no.of Phone call record created with the Phone call date as the current date for a specific Sales Rep
- Number of QUOTES: Total no.of Quotes created with that current date and the corresponding Sales Rep.
- Number of ONLINE LOGINS: Total no.of Phone call record created with the Phone call date as the current date, assigned to the corresponding sales rep, and the ONLINE LOGIN SET UP field is checked
- Number of OPPORTUNITIES: Total no.of Opportunities created with the current date and the corresponding Sales Rep.
- Number of APPOINTMENTS SET UP: Total no.of Phone call record created with the Phone call date as the current date, assigned to the corresponding sales rep, and the SETUP APPOINTMENT FOR REP VISIT field is checked
- A number of NEW CLIENTS: It will be the Total no.of customer record created on that date with the corresponding Sales Rep.
Custom page Development: Graph
The page will also display the graphs of sales rep activity. The graph automatically updates for each filter: Daily, Weekly, Monthly. We have also set conditions when ACTUAL less than TARGET, the corresponding bar representing the actual value in graph changes to Red.
Suitelet that fetch data to be displayed on a custom page with table and graphs showing the Activities by Rep Per Day/Week/Month.
/**
* @NApiVersion 2.x
* @NScriptType Suitelet
*/
/*******************************************************************************
* TAIP-180 Suitelet that displays a custom page with table and graphs showing the Activities by Rep Per Day/Week/Month using Freemarker Template
* **************************************************************************
*
* Date: 20-08-2019
*
* Author: Jobin & Jismi IT Services LLP
*
*****************************************************************************
**/
define(['N/search', 'N/record', 'N/file',"N/render"],
function(search, record, file,render) {
var ITEM_OBJ = {};
var main = {
onRequest: function(context) {
try {
if (context.request.method == 'GET') {
var content = main.fetch_Phonecalldetails();
var datahtml = file.load({ id: 152384 }).getContents();
log.debug("datahtml", datahtml);
log.debug("content", content);
var renderer = render.create();
renderer.templateContent = datahtml;
renderer.addCustomDataSource({
format: render.DataSource.OBJECT,
alias: "content",
data: content
});
log.debug("ITEM_OBJ", ITEM_OBJ);
context.response.write(renderer.renderAsString());
}
}
catch (er) {
log.debug('err@onRequest', er.message);
}
},
fetch_Phonecalldetails: function() {
var Phonecalldetails_array = [];
var phonecallSearchObj = search.create({
type: "phonecall",
filters: [
["employee.salesrole", "anyof", "-2"]
],
columns: [
search.createColumn({
name: "assigned",
summary: "GROUP",
label: "Organizer"
}),
search.createColumn({
name: "internalid",
summary: "COUNT",
label: "Number of Outbound Calls"
}),
search.createColumn({
name: "formulanumeric",
summary: "SUM",
formula: "CASE WHEN {custevent_online_login_set_up}='T' THEN 1 ELSE 0 END",
label: "Number of ONLINE LOGINS"
}),
search.createColumn({
name: "formulanumeric",
summary: "SUM",
formula: "CASE WHEN {custevent_set_up_appt_for_rep_visit}='T' THEN 1 ELSE 0 END",
label: "Number of APPOINTMENTS SET UP"
})
]
});
var searchResultCount = phonecallSearchObj.runPaged().count;
log.debug("phonecallSearchObj result count", searchResultCount);
phonecallSearchObj.run().each(function(result) {
var Phonecalldetails_obj = {};
var Organizer = result.getText(phonecallSearchObj.columns[0]);
Phonecalldetails_obj.Organizer = Organizer;
var Outbound_calls = result.getValue(phonecallSearchObj.columns[1]);
Phonecalldetails_obj.Outbound_calls = Outbound_calls;
var Organizer_id = result.getValue(phonecallSearchObj.columns[0]);
var Number_quotes = main.fetch_quotedeatils(Organizer_id);
Phonecalldetails_obj.Number_quotes = Number_quotes;
var Online_logins = result.getValue(phonecallSearchObj.columns[2]);
Phonecalldetails_obj.Online_logins = Online_logins;
var Appointment_setup = result.getValue(phonecallSearchObj.columns[3]);
Phonecalldetails_obj.Appointment_setup = Appointment_setup;
var Number_clients = main.fetch_customerdeatils(Organizer_id);
Phonecalldetails_obj.Number_clients = Number_clients;
Phonecalldetails_array.push(Phonecalldetails_obj);
return true;
});
ITEM_OBJ.items = Phonecalldetails_array;
return ITEM_OBJ;
},
fetch_quotedeatils: function(Organizer_id) {
var Number_quotes;
var estimateSearchObj = search.create({
type: "estimate",
filters: [
["type", "anyof", "Estimate"],
"AND", ["salesrep", "anyof", Organizer_id]
],
columns: [
search.createColumn({
name: "internalid",
summary: "COUNT",
label: "Number Of Quotes"
})
]
})
var searchResultCount = estimateSearchObj.runPaged().count;
/*log.debug("estimateSearchObj result count", searchResultCount);*/
estimateSearchObj.run().each(function(result) {
Number_quotes = result.getValue(estimateSearchObj.columns[0]);
return true;
});
return Number_quotes;
},
fetch_customerdeatils: function(Organizer_id) {
var Number_clients;
var customerSearchObj = search.create({
type: "customer",
filters: [
["salesrep", "anyof", Organizer_id]
],
columns: [
search.createColumn({
name: "internalid",
summary: "COUNT",
label: "Number New Clients"
})
]
});
var searchResultCount = customerSearchObj.runPaged().count;
/*log.debug("customerSearchObj result count", searchResultCount);*/
customerSearchObj.run().each(function(result) {
Number_clients = result.getValue(customerSearchObj.columns[0]);
return true;
});
return Number_clients;
}
}
for (var key in main) {
if (typeof main[key] === 'function') {
main[key] = trycatch(main[key], key);
}
}
function trycatch(myfunction, key) {
return function() {
try {
return myfunction.apply(this, arguments);
} catch (e) {
log.debug("e in " + key, e);
}
}
};
return main;
});HTML page that displays values from suitelet using Freemarker template.
<!DOCTYPE html>
<html>
<head>
<title>Activities By Rep</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="ActivitiesByRep_data" onload="url_load()">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="ActivitiesByRep_heading">ACTIVITIES BY REP Per Day/Week/Month</div>
<div>
<div class='date_filter_data' style="display:none;">${content.date_filter}</div>
<select class="ActivitiesByRep_data_selectoption" id="ActivitiesByRep_data_selectoption" onchange="filter()">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
<div class="ActivitiesByRep_data_nodata" id="nodata"> No Activities By Reps Available</div>
</div>
<div class="ActivitiesByRep_data_main">
<table>
<tr class="ActivitiesByRep_data_main_content">
<td class="Rep_name_label">REP :</td>
<td class="Outbound_calls_label ActivitiesByRep_data_label">Number of Outbound Calls</td>
<td class="Outbound_calls_label ActivitiesByRep_data_label">Number of Outbound Calls</td>
<td class="Quotes_label ActivitiesByRep_data_label">Number of Quotes</td>
<td class="Quotes_label ActivitiesByRep_data_label">Number of Quotes</td>
<td class="OnlineLogins_label ActivitiesByRep_data_label">Number of Online Logins</td>
<td class="OnlineLogins_label ActivitiesByRep_data_label">Number of Online Logins</td>
<td class="Opportunities_label ActivitiesByRep_data_label">Number of Opportunities</td>
<td class="Opportunities_label ActivitiesByRep_data_label">Number of Opportunities</td>
<td class="Appointmentsetup_label ActivitiesByRep_data_label">Number of Appointments Set Up</td>
<td class="Appointmentssetup_label ActivitiesByRep_data_label">Number of Appointments Set Up</td>
<td class="NewClients_label ActivitiesByRep_data_label">Number of New Clients</td>
<td class="NewClients_label ActivitiesByRep_data_label">Number of New Clients</td>
</tr>
<tr class="ActivitiesByRep_data_main_content_label">
<td class="Rep_name"></td>
<td class="Outbound_calls_target">TARGET</td>
<td class="Outbound_calls_actual">ACTUAL</td>
<td class="Quotes_target">TARGET</td>
<td class="Quotes_actual">ACTUAL</td>
<td class="OnlineLogins_target">TARGET</td>
<td class="OnlineLogins_actual">ACTUAL</td>
<td class="Opportunities_target">TARGET</td>
<td class="Opportunities_actual">ACTUAL</td>
<td class="Appointmentsetup_target">TARGET</td>
<td class="Appointmentssetup_actual">ACTUAL</td>
<td class="NewClients_target">TARGET</td>
<td class="NewClients_actual">ACTUAL</td>
</tr>
<#list content.items as content_line>
<tr class="ActivitiesByRep_data_main_content_line">
<td class="Rep_name_line">${content_line.Organizer}</td>
<td class="Outbound_calls_target_line">${content_line.Outbound_calls_target}</td>
<td class="Outbound_calls_actual_line">${content_line.Outbound_calls_actual}</td>
<td class="Quotes_target_line">${content_line.Number_quotes_target}</td>
<td class="Quotes_actual_line">${content_line.Number_quotes_actual}</td>
<td class="OnlineLogins_target_line">${content_line.Online_logins_target}</td>
<td class="OnlineLogins_actual_line">${content_line.Online_logins_actual}</td>
<td class="Opportunities_target_line">${content_line.Number_opportunities_target}</td>
<td class="Opportunities_actual_line">${content_line.Number_opportunities_actual}</td>
<td class="Appointmentsetup_target_line">${content_line.Appointment_setup_target}</td>
<td class="Appointmentsetup_actual_line">${content_line.Appointment_setup_actual}</td>
<td class="NewClients_target_line">${content_line.Number_clients_target}</td>
<td class="NewClients_actual_line">${content_line.Number_clients_actual}</td>
</tr>
</#list>
</table>
</div>
<div class="chart_section row ">
<div class="chart_section_row_1 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div1" id="chart_div1"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
<div class="chart_div2 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div2" id="chart_div2"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
<div class="chart_div3 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div3" id="chart_div3"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
<div class="chart_div4 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div4" id="chart_div4"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
<div class="chart_div5 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div5" id="chart_div5"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
<div class="chart_div6 col-12 col-sm-6 col-md-4 col-lg-4">
<div class="chart_div6" id="chart_div6"></div>
<div class="chart_div_box" style="text-align: center;">
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Target" style="display: inline-block;">TARGET</div>
<svg width="10" height="10">
<rect width="300" height="100" style="fill:rgb(20, 200, 60);stroke-width:3;stroke:rgb(0,0,0)" />
<div class="box_Actual" style="display: inline-block;">ACTUAL</div>
</div>
</div>
</div>
<div class="graph_content_items" style="display: none">${content.items1}</div>
<div class="Outbound_targetsum" style="display: none">${content.Outbound_targetsum}</div>
<div class="Outbound_actualsum" style="display: none">${content.Outbound_actualsum}</div>
<div class="quotes_targetsum" style="display: none">${content.quotes_targetsum}</div>
<div class="quotes_actualsum" style="display: none">${content.quotes_actualsum}</div>
<div class="logins_targetsum" style="display: none">${content.logins_targetsum}</div>
<div class="logins_actualsum" style="display: none">${content.logins_actualsum}</div>
<div class="opportunities_targetsum" style="display: none">${content.opportunities_targetsum}</div>
<div class="opportunities_actualsum" style="display: none">${content.opportunities_actualsum}</div>
<div class="Appointment_targetsum" style="display: none">${content.Appointment_targetsum}</div>
<div class="Appointment_actualsum" style="display: none">${content.Appointment_actualsum}</div>
<div class="clients_targetsum" style="display: none">${content.clients_targetsum}</div>
<div class="clients_actualsum" style="display: none">${content.clients_actualsum}</div>
<br />
</body>
</html>
<script type="text/javascript">
function url_load() {
var current_url = window.location.href;
setTimeout("location.href = '" + current_url + "';", 30000);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var date_filter_date = document.getElementsByClassName('ActivitiesByRep_data_selectoption')[0];
setSelectedValue(date_filter_date, document.getElementsByClassName('date_filter_data')[0].innerHTML);
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].value == valueToSet) {
selectObj.options[i].selected = true;
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
if (graph_data.length) {
document.getElementById("nodata").style.display = "none";
} else {
document.getElementById("nodata").style.display = "inline-block";
document.getElementById("ActivitiesByRep_data_selectoption").style.marginBottom = "0%";
}
return;
}
}
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
if (graph_data.length) {
document.getElementById("nodata").style.display = "none";
} else {
document.getElementById("nodata").style.display = "inline-block";
document.getElementById("ActivitiesByRep_data_selectoption").style.marginBottom = "0%";
}
}
function filter() {
var filter = document.getElementsByClassName('ActivitiesByRep_data_selectoption')[0].value;
var url = "https://3889163.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=193&deploy=1&compid=3889163&h=4e78871dbd705182a1a9&filter=" + filter;
window.onbeforeunload = function() {};
window.location.href = url;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
google.charts.load('current', { 'packages': ['bar'] });
function drawChart1() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var Outbound_targetsum = document.getElementsByClassName('Outbound_targetsum')[0].innerText;
var Outbound_actualsum = document.getElementsByClassName('Outbound_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Outbound_calls_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Outbound_calls_actual);
if (graph_data[j].Outbound_calls_actual >= graph_data[j].Outbound_calls_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, Outbound_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, Outbound_actualsum);
if (Number(Outbound_actualsum) >= Number(Outbound_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)')
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(data, {
width: 400,
title: 'Number of Outbound Calls',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart1(); }
});
/////////////////////////////////////////
function drawChart2() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var quotes_targetsum = document.getElementsByClassName('quotes_targetsum')[0].innerText;
var quotes_actualsum = document.getElementsByClassName('quotes_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Number_quotes_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Number_quotes_actual);
if (graph_data[j].Number_quotes_actual >= graph_data[j].Number_quotes_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, quotes_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, quotes_actualsum);
if (Number(quotes_actualsum) >= Number(quotes_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)');
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
chart.draw(data, {
width: 400,
title: 'Number of Quotes',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart2(); }
});
/////////////////////////////////////////
function drawChart3() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var logins_targetsum = document.getElementsByClassName('logins_targetsum')[0].innerText;
var logins_actualsum = document.getElementsByClassName('logins_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Online_logins_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Online_logins_actual);
if (graph_data[j].Online_logins_actual >= graph_data[j].Online_logins_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, logins_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, logins_actualsum);
if (Number(logins_actualsum) >= Number(logins_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)');
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
chart.draw(data, {
width: 400,
title: 'Number of Online Logins',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart3(); }
});
//////////////////////////////////////////
function drawChart4() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var opportunities_targetsum = document.getElementsByClassName('opportunities_targetsum')[0].innerText;
var opportunities_actualsum = document.getElementsByClassName('opportunities_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Number_opportunities_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Number_opportunities_actual);
if (graph_data[j].Number_opportunities_actual >= graph_data[j].Number_opportunities_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, opportunities_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, opportunities_actualsum);
if (Number(opportunities_actualsum) >= Number(opportunities_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)');
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
chart.draw(data, {
width: 400,
title: 'Number of Opportunities',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart4(); }
});
//////////////////////////////////////
function drawChart5() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var Appointment_targetsum = document.getElementsByClassName('Appointment_targetsum')[0].innerText;
var Appointment_actualsum = document.getElementsByClassName('Appointment_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Appointment_setup_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Appointment_setup_actual);
if (graph_data[j].Appointment_setup_actual >= graph_data[j].Appointment_setup_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, Appointment_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, Appointment_actualsum);
if (Number(Appointment_actualsum) >= Number(Appointment_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)');
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div5'));
chart.draw(data, {
width: 400,
title: 'Number of Appointment setup',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart5(); }
});
////////////////////////////////////////
function drawChart6() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Target');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', 'Actual');
data.addColumn({ type: 'string', role: 'style' });
var graph_data = JSON.parse(document.getElementsByClassName('graph_content_items')[0].innerText);
var clients_targetsum = document.getElementsByClassName('clients_targetsum')[0].innerText;
var clients_actualsum = document.getElementsByClassName('clients_actualsum')[0].innerText;
data.addRows(graph_data.length + 1);
for (var j = 0; j < graph_data.length; j++) {
var i = 0;
data.setValue(j, i++, graph_data[j].Organizer);
data.setValue(j, i++, graph_data[j].Number_clients_target);
data.setValue(j, i++, 'rgb(20, 200, 60)');
data.setValue(j, i++, graph_data[j].Number_clients_actual);
if (graph_data[j].Number_clients_actual >= graph_data[j].Number_clients_target) {
data.setValue(j, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(j, i++, 'rgb(255, 0, 0)');
}
}
if (graph_data.length > 0) {
var i = 0;
data.setValue(graph_data.length, i++, 'Total');
data.setValue(graph_data.length, i++, clients_targetsum);
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
data.setValue(graph_data.length, i++, clients_actualsum);
if (Number(clients_actualsum) >= Number(clients_targetsum)) {
data.setValue(graph_data.length, i++, 'rgb(20, 200, 60)');
} else {
data.setValue(graph_data.length, i++, 'rgb(255, 0, 0)');
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
chart.draw(data, {
width: 400,
title: 'Number of Clients',
legend: { position: 'none' },
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function() { drawChart6(); }
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>
<style type="text/css">
table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 0px;
}
.ActivitiesByRep_heading {
text-align: center;
font-size: 25px;
font-weight: bold;
background: lightblue;
margin-bottom: 3%;
}
.ActivitiesByRep_data_selectoption {
width: 10%;
margin: 0% 0% 4% 0%;
padding: 0.5% 0% 0.5% 0%;
font-weight: bold;
background: #e6e6e6;
}
.ActivitiesByRep_data {
margin: 2% 2% 2% 2%;
display: inline-block;
}
.ActivitiesByRep_data_main {
text-align: center;
margin-bottom: 3%;
}
.ActivitiesByRep_data_main_content {
font-weight: 700;
background: lightblue;
}
.ActivitiesByRep_data_main_content_label {
background: #e6e6e6;
}
.chart_div1,
.chart_div2,
.chart_div3,
.chart_div4,
.chart_div5,
.chart_div6 {
/*margin-bottom: 5%;*/
height: 300px;
text-align: -webkit-center
}
.Rep_name_label {
width: 13%;
}
.ActivitiesByRep_data_label {
width: 7.25%;
word-break: break-word;
}
.Rep_name_line {
text-align: left;
background: #e6e6e6;
padding-left: .25%;
}
#nodata {
width: 100%;
text-align: center;
margin-bottom: 2%;
color: red;
font-size: 20px;
}
.chart_div_box {
width: 100%;
}
.box_Target {
padding-right: 2%;
padding-left: 1%;
font-size: 14px;
}
.box_Actual {
padding-left: 1%;
font-size: 14px;
}
</style>