I need your help. I have created looping function which is FOR to sum the values for specific column.
var result = data.result; //declare result as variable
var rows = result.result.rows; //declare rows as variable
// var sum = 0;
for (var i = 0; rows.length > i; i++) {
var column = "";
var total = total_event_loss;
var sum += parseFloat(rows[i][total_event_loss]);
column += "<tr><td><center>" + rows[i][category] + "</center></td>";
column += "<td><center><div class='font-red'>" + sum + "</div>" + rows[i][pic] + "</center></td>";
column += "<td><center><div class='font-red'>" + rows[i][total_event_loss] + "</div>" + rows[i][field] + "<br/>" + rows[i][sub_category] + "</center></td></tr>";
$(column).appendTo(container.find("table > tbody"));
}
Initialize the sum variable before the loop, and add to it inside the loop. You can't use the var keyword when adding to it.
var result = data.result;
var rows = result.result.rows;
var sum = 0;
for (var i = 0; rows.length > i; i++) {
var column = "";
sum += parseFloat(rows[i][total_event_loss]);
column += "<tr><td><center>" + rows[i][category] + "</center></td>";
column += "<td><center><div class='font-red'>" + sum + "</div>" + rows[i][pic] + "</center></td>";
column += "<td><center><div class='font-red'>" + rows[i][total_event_loss] + "</div>" + rows[i][field] + "<br/>" + rows[i][sub_category] + "</center></td></tr>";
$(column).appendTo(container.find("table > tbody"));
}
You also never use the total variable, I removed that.
BTW, comments like declare result as a variable are pretty useless. Code comments should clarify things that might not be obvious. It's clear that a var statement declares a variable.
Related
The data is like this, basically:
Activity Deadline Responsible Status
Activity1 09/20/2020 some#gmail.com In progress
Activity2 10/10/2020 someother#gmail.com Finished
The code below loops through Responsible column to create a unique set of emails and then it loops through the data range to create a table containing the activities pending different than Cancelled and Finished, which will then be sent to each of the email in the am set of email to remember them which activities are waiting for their input/update.
Despite the piece where I compare the first responsible with the one from the second loop, the activities composing the tables are not separated correcltly.
One recipient gets his activities, but the other gets all of the activities and the email is sent twice to the latter.
Here is the log output for both loops/columns compared:
If you could shed a light here, that would be greatly appreciated:
function emailPendingActivity() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Atividades");
var startRow = 9; // First row of data to process
var numRows = sheet.getLastRow(); // Number of rows to process
var dataRange = sheet.getRange(startRow, 1, numRows, 24);
var data = dataRange.getValues();
//This creates the history table headers
var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";
//This gets unique responsible people from Atividades sheet
var responsibles = [];
for (var j = 0; j < data.length; ++j) {
var rowResp = data[j];
responsibles.push(rowResp[7]);
}
var unique = (value,index,self) => {
return self.indexOf(value) === index
}
var uniqueResp = responsibles.filter(unique);
for (var n = 0; n < uniqueResp.length;++n) {
if (uniqueResp[n] != ''){
var respRow = uniqueResp[n];
for (var i = 0; i < data.length; ++i) {
var rowData = data[i];
var activityNo = rowData[0];
var resp = rowData[7];
var status = rowData[11];
//if ((status.indexOf('Concluído') == -1) || (status.indexOf('Cancelado') == -1)) {
if (activityNo != '') {
if (status != 'Concluído') {
if (status != 'Cancelado') {
if (resp === respRow){
Logger.log('resp: ' + resp);
Logger.log('respRow: ' + respRow);
Logger.log(status)
var solicitante = rowData[2];
var nature = rowData[3];
var project = rowData[4];
var area = rowData[5];
var activity = rowData[6];
var deadline = rowData[9];
var statusDays = rowData[13];
//var deadlineAsDate = Utilities.formatDate(deadline, SpreadsheetApp.getActive().getSpreadsheetTimeZone(), "dd/MM/yyyy");
historyMsg += "<tbody>"
+ "<tr>"
+ "<td>" + activityNo + "</td>"
+ "<td>" + solicitante + "</td>"
+ "<td style=\"text-align:center\">" + nature + "</td>"
+ "<td style=\"text-align:center\">" + project + "</td>"
+ "<td style=\"text-align:center\">" + area + "</td>"
+ "<td style=\"text-align:left\">" + activity + "</td>"
+ "<td style=\"text-align:center\">" + status + "</td>"
+ "<td style=\"text-align:center\">" + deadline + "</td>"
+ "<td style=\"text-align:center\">" + statusDays + "</td>"
+ "</tr>";
}
}
}
}
}
var message = "<HTML><BODY>"
+ historyMsg;
+ "</HTML></BODY>"
var subject = "Some subject";
MailApp.sendEmail({
name: "Specific Name",
to: respRow,
subject: subject,
htmlBody: message
});
}
}
}
Solution
You are instantiating the historyMsg variable outside the for-loop. Basically you will append every row to this previously instantiated HTML table. You can't continue to append the values if you want to send only the corresponding one to the correct email address.
You should instantiate a new historyMsg for each uniqueResp element. So that the table will be build accordingly to your if conditions.
Proposed modification
function emailPendingActivity() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Atividades");
var startRow = 9; // First row of data to process
var numRows = sheet.getLastRow(); // Number of rows to process
var dataRange = sheet.getRange(startRow, 1, numRows, 24);
var data = dataRange.getValues();
//Move this into the for loop so it will create a unique message for each recipient
/**var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";*/
//This gets unique responsible people from Atividades sheet
var responsibles = [];
for (var j = 0; j < data.length; ++j) {
var rowResp = data[j];
responsibles.push(rowResp[7]);
}
var unique = (value,index,self) => {
return self.indexOf(value) === index
}
var uniqueResp = responsibles.filter(unique);
for (var n = 0; n < uniqueResp.length;++n) {
if (uniqueResp[n] != ''){
var respRow = uniqueResp[n];
//This creates the history table headers
var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";
for (var i = 0; i < data.length; ++i) {
...
I found this nice canvas pie on Github, but it's giving me some problem.
I'm not very good in JS, so I'm here asking for help.
https://github.com/jamesalvarez/draggable-piechart
In the example shown here, you can see a UI to manipulate the graphic.
https://codepen.io/Waterbear83/pen/vYOrbva?editors=0010
I don't understand how to display that UI even if I'm using the same js.
https://codepen.io/Waterbear83/pen/yLNqVBZ?editors=0010
Is there someone so nice to help?
Thanks!
function onPieChartChange(piechart) {
var table = document.getElementById("proportions-table");
var percentages = piechart.getAllSliceSizePercentages();
var labelsRow = "<tr>";
var propsRow = "<tr>";
for (var i = 0; i < proportions.length; i += 1) {
labelsRow += "<th>" + proportions[i].format.label + "</th>";
var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
var plus =
'<div id="plu-' +
dimensions[i] +
'" class="adjust-button" data-i="' +
i +
'" data-d="-1">+</div>';
var minus =
'<div id="min-' +
dimensions[i] +
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</div>';
propsRow += "<td>" + v + plus + minus + "</td>";
}
labelsRow += "</tr>";
propsRow += "</tr>";
table.innerHTML = labelsRow + propsRow;
var adjust = document.getElementsByClassName("adjust-button");
function adjustClick(e) {
var i = this.getAttribute("data-i");
var d = this.getAttribute("data-d");
piechart.moveAngle(i, d * 0.1);
}
for (i = 0; i < adjust.length; i++) {
adjust[i].addEventListener("click", adjustClick);
}
}
[...] even if I'm using the same js
Not quite the same :) It misses this in your setup onchange: onPieChartChange
var newPie = new DraggablePiechart({
canvas: document.getElementById("piechart"),
data: data,
onchange: onPieChartChange
});
And then, after, in the onPieChartChange() there is also the dimensions (it's the same array but sorted randomly with the function knuthfisheryates2(), like you don't have this function in your code, it throws an error ReferenceError: dimensions is not defined because it does not exist) term to change in data in the function onPieChartChange(piechart). The same goes with proportions. But you can keep this one rather to replace it, it's handy to place common parameter like collapsed: false and to do operations on others like label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1)
var proportions = data.map(function(d,i) { return {
label: d.format.label,
proportion: d.proportion,
collapsed: false,
format: {
color: d.format.color,
label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1) // capitalise first letter
}
}});
function onPieChartChange(piechart) {
var table = document.getElementById("proportions-table");
var percentages = piechart.getAllSliceSizePercentages();
var labelsRow = "<tr>";
var propsRow = "<tr>";
for (var i = 0; i < proportions.length; i += 1) { // <------------------ HERE but keep --------
labelsRow += "<th>" + proportions[i].format.label + "</th>"; // <--- HERE but keep --------
var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
var plus = '<div id="plu-' +
data[i] + // <----------------- HERE ------------------
'" class="adjust-button" data-i="' +
i +
'" data-d="-1">+</div>';
var minus =
'<div id="min-' +
data[i] + // <-------------- AND HERE -----------------
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</div>';
propsRow += "<td>" + v + plus + minus + "</td>";
}
labelsRow += "</tr>";
propsRow += "</tr>";
table.innerHTML = labelsRow + propsRow;
var adjust = document.getElementsByClassName("adjust-button");
function adjustClick(e) {
var i = this.getAttribute("data-i");
var d = this.getAttribute("data-d");
piechart.moveAngle(i, d * 0.1);
}
for (i = 0; i < adjust.length; i++) {
adjust[i].addEventListener("click", adjustClick);
}
}
Note: Couldn't make it works with the angles, I looked all his examples, he never uses it, he always uses proportions: proportions. So I just changed that in addition in your code.
The code is to large to be posted in a snippet here, here a codepen:
You can change the data from line 744 (see picture)
https://codepen.io/jghjghjhg/pen/rNVrwbd
//Display
for (var z=0; z<n; z++) {
document.write("<tr><td>"+ z + "</td>"); // Serial
document.write("<td>" + RandonValue + "</td>"); // Random Number
document.write('<td><button onclick="reply_click()" id="button-' + z + '">Click me</button></td></tr>'); //onClick
}
//Set ID
function reply_click(clicked_id){
alert(clicked_id);
}
Somehow I got undefined for all of them.
The replay_click is only for checking, I want to change that when I have different IDs.
Your z variable is the counter in this case which you can use for your id, keep in mind you can't have an ID starting with a number.
document.write('<td><button onclick="somefunction" id="button-' + z + '">Click me</button></td></tr>');
I have created a fiddle for you. Check it. I hope it fulfills the requirements :)
https://jsbin.com/doxusi/edit?html,js,output
<table id="mytable"></table>
var html = '';
var random = 5;
for (var i = 1; i <= random; i++) {
html += '<tr>' +
'<td>' + i + '</td>' +
'<td>Some Number</td>' +
'<td><button id="id_' + i + '">Button ' + i + '</button></tr></td>';
}
document.getElementById('mytable').innerHTML = (html);
You can inject your z variable like this, also putting double quotes (best practice:
document.write('<td><button onclick="somefunction(this)" id="mycell-' + z + '">Click me</button></td></tr>');
Note that you better pass this to your function, so inside that function you can reference that id:
function somefunction(elem) {
alert('you clicked ' + elem.id);
}
Please can you help me with my code?
function tabelleFuellen(eingabeFeldArray) {
for (var eingabeFeldZaehler = 0; eingabeFeldZaehler < eingabeFeldArray.length; eingabeFeldZaehler++)
{
document.cookie += eingabeFeldArray[eingabeFeldZaehler].value + "|";
}
document.cookie += "~";
$('#tableinsert tbody').remove();
var zeilenArray = document.cookie.split('~');
for (var zeilenZaehler = 0; zeilenZaehler < zeilenArray.length - 1; zeilenZaehler++)
{
var spaltenArray = zeilenArray[zeilenZaehler].split('|');
document.getElementById("tableinsert").innerHTML += "<tbody><tr><td>" + spaltenArray[0] + "</td><td>" + spaltenArray[1] + "</td><td>" + spaltenArray[2] + "</td><td>" + spaltenArray[3] + "<td>" + spaltenArray[4] + "</td></tr></tbody>";
}
$('.field1').val('');
$(document).ready(function () {
var eingabeFeldArray = $('.field1');
tabelleFuellen(eingabeFeldArray);
});
}
This code takes value from input fields, saves them into a cookie and writes down into a table. But if the input fields are empty the table will always make a new row with a dot.
How to remove these dots?
I have this code:
for(var i = 0; i < localStorage.length; i++){
var dataNya = JSON.parse(localStorage.key(i));
// console.log(dataNya);
var displayUlit = "";
displayUlit += "<br/>";
var spaceTo = "";
spaceTo += " || ";
console.log(dataNya);
var keme = localStorage.getItem(localStorage.key(i));
$("#pangDisplay").append(dataNya + spaceTo + "<button class='pangEdit' value="+dataNya+">"+JSON.parse(keme)+"</button>" + " " + displayUlit);
console.log(JSON.parse(keme));
// localStorage.setItem(JSON.stringify(dataNya), JSON.stringify("complete"));
}
$(".pangEdit").click(function(e){
e.preventDefault();
var pangInput = $(".pangEdit").val();
console.log(pangInput);
localStorage.setItem(JSON.stringify(pangInput), JSON.stringify("complete"));
});
i want to get the key of the localstorage where i can pass the data and update its value. help me thanks
You can use an attached data attributes in jQuery for this:
for (var i = 0; i < localStorage.length; i++) {
var dataNya = localStorage.key(i);
var displayUlit = "";
displayUlit += "<br/>";
var spaceTo = "";
spaceTo += " || ";
var keme = localStorage.getItem(dataNya);
var button = "<button class='pangEdit' data-storagekey='" + dataNya + "' value='" + dataNya + "'>" + keme + "</button>";
$("#pangDisplay").append(dataNya + spaceTo + button + " " + displayUlit);
}
$(".pangEdit").click(function(e) {
e.preventDefault();
var dataNya = $(this).data('storagekey');
localStorage.setItem(dataNya, "complete");
});