i got a temporary table which is created from procedure. i'm assigning it to the variable which is then converted to json and passed to the view of my laravel project. when i load my page table is rendered but some column values are missing.i wonder why?
i've run it in MySQL Workbench and all the data shows up normally. here is the HTML result of it: https://jsfiddle.net/iBek23/z5pdsjob/
controller:
public function tabulator(){
DB::select("CALL report1a_respublika('2000/01/01', '2023/01/01')");
$one = DB::select("SELECT * FROM test");
$one = json_encode($one);
return view ('reports.tabulator', compact('one'));
view:
{{-- tabulator tables --}}
<div style='display:none' id="tableZero"></div>
<div id="tableOne" style="margin-top:15px"></div>
{{-- tabulator script --}}
<script>
//define data for table1
var tabledata1 = {!!$one!!}
var table0 = new Tabulator("#tableZero", {
layout: "fitDataFill", //fit columns to width of table (optional)
autoColumns: true,
});
//define table1
var table1 = new Tabulator("#tableOne", {
data: tabledata1,
autoColumns:true,
layout:"fitDataFill",
movableColumns:true,
selectable:true,
clipboard:true,
});
//trigger download of data.xlsx file
var sheets = {
"sheetA": table1,
};
downloadXlxs = function(){
table0.download("xlsx", "report.xlsx", {sheets:sheets});
};
</script>
here is what i get: https://jsfiddle.net/iBek23/wf0xernz/5/
columns 5,6 and 7 (counting from left to right) don't have any values.
Replace Period '.' with .
see this jsfiddle you can see first item, repeat this
.\u0411\u0438\u0448\u043a\u0435\u043a":12,
Related
I have a comma separated value list with several lines, and want to create a table with four columns using jquery. I have created a jquery function, but I am unable to reproduce the
$(function(){
$('div').prepend('<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead><tbody>');
$('div').html(function(){
var text = $(this).text();
var array = text.split(',');
var array2 = array[0].split('-');
var html = '<tr><td>'+ array2[0] + '</td><td>'+ array2[1] + '</td><td>' + array[1] + '</td><td>' + array[2] + '</td></tr>';
$(this).html(html);
})
$('div').append('</tbody></table>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
author - book,2010,good
author2 - book2,2011,good
author3 - book3,2011,bad
author4 - book4,2012,average
author5 - book5,2009,bad
author6 - book6,2008,good
</div>
The expected output:
<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead>
<tbody>
<tr><td>author</td><td>book</td><td>2010</td><td>good</td></tr>
<tr><td>author2</td><td>book2</td><td>2011</td><td>good</td></tr>
<tr><td>author3</td><td>book3</td><td>2011</td><td>bad</td></tr>
<tr><td>author4</td><td>book4</td><td>2012</td><td>average</td></tr>
<tr><td>author5</td><td>book5</td><td>2009</td><td>bad</td></tr>
<tr><td>author6</td><td>book6</td><td>2008</td><td>good</td></tr>
</tbody>
</table>
The Jquery code doesn't work as I expect, I am stuck with this.
Thank you!
Break this down into smaller tasks by first getting the data processed and then once you have that figured out build the html from there.
You are missing a key step in splitting the line breaks to get your initial rows strings using text.split('\n').
Once you get those rows then map each row to split the other characters to get a sub array of strings for each row. Since none of this processing requires using elements you can do it in a sandbox until you get to where you can take string input and log a final array to console.
Once you have a data array then build the table rows. Note in your append() process you can't append closing tags as you would in a code editor. When you append html into the dom it creates full elements so include all closing tags in that html string
Working example:
const $div = $('#myDiv')
// include the closing tags in the html string
const $table = $('<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead><tbody></tbody></table>');
let txt = $div.text().trim();// trim to remove whitespace at each end
// split line breaks for rows array
let rows = txt.split('\n').map(s => {
// split the two parts
const [author, content] = s.split(' - ');
// return final sub array
return [author, ...content.split(',')]
});
// inspect your work so far
console.log('rows array',JSON.stringify(rows))
// now that dat works, insert into table
rows.forEach(row =>{
var $row = $('<tr>');
row.forEach(s=> $row.append($('<td>',{text:s})));
$table.find('tbody').append($row)
})
// finally insert the table
$('div').html($table)
td, th{ border: 1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
author - book,2010,good
author2 - book2,2011,good
author3 - book3,2011,bad
author4 - book4,2012,average
author5 - book5,2009,bad
author6 - book6,2008,good
</div>
I am new to Firebase and JS.
I am trying to display some user information on a web-page that is stored in Firebase database.
Data format is something as this image:
Based on the image above :
From the available nodes, UserData is the one that holds the name, email, assigned-id
I don't require to show User1/User2/User3, they are unreadable such as HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.
I just need the Values associated with Attr1 and Attr3 for all the users there exists.
Now, I would like to fetch this data and show it in a webpage(one of HTML) in a tabular format.
Name | Assigned ID
___________________
Name 1 | ID 1
Name 1 | ID 2
Name 3 | ID 3
I have seen some tutorials but they weren't clear and helpful.
This is the Javascript code I have written basis some tutorials, and only one record is being displayed from the database, rather than whole -
Also this is the last record available in the database, can i display the same in the sorted order of AssignedID value
(function(){
// Initialize Firebase
var config = {
apiKey: "Aaasff34eaADASDAS334444qSDASD23ASg5H",
authDomain: "APP_NAME.firebaseapp.com",
databaseURL: "https://APP_NAME.firebaseio.com",
storageBucket: "APP-NAME.appspot.com",
messagingSenderId: "51965125444878"
};
firebase.initializeApp(config);
var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val(); // childData will be the actual contents of the child
var name_val = childSnapshot.val().Name;
var id_val = childSnapshot.val().AssignedID;
document.getElementById("name").innerHTML = name_val;
document.getElementById("id").innerHTML = id_val;
});
});
}());
Can someone kindly help me achieve this? Thanks in advance.
There are two things you need to change 1. instead of using get element by id use jquery and also so that it doesn't overwrite itself use append to list the select items from the database.
var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
var name_val = childSnapshot.val().Name;
var id_val = childSnapshot.val().AssignedID;
$("#name").append(name_val);
$("#id").append(id_val);
});
});
This on its own would output your database items one after the other and so to add formatting to every database item you can do things like this (by the way this is why you have to use jquery as this didn't work with the normal js stuff)...
$("#name").append("<p>" + name_val + "</p><p> " + id_val + "</p>
<br>");
This would look like this for every name and id
Name Id
Name Id
Name Id
You could also have used this for entering you data from your database into a table by putting each item in a tag and so on if you don't know what im on about just go learn about html tables and from then on its self-explanatory.
The reason you are only seeing the last item is because of these 2 lines
document.getElementById("name").innerHTML = name_val;
document.getElementById("id").innerHTML = id_val;
You're not creating new items, just writing/overwriting in the same spot. Each item replaces the name/id of the one before until the last item. Consider using element.appendChild() to add the items to an <li> element.
As far as sorting goes, check out this page of the firebase doc: https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data
Hope this helps!
I am using the d3 Timeline plugin (https://github.com/jiahuang/d3-timeline) and I finally got it to where the viz can read my data. However, I now need to make it so that all entries for a particular student show on the same line. The viz is currently displaying each entry separately.
CSV data looks like this:
Start,End,Student,Event Type,tooltip
2015-May-27 20:08:15,2015-May-27 20:08:21,Student 338,Pretest,Student 338 spent 00:00:06 on Biological Chemistry test. Student scored 100%.
2015-May-27 20:08:21,2015-May-27 20:08:30,Student 338,Learning Path,Student 338 spent 00:00:09 on Biological Buffers Website.
2015-May-27 20:08:30,2015-May-27 20:08:34,Student 338,Learning Path,Student 338 spent 00:00:04 on Organic Molecules Textbook.
2015-May-27 20:08:34,2015-May-27 20:08:36,Student 338,Learning Path,Student 338 spent 00:00:03 on Nucleic Acid Structure and Function Textbook 2.
The viz file looks like this:
<script type="text/javascript">
window.onload = function() {
var width = 800;
var height = 700;
var parseDate = d3.time.format("%Y-%b-%d %H:%M:%S").parse; //With parseDate, I define what my time data looks like for d3
d3.csv("https://dl.dropboxusercontent.com/u/42615722/LeaP/biology-course2.csv", function(d){
return {
label : d.Student,
eventType: d["Event Type"],
times:[{"starting_time" : parseDate(d.Start),
"ending_time" : parseDate(d.End)}], //the timeline plugin is looking for a times array of objects with these keys so they must be defined.
info: d.tooltip
};
}, function(data) {
console.log(data);
function timelineRect() {
var colorScale = d3.scale.ordinal().range(['#ed5565','#ffce54','#48cfad','#5d9cec','#ec87c0','#ac92ec','#4fc1e9','#fc6e51','#a0d468','#656d78'])
.domain(['Pretest','Learning Path','Supplemental Info','Questions','Test Me','Remedial Page','Search Query','Recommended Reading','Search Results','Practice Questions']);
var chart = d3.timeline()
.colors( colorScale )
.colorProperty('event_type')
.rotateTicks(45)
.stack(); //necessary to unstack all of the labels
var svg = d3.select("#timeline1").append("svg").attr("width", width)
.datum(data).call(chart);
}
timelineRect();
});
}
</script>
</head>
<body>
<div>
<div id="timeline1"></div>
</div>
</body>
None of the examples define domain for this and, unfortunately, all of the example data is given in arrays, instead of from a CSV. How can I define the data so that each entry with the same student label will appear on the same timeline row?
Problem 1
You are not grouping your csv data this can be done like this:
What I mean is
//this will do the grouping
var k = d3.nest()
.key(function(d) {
return d.label;
}).entries(data);
var b = [];
//this will make it in the format expected by d3 time line
k.forEach(function(d) {
var ob = {};
ob.label = d.key;
ob.times = [];
b.push(ob);
d.values.forEach(function(v) {
ob.times.push(v.times);//collecting all the times
});
ob.times = [].concat.apply([], ob.times);
});
Problem 2
You have to define the tick format
.tickFormat({
format: d3.time.format("%d-%m"),
tickTime: d3.time.day,
tickInterval: 20,
tickSize: 6
})
Refer this for d3 time format
Your data set is very close on seconds and so the rectangle are coming very small..:( i tried my level best to span it up.. best of luck with it :)
Working code here
Hope this helps!
I have a requirement for a select html element that can be duplicated multiple times on a page. The options for these select elements all come from a master list. All of the select elements can only show all of the items in the master list that have not been selected in any of the other select elements unless they just were duplicated.
When you select a new item from a duplicated select element, it seems to select the option after the one you selected even though the model still has the correct one set. This always seems to happen in IE11 and it happens sometimes in Chrome.
I realize this sounds convoluted, so I created a jFiddle example.
Try these steps:
Select Bender
Click the duplicate link
Select Fry (on the duplicated select)
Notice that the one that is selected is Leela but the model still has Fry (id:2) as the one selected
Can anyone tell me how I might get around this or what I might be doing wrong?
Here is the relevant Angular code:
myapp.controller('Ctrl', function ($scope) {
$scope.selectedIds = [{}];
$scope.allIds = [{ name: 'Bender', value: 1},
{name: 'Fry', value: 2},
{name: 'Leela', value: 3 }];
$scope.dupDropDown = function(currentDD) {
var newDD = angular.copy(currentDD);
$scope.selectedIds.push(newDD);
}
});
angular.module('appFilters',[]).filter('ddlFilter', function () {
return function (allIds, currentItem, selectedIds) {
//console.log(currentItem);
var listToReturn = allIds.filter(function (anIdFromMasterList) {
if (currentItem.id == anIdFromMasterList.value)
return true;
var areThereAny = selectedIds.some(function (aSelectedId) {
return aSelectedId.id == anIdFromMasterList.value;
});
return !areThereAny;
});
return listToReturn;
}
});
And here is the relevant HTML
<div ng-repeat="aSelection in selectedIds ">
Duplicate
<select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
<option value="">--Select--</option>
</select>
</div>
Hi I have just made a small change in your dupDropDown function as follows
$scope.dupDropDown = function(currentDD) {
$scope.selectedIds.push({});
}
Please check if this works for you.
I have four CSVs with the same header information, each representing a quarterly result within a year.
Therefore for one result I can load it and display it into a dataTable simple via
d3.csv("data/first-quarter"), function(dataQ1){
dataQ1.forEach(function(d){
d.callTypes = d['Call Types'];
d.callDesc = d['Call Description'];
d.callVol = d['Call Volume'];
d.quarter = 'Q1';
});
var facts = crossfilter(dataQ1);
var timeDimension = facts.dimension(function(d){
return d.quarter;
});
dataTable
... //data table attributes
dc.renderAll();
});
However complications arise when I try to retrieve from multiple sources and append the results.
One approach I took was to place all the file path names into an array and iterate through a forEach, with a flag to show when it was the last iteration to render the table. But this failed with a "Too many recursion" error.
And the next was to nest as such
d3.csv(filesPathNames[0], function(dataQ1){
d3.csv(filesPathNames[1], function(dataQ2){
d3.csv(filesPathNames[2], function(dataQ3){
d3.csv(filesPathNames[3], function(dataQ4){
But both of these methods seem to not work due to the fact that I can't simply add one CSV value to another. So I think where I'm having an issue is that I'm not sure how to concatenate dataQ1, dataQ2, dataQ3, and dataQ4 properly.
Is the only solution to manually append one to another with an added value of Q1, Q2, Q3, and Q4 as the time dimension?
Like Lars said, you can use the queue library. Here is an example of how this might work:
Step 1) Queue up your files:
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
var q = queue()
.defer(d3.csv, "data/first-quarter")
.defer(d3.csv, "data/second-quarter");
Step 2) Wait for the files to load:
q.await(function(error, q1data, q2data) {
Step 3) Add the data to crossfilter:
var ndx = crossfilter();
ndx.add(q1data.map(function(d) {
return { callTypes: d['Call Types'],
callDesc: d['Call Description'],
callVol: d['Call Volume'],
quarter: 'Q1'};
}));
ndx.add(q2data.map(function(d) {
return { callTypes: d['Call Types'],
callDesc: d['Call Description'],
callVol: d['Call Volume'],
quarter: 'Q2'};
}));
Step 4) Use your cross filter as you wish:
var timeDimension = ndx.dimension(function(d){
return d.quarter;
});
dataTable
... //data table attributes
dc.renderAll();
Here is an example using this approach with the dc.js library: https://github.com/dc-js/dc.js/blob/master/web/examples/composite.html