Getting trouble while trying Dynamic Data in jsPdf AutoTable - javascript

Am trying to print the dynamic data into the PDF using jsPdf AutoTable .But am failed to do that. I searched in many site's but no one didn't said about dynamic data into the Row's. So here my question is , Is there any way to get the Dynamic data into the table row's if it so can some one clarify me pls . Note : [ Here am not using HTML to store the Data into the Pdf, i got the data from the js directly ] .
this.print=function(){
{
var mainData =this.printData(); // Here am getting Full Json data Here
var steps = mainData.steps; // From that data am Separating what i need
var criticality = mainData.criticality;
var categories = mainData.categories;
var checkup = mainData.checkup;
// This is For to Take the Steps Data alone
$scope.getSteps = function(steps) {
var data = [];
for (var i = steps.length; i-- > 0;) {
data.push(steps[i].name+"\n"+"\n");
}
return data;
}
// Like wise am getting every single object data's
$scope.getNumbersOfSubSteps = function(steps) {
var data = 0;
for (var i = 0 ; i < steps.length; i++) {
for (var j = 0; j<steps[i].steps.length; j++) {
}
data = j ;
}
return data;
}
// this is for Sub Proceeses
$scope.getSubProcesses = function(steps) {
var data = [];
for (var i = 0 ; i < steps.length; i++) {
for (var j = 0; j<steps[i].steps.length; j++) {
data.push(steps[i].steps[j].name+"\n");
}
}
return data;
}
$scope.getCategories = function(categories) {
var data = [];
for (var i = categories.length; i-- > 0;) {
data.push(categories[i].name+"\n");
}
return data;
}
$scope.getCriticality = function(criticality) {
var data = [];
for (var i = criticality.length; i-- > 0;) {
data.push(criticality[i].name+"\n");
}
return data;
}
// Pdf Print Function Begins
var columns = ["ProcessDescription", "Steps", "#ofSubProcesses", "SubSteps","Category","Criticality","CheckUp"];
var processDescription =mainData.description;
var processes= $scope.getSteps(steps);
var NoOfSubProcess = $scope.getNumbersOfSubSteps(steps);
var subProcesses = $scope.getSubProcesses(steps);
console.log('Subprocsses length',subProcesses);
var categories = $scope.getCategories(categories);
var criticality = $scope.getCriticality(criticality);
// The Problem Begins here , Am struggling to Get the Separate data's here !
var rows = [
[processDescription,processes,NoOfSubProcess,subProcesses,categories,criticality]
];
var pdfsize='a1';
var doc = new jsPDF('p', 'pt',pdfsize);
doc.autoTable(columns, rows, {
theme: 'striped', // 'striped', 'grid' or 'plain'
styles: {
overflow: 'linebreak',
columnWidth: 'wrap'
},
beforePageContent: function(data) {
doc.text("Process Name :"+mainData.name, 40, 30);
},
columnStyles: {
1: {columnWidth: 'auto'}
}
});
doc.save(mainData.name+ pdfsize +".pdf");
}
};


You will need to replace this:
var rows = [
[processDescription,processes,NoOfSubProcess,subProcesses,categories,criticality]
];
with something like this:
var rows = [];
for (var k = 0 ; k < processes.length; k++) {
rows.push([
processDescription,
processes[k],
NoOfSubProcess,
subProcesses[k],
categories[k],
criticality[k]
]);
};
The rows parameter should be an array of arrays. What you are putting in there is basically an array of an array of arrays if I understood correctly.

Related

Pushing values to getColumn.values for Excel add In

So I am trying to import and read a json to an excel sheet, using an add-in I'm developing. So I've gotten to a point where I'm getting ColumnA and ColumnB from my new worksheet. Then I'm trying to push the json fields onto the Range.values arrays of the columns. However once I run the program the worksheet is still blank. Here is the code:
function importJson(json, name){
Excel.run(function (context) {
...
var sheetRange = newWorksheet.getRange("A1:B1");
sheetRange.load('values');
var aColumn = sheetRange.getColumn(0);
var bColumn = sheetRange.getColumn(1);
aColumn.load('values');
bColumn.load('values');
return context.sync().then(function () {
printJson(json, aColumn, bColumn);
});
});
printJson(json, aColumn, bColumn)
{
if (json instanceof Object) {
aColumn.values.push(json.display);
if (json.default != null) {
bColumn.values.push(json.default);
}
}
if (json.fields != null) {
for (var i = 0; i < json.fields.length; i++) {
printSchema(json.fields[i], aColumn, bColumn);
}
}
}
Running the debugger I see the values from the json object being pushed onto the arrays but run I still don't see them on the worksheet
Thanks for any help!

So Thanks to a little nudge from #TimWilliams, it was realized that I wasn't updating the worksheets values within my printJson method. So once I pushed all of the values I wanted in Column A and Column B I added this step in my last return sync().then(function(){})....
Excel.run(function (context) {
...
var sheetRange = newWorksheet.getRange("A1:B1");
sheetRange.load('values');
var aColumn = sheetRange.getColumn(0);
var bColumn = sheetRange.getColumn(1);
aColumn.load('values');
bColumn.load('values');
return context.sync().then(function () {
printJson(json, aColumn, bColumn);
****
for (var i = 1; i < aColumn.values.length + 2; i++)
{
var aColumnSheet = newWorksheet.getRange("A" + i);
aColumnSheet.values = aColumn.values[i];
}
for (var i = 1; i < bColumn.values.length + 2; i++) {
var bColumnSheet = newWorksheet.getRange("B" + i);
bColumnSheet.values = bColumn.values[i];
}
*****
});
});
Gives me two beautiful columns of data in Column A and Column B. Thanks again #TimWilliams!

convert html table to json object (with text boxes in table cell)

i have table like this
there are textboxes in table cell
im trying to convert this table to json object using
var InvoiceData = {};
InvoiceData = $('#invoiceDetailTbl').tableToJSON();
but values in text boxes not added to json object

function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
// go through cells
for (var i=1; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}

i have found the solution, i'll done it manually
var table = document.getElementById('invoiceDetailTbl');
var tableRowCount = $("#invoiceDetailTbl > tbody > tr").length;
for (var i = 1; i <= tableRowCount; i++) {
var obj = {
Inv_Date: table.rows.item(i).cells[0].innerText,
Bill_No: table.rows.item(i).cells[1].innerText,
Net_Amt: table.rows.item(i).cells[2].innerText,
Paid_Amt: table.rows.item(i).cells[3].innerText,
Pay_Dis: $(table.rows.item(i).cells[4]).find('input').val(),
Paying_Amt: $(table.rows.item(i).cells[5]).find('input').val(),
Balance: table.rows.item(i).cells[6].innerText,
};
InvoiceData.push(obj);
}

Processing javascript objects with google charts

I am trying to draw a Google visualization pie chart based on below JSON. I am having issues since Google takes numerical data, instead of just plain objects.
For example, I want a pie chart based on UseCase. Pie chart will list VDI,Upgrade,DEMO and show its proportion related to total. Please help.
Here is the JSON example
[{"Id":0,"ProcessedTime":"2012/01","Approver":"zoo","POC":"POC1","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/02","Approver":"zoo","POC":"POC1","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/03","Approver":"zoo","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/04","Approver":"victor","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/05","Approver":"victor","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"victor","POC":"POC3","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/05","Approver":"tom","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"tom","POC":"POC3","UseCase":"Upgrade"}]
// Full source
google.setOnLoadCallback(drawChart);
function drawChart() {
$.get('/Home/GetData', {},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'UseCase');
tdata.addColumn('int', 'Count');
// Reservation based on UseCase
var ReservationByUseCase = [];
for (var i = 0; i < data.length; i++) {
var d = data[i];
// If not part of array.. Add it
if ($.inArray(d.UseCase, ReservationByUseCase) === -1)
{
var UseCaseValue = d.UseCase;
var UseCaseCountValue = 1;
ReservationByUseCase.push({ UseCase: UseCaseValue, UseCaseCount: UseCaseCountValue });
}
// If part of the array.. Increase count
if ($.inArray(d.UseCase, ReservationByUseCase) !== -1) {
var cUseCase = ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)];
cUseCase.UseCaseCount = cUseCase.UseCaseCount + 1;
ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)] = cUseCase
}
}
for (var i = 0; i < ReservationByUseCase.length; i++) {
tdata.addColumn(ReservationByUseCase[i].UseCaseValue, ReservationByUseCase[i].UseCaseCountValue)
alert(ReservationByUseCase[i].UseCaseValue);
alert(ReservationByUseCase[i].UseCaseCountValue);
}
var options = {
title: "Reservations"
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(tdata, options);
});
}

You just need to loop through the data and add up each UseCase:
var ndata = {}
var data = [{"Id":0,"ProcessedTime":"2012/01","Approver":"zoo","POC":"POC1","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/02","Approver":"zoo","POC":"POC1","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/03","Approver":"zoo","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/04","Approver":"victor","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/05","Approver":"victor","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"victor","POC":"POC3","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/05","Approver":"tom","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"tom","POC":"POC3","UseCase":"Upgrade"}];
for (i = 0; i < data.length; i++) {
var d = data[i];
if (ndata[d["UseCase"]] == null) {
ndata[d["UseCase"]] = 1
} else {
ndata[d["UseCase"]] = ndata[d["UseCase"]] + 1
}
}
console.log(ndata);
Here's a fiddle: http://jsfiddle.net/znj0kLsg/

This is what I've came up with... Will this work?
// Reservation based on UseCase
var ReservationByUseCase = [];
for (var i = 0; i < data.length; i++) {
var d = data[i];
// If not part of array.. Add it
if ($.inArray(d.UseCase, ReservationByUseCase) === -1)
{
var UseCaseValue = d.UseCase;
var UseCaseCountValue = 1;
ReservationByUseCase.push({ UseCase: UseCaseValue, UseCaseCount: UseCaseCountValue });
}
// If part of the array.. Increase count
if ($.inArray(d.UseCase, ReservationByUseCase) !== -1) {
var cUseCase = ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)];
cUseCase.UseCaseCount = cUseCase.UseCaseCount + 1;
ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)] = cUseCase
}
}

Get Unique values during Loop

I am looping through an array and getting the data that I need.
for (var i = 0; i < finalArray.length; i++) {
var merchName = finalArray[i].merchName;
var amName = finalArray[i].amName;
var amEmail = finalArray[i].amEmail;
var txnID = finalArray[i].transID;
var transAccount = finalArray[i].transAccount;
}
What I am trying to do at this point is only show unique data in the loop.
For example var transAccount could be in the array 5 times. I only one to display that in my table once. How can I go about accomplishing this ?
Final Array is constructed like so; just as an object:
finalArray.push({
transID: tmpTrans,
transAccount: tmpAccount,
amEmail: amEmail,
merchName: merchName,
amPhone: amPhone,
amName: amName
});

var allTransAccount = {};
for (var i = 0; i < finalArray.length; i++) {
var merchName = finalArray[i].merchName;
var amName = finalArray[i].amName;
var amEmail = finalArray[i].amEmail;
var txnID = finalArray[i].transID;
var transAccount = finalArray[i].transAccount;
if(allTransAccount[finalArray[i].transAccount]) {
var transAccount = '';
}
else {
allTransAccount[transAccount] = true;
}
}

var merhcData = {};
var amName = {};
// and so on
for (var i = 0; i < finalArray.length; i++) {
merchData[finalArray[i].merchName] = finalArray[i].merchName;
amName[finalArray[i].amName] = finalArray[i].amName;
// and so on
}
If you are sure, that data in merchName will never be equal amName or other field - you can use one data object instead of several (merchData, amName...)

What you want is likely a Set. (see zakas for ES6 implementation. To emulate this using javascript, you could use an object with the key as one of your properties (account would be a good bet, as aperl said) which you test before using your raw array.
var theSet={};
for (var i = 0; i < finalArray.length; i++) {
var transAccount = finalArray[i].transAccount;
var merchName = finalArray[i].merchName;
var amName = finalArray[i].amName;
var amEmail = finalArray[i].amEmail;
var txnID = finalArray[i].transID;
if(!theSet[transAccount]){
//add to your table
theSet[transAccount]===true;
}
This will prevent entries of duplicate data.

Cannot set property '0' of 2D array

Can anyone tell me why I'm getting this error for the code below:
Uncaught TypeError: Cannot set property '0' of undefined
var vehicles = [];
$.get('../poll/index.php?data=vehicles', function(data) {
var rows = $(data).find('row').length;
for (var i = 0; i < rows; i++) {
vehicles[i][0] = $(data).find('row').eq(i).find('stage').text();
vehicles[i][1] = $(data).find('row').eq(i).find('direction').text();
vehicles[i][2] = $(data).find('row').eq(i).find('stageName').text();
vehicles[i][3] = $(data).find('row').eq(i).find('atco').text();
vehicles[i][4] = $(data).find('row').eq(i).find('service').text();
vehicles[i][5] = $(data).find('row').eq(i).find('journey').text();
vehicles[i][6] = $(data).find('row').eq(i).find('fleet').text();
vehicles[i][7] = $(data).find('row').eq(i).find('longitude').text();
vehicles[i][8] = $(data).find('row').eq(i).find('latitude').text();
vehicles[i][9] = $(data).find('row').eq(i).find('operator').text();
vehicles[i][10] = $(data).find('row').eq(i).find('position').text();
}
}, 'xml');

You need to define each child array, e.g.
var vehicles = []; // parent array;
vehicles[0] = []; // first child array;
so you would need:
for (var i = 0; i < rows; i++) {
var vehicles[i] = [];
... rest of code here ...
}

vehicles[i] has no value assigned to it.
Add a line:
vehicles[i] = [];
at the top of the loop.

Categories

Resources