Related
I'm new at Javascript and i'm trying to pull data from multiple XML files.
Right now i have maneged to create 5 rows of data, but all rows contains data from the same file.
I have been trying to store the data in another array than the original one, but nothing i have tried seems too work.
My HTML code is here:
<body>
<button type="button" onclick="loadXMLDoc()" >Get my PTO DATA</button>
<br><br>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
And Javascript here:
var arr = ["018338464.xml", "018340087.xml", "018340096.xml", "018340106.xml", "018340153.xml"],
cnt = 0, xmlhttp = new XMLHttpRequest(), method = "GET";
function loadXMLDoc() {
xmlhttp.open(method, arr[cnt], true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status == 200) {
buildTable();
}
};
xmlhttp.send();
}
function buildTable(file, xmlDoc) {
var i;
var a = 1
var xmlDoc = xmlhttp.responseXML;
var table = "<tr><th>DisplayNumber</th><th>Client</th><th>IpgClientId</th><th>Location</th><th>PracticeArea</th><th>Type</th><th>Application number</th><th>Application date</th><th>Classes</th><th>Class description</th><th>Status</th></tr>";
var x = xmlDoc.getElementsByTagName("Transaction");
for (var d = 0; d < arr.length; d++) {
console.log(`${d}: ${arr[d]}`);
var store = new Array();
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TransactionIdentifier")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkVerbalElementText")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("Identifier")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("RegistrationOfficeCode")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TransactionCode")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkFeature")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ApplicationNumber")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ApplicationDate")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ClassNumber")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("GoodsServicesDescription")[2].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkCurrentStatusCode")[0].childNodes[0].nodeValue +
"</td></tr>";
}
store[d] = a;
a++;
}
document.getElementById("demo").innerHTML = table;
}
All feedback are welcome, i'm also open to redo it all if someone has a better solution to my problem
You always load arr[cnt], and cnt is always zero. If you want loadXMLDoc to load the entire set, then you want
function loadXMLDoc() {
arr.forEach( function(name) {
xmlhttp.open(method, name, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status == 200) {
buildTable();
}
};
xmlhttp.send();
});
}
When running this script on p5 js's sandbox it's working really fine
When trying to use it inside react i get : Expected an assignment or function call and instead saw an expression no-unused-expressions
I checked previous questions and found out that most of the problems are syntax ones due to not using brackets or semicolons . I did all the good syntax practices but didn't get to make it function
Here is my sketch code on react :
export default function sketch(p){
var t;
var canvas ;
var w = window.innerWidth;
var h = window.innerHeight;
var x , y , d , T;
p.setup=()=>{
// put setup code here
t=0;
}
p.draw = () => {
canvas =p.createCanvas(w-50, h-50);
canvas.style('display','block');
var x_center = (p.windowWidth - w) / 2;
var y_center = (p.windowHeight - h) / 2;
canvas.position(x_center, y_center);
t += .01;
for (var j = 2; x = y = j--;){
for (var i = w; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6){
j ? i - w / 2 || ( T = p.translate)(-x, -y) : p.push() + T(x + w / 2, y + w / 2) + p.rotate(d + Math.PI / 4) + p.line(-600, 100, 600, 100) + p.pop(i % 100 || p.scale(80));
}
}
}
window.onresize = function() {
// assigns new values for width and height variables
w = window.innerWidth;
h = window.innerHeight;
canvas.size(w,h);
}
}
Write out p.translate(x, y) every time rather than using T = p.translate and then T(x, y), e.g.,
export default function sketch(p){
let t;
let canvas ;
let w = window.innerWidth;
let h = window.innerHeight;
let x ; let y ; let d ;
p.setup=()=>{
canvas =p.createCanvas(w-50, h-50);
canvas.style('display','block');
// put setup code here
t=0;
const x_center = (p.windowWidth - w) / 2;
const y_center = (p.windowHeight - h) / 2;
canvas.position(x_center, y_center);
}
p.draw = () => {
p.background(255);
t += .0008;
for (let j = 2; x = y = j--;){ // j >0
for (let i = w-200; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6, i>0){ // i >0
j ? i - w / 2 || p.translate(-x, -y) : p.push() + p.translate(x + w / 2, y + w / 2) + p.rotate(d + Math.PI / 4) + p.line(-600, 100, 600, 100) + p.pop(i % 100 || p.scale(80));
}
}
}
}
Your initial version does not work because in instance mode translate() is a method belonging to p, and thus wants to access other methods or fields of p. The function T that you defined along the way, however, does not belong to p and thus does not have access to any this.foos.
link to error message2 days back google chrome automatically updated to version 66. Since then my site which was running perfectly stopped working in google chrome. But it works perfectly in firefox and edge. So i started debugging in google chrome, then i found that the problem is with ajax calls. So initially for the main page, many ajax call will be hit. in that list of calls ,the last call executes the success part more than once. So when the susscess of response is executing for the second time it throws aw snap,page cannot be displayed error in chrome. Then i restricted the success call to once using some flag,then the main page was loading. But after submitting in left panel,the same ajax call will get hit, so now at this point i'm getting the same aw snap error. i'm using angularjs ajax. So please help me with this. when i debug i get below error message in console
error message in console
As discussed in comment this function of d3.js code causes the application to crash.So when i commented this except this chart all other things are working
var carbon = new Charts();
var chart = d3.select(this.selector);
var width = carbon.pixToVal(chart.style("width"));
var height = carbon.pixToVal(chart.style("height"));
/*var width=475;
var height=133;*/
/*var maxVal =100;*/
var maxVal =d3.max(jsonData,function(d){return d.current;})+ 15;
var length1=jsonData.length;
var newWidthParts=newWidth/10;
/*console.log(length1);
console.log(newWidth);*/
var newHeightParts=height/10;
var conatinerRectHt=newHeightParts*6.5;
/*var boxHeight=(newHeightParts*9-newHeightParts*2.5)/5;*/
var margin={
top: 15, left:15,right:15,bottom:20
}
var availableWidth = width - margin.left - margin. right;
var newWidth= availableWidth/length1;
var availableHeight = height - margin.top - margin.bottom;
var HeightForTopLabel =15;
var HeightForBottomLabel = 15;
var HeightOfAbsValue = 15;
var HeightForMidLabel = 15;
var OuterRectHeight= availableHeight - (HeightForBottomLabel) - HeightForTopLabel; /*- HeightOfAbsValue;*/
/* var BottomTextYPosition = margin.top + HeightForTopLabel + OuterRectHeight + HeightForBottomLabel ;
*/
var outerRectBottomYPosition = margin.top + HeightForTopLabel +OuterRectHeight;
//outerRectTopYPosition + OuterRectHeight
var outerRectTopYPosition = margin.top + HeightForTopLabel;
var BottomTextYPosition = height - margin.bottom;
var outerRectWidth = 50;
var innerRectWidth =8;
var outerRectDistFromLeft = newWidth/2 - outerRectWidth/2 + margin.left ;
var innerRectDistFromLeft = newWidth/2 - innerRectWidth/2 + margin.left ;
var creatSvg = chart.append("div").attr("class", "chartBox9")
.style("position", "absolute")
.style("height", "100%")
.style("width", "100%")
.append("svg").attr('id','defsGrad')
.attr("width", width)
.attr("height", height);
d3.select("#defsGrad")
.append("text").attr("x",availableWidth - 1.8*(margin.left + margin.right) )
.attr("y",height-5)
.attr("id","shareContritext")
.text("% Room Revenue")
.attr("font-size",10.5);
d3.select("#defsGrad").append("defs").append("linearGradient").attr('id','grad1')
.attr({'x1':'0%','y1':'100%','x2':'0%' ,'y2':'0%'}).append('stop')
.attr('offset',"0%").style({'stop-color':'rgb(215,214,214)','stop-opacity':'0.7'});
d3.select('#grad1').append('stop')
.attr('offset',"100%").style({'stop-color':'rgb(249,249,249)','stop-opacity':'0.9'});
svgContainer=creatSvg.selectAll('g')
.data(jsonData).enter()
.append("g")
.attr("transform",function(d,i){
var res = "translate(";
var val = i*newWidth;
return res+val+" 0)";
});
svgContainer.append("text")
.attr("y", margin.top)
.attr("font-size",fontsize)
.text(function(d) {
if( d.current == null){
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 5);
return "N/A";
}else
{
var xposition = outerRectDistFromLeft + (outerRectWidth/5+4);
var nbr = d.current;
// var decimals = (nbr!=Math.floor(nbr))?(nbr.toString()).split('.')[0].length:0;
var decimals;
if(nbr % 1 !== 0)
{
decimals = (nbr!=Math.floor(nbr))?(nbr.toString()).split('.')[0].length:0;
}else
{
decimals = nbr.toString().length;
}
d3.select(this).attr("x",xposition-(decimals-1)*4);
if(d.change==null)
{
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 5);
}
return d.current_prefix + d.current.toFixed(1) + d.current_suffix;}
});
var rectangle1 = svgContainer.append("rect")
.attr("class","outerRect9")
.attr("x", outerRectDistFromLeft)
.attr("y",outerRectTopYPosition)
.attr("width", outerRectWidth)
.attr("height", OuterRectHeight)
.attr("fill", "url(#grad1)");
svgContainer.append("text")
.attr("y", margin.top + HeightForTopLabel -2 )
.attr("fill",
function(d){
var colorChange="";
if(d.change>=0.0)
colorChange="#06C10C";
else
colorChange="#F7063A";
return colorChange;
}
)
.attr("font-size",fontsize)
.text(function(d) {
if( d.change == null){
d3.select(this).attr("fill","black");
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 7);
return "N/A";
}else{
var pre ="";
if(d.change>=0.0)
pre="+";
/*if(d.current!=null)
{
d3.select(this).attr("x", outerRectDistFromLeft + outerRectWidth/5+3 );
}*/
var xposition = outerRectDistFromLeft + outerRectWidth/5;
/* if(d.current =! null){
d3.select(this).attr("x", xposition);
}
else
{
d3.select(this).attr("x", xposition);
}*/
d3.select(this).attr("x", xposition);
return pre+d.change.toFixed(1)/*+d.change_suffix*/;}
});
var rectangle0=svgContainer.append('rect') .attr("x", innerRectDistFromLeft)
.attr("y",outerRectTopYPosition).attr('width',8).attr('height',OuterRectHeight)
.attr('fill','#BDBDB7').attr('opacity',0.5);
var rectangle2=svgContainer.append('rect') .attr("x", innerRectDistFromLeft)
.attr("y", function(d) {
if(d.current == null){return (margin.top + HeightForTopLabel +OuterRectHeight);}
else{ return (margin.top + HeightForTopLabel +OuterRectHeight) - ((d.current/maxVal)*OuterRectHeight);}
}).attr('width',8).attr('height',function(d) {
if(d.current == null){
return 0;
}
else{ return ((d.current/maxVal)*OuterRectHeight);}
}).attr('fill',function(d,i){return d.color_code;});
var data1 = d3.range(5)
var c = d3.scale.ordinal()
.domain(data1)
.rangeBands([outerRectBottomYPosition + 1.5 ,outerRectTopYPosition ])
var innerRect= svgContainer.selectAll('.inners')
.data(data1)
.enter()
.append('rect').attr('class','inners')
.attr('y',function(d) { return (c(d));/*return Math.round(c(d))*/ })
.attr('x',innerRectDistFromLeft )
.attr('width',8)
.attr('height',(OuterRectHeight/5) )/*+ (1.5*3)*/
.style('stroke','#F6F6F6')
.style('stroke-width','1.2')
.style('fill', "none");
svgContainer.append("text")
.attr("x",function(d,i){
var name =d.name;
var lengthOfText = name.length;
if(lengthOfText > 2){
return outerRectDistFromLeft + outerRectWidth/3 - lengthOfText*2;
}
else {
return outerRectDistFromLeft + outerRectWidth/3;
}
} )
.attr("y", BottomTextYPosition)
.attr("font-size",fontsize)
.text(function(d) {
return d.name;
})
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
function handleMouseOver(d, i) {
creatSvg.append("rect").attr({
id: "tooltipvaluebox",
y: BottomTextYPosition,
height: 20,
fill:"#CACACE",
})
.attr("x",function(){
var len = (d.fullName.length*10)+20;
var val = newWidth*i;
if((val+len)>width){
var diff = (val+len) - width;
val = val - (diff+5);
}
return val+8;
} )
.attr("width",function(){
var len = d.fullName.length;
return (len*10)+20;
});
creatSvg.append("text").attr({
id: "tooltipvalue",
y: BottomTextYPosition+15
})
.attr("x",function(){
var len = (d.fullName.length*10)+20;
var val = newWidth*i;
if((val+len)>width){
var diff = (val+len) - width;
val = val - (diff+5);
}
return val+8;
} )
.text(function() {
return d.fullName ;
})
.attr('fill','black')
.style("font-family", "roboto");
};
function handleMouseOut(d, i) {
d3.select("#tooltipvaluebox").remove();
d3.select("#tooltipvalue").remove();
};
Chrome Version 66 for Windows seems to have a critical Bug in the DEV Engine. I think it's related to the meltdown hotfix in version 66. Its already fixed in Dev Channel V 68.x
I'm writing a Leaflet plugin that extends the polyline functionality. In the my plugin I'm accessing the path segments using the SVGPathSegList interface. But according to the Chrome DevTools the interface will be removed in Chrome 48. I'm seeking for another possibility to access the the path segments.
Here's my fiddle.
(function () {
var __onAdd = L.Polyline.prototype.onAdd,
__onRemove = L.Polyline.prototype.onRemove,
__updatePath = L.Polyline.prototype._updatePath,
__bringToFront = L.Polyline.prototype.bringToFront;
L.Polyline.include({
onAdd: function (map) {
__onAdd.call(this, map);
this._textRedraw();
},
onRemove: function (map) {
__onRemove.call(this, map);
},
bringToFront: function () {
__bringToFront.call(this);
this._textRedraw();
},
_textRedraw: function () {
var textNodes = this._path.parentElement.getElementsByTagName('text'),
tnIndex;
if (textNodes.length > 0) {
for (tnIndex = textNodes.length - 1; tnIndex >= 0; tnIndex -= 1) {
textNodes[tnIndex].parentNode.removeChild(textNodes[tnIndex]);
}
}
if (this.options.measurements) {
this.setText();
}
},
setText: function () {
var path = this._path,
points = this.getLatLngs(),
pathSeg,
prevPathSeg,
center,
angle,
rotation,
textNode;
/*
* If not in SVG mode or Polyline not added to map yet return
* setText will be called by onAdd, using value stored in this._text
*/
if (!L.Browser.svg || typeof this._map === 'undefined') {
return this;
}
for (pathSeg = 0; pathSeg < path.pathSegList.length; pathSeg += 1) {
if (pathSeg > 0) {
prevPathSeg = path.pathSegList[pathSeg - 1];
center = this._calcCenter(
prevPathSeg.x,
prevPathSeg.y,
path.pathSegList[pathSeg].x,
path.pathSegList[pathSeg].y
);
angle = this._calcAngle(
prevPathSeg.x,
prevPathSeg.y,
path.pathSegList[pathSeg].x,
path.pathSegList[pathSeg].y
);
rotation = 'rotate(' + angle + ' ' +
center.x + ',' + center.y + ')';
debugger;
textNode = document
.createElementNS('http://www.w3.org/2000/svg', 'text');
textNode.setAttribute('text-anchor', 'middle');
textNode.setAttribute('x', center.x);
textNode.setAttribute('y', center.y);
textNode.setAttribute('transform', rotation);
textNode.textContent = points[pathSeg - 1]
.distanceTo(points[pathSeg]);
this._path.parentElement.appendChild(textNode);
} else {
continue;
}
}
},
_calcCenter: function (x1, y1, x2, y2) {
return {
x: (x1 + x2) / 2,
y: (y1 + y2) / 2
}
},
_calcAngle: function (x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
},
_updatePath: function () {
__updatePath.call(this);
this._textRedraw();
}
});
})();
#holger-will gave some very useful links.
You can modify your js code to use the new API.
for example:
Use var pathData = path.getPathData() instead of old var segs = path.pathSegList;
Use pathData[1].values[4] instead of old path.pathSegList.getItem(1).x
Use path.setPathData(pathData) to update the path element instead of old path.pathSegList.appendItem/insertItem/removeItem
Include the path-data-polyfill.js for browsers which have not supported the new API.
(Chrome 50 still has not implemented getPathData and setPathData. There may be a long way...)
Here is a code sample:
//svg code:
//...
//<path d="M0,0 L100,50" id="mypath"></path>
//<script href="/js/path-data-polyfill.js"></script>
//...
//js code:
var path = document.getElementById('mypath');
var pathdata = path.getPathData();
console.log(pathdata);
console.log(pathdata.length); //2
console.log(pathdata[0].type); //"M"
console.log(pathdata[0].values); //[0,0]
console.log(pathdata[1].type); //"L"
console.log(pathdata[1].values); //[100,50]
pathdata.push({type: "C", values: [100,-50,200,150,200,50]}); //add path segment
path.setPathData(pathdata); //set new path data
console.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50"
path data polyfill: https://github.com/jarek-foksa/path-data-polyfill
I have a working raphael.js fiddle : http://jsfiddle.net/El4a/sbxjfafx/10/
Now, I need the created svg inside my angular-meteor project. I need it on several places so it has to be abstract. So first question already: should I use a factory or a directive for this?
I've been trying to make it a factory for now, but to be honest, I have no idea what I'm doing. I don't have any errors, but the image doesn't show up.
This is the raphael code inside a factory :
'use strict';
angular.module('timeAppApp').factory('svgFactory', function($rootScope){
Raphael.fn.pieChart = function (cx, cy, r, values) {
var paper = this,
rad = Math.PI / 180,
chart = this.set();
function sector(cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var bcolors = ['#d667cd','#3D8C1E','#00b9ff'];
var colors = ['FF5DF4','#69F233', '#0080B0'];
var angle = 0,
total = 0,
start = 0,
process = function (j) {
var value = values[j],
angleplus = 360 * value / total,
popangle = angle + (angleplus / 2),
// color = "hsb(" + start + ", 1, .5)",
color = colors[j%colors.length],
ms = 500,
delta = 30,
//bcolor = "hsb(" + start + ", 1, 1)",
bcolor = bcolors[j%bcolors.length],
p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "100-" + bcolor + "-" + color}),
txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad));
angle += angleplus;
chart.push(p);
chart.push(txt);
start += .1;
};
for (var i = 0, ii = values.length; i < ii; i++) {
total += values[i];
}
for (var i = 0; i < ii; i++) {
process(i);
}
return chart;
};
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
var r;
var svg = function (raphael) {
$(function () {
var values = [20, 60, 20];
r = raphael("svg", 700, 700);
r.pieChart(350, 350, 100, values, "#fff");
r.circle(350, 350, 85).attr({ fill: 'white' });
})
};
svg(raphael);
return{r : r};
When I debug in the browser, it shows that all the raphael functions get skipped. I havent a clue as to why.
The console says : "ReferenceError: raphael is not defined",
but when I watch Raphael I get a running version :
"Raphael: Your browser supports SVG. You are running Raphaël 2.1.2"
So I'm trying to get the div with id "svg", and draw the image inside that. This does not happen and the div remains empty.
I have injected the new factory
angular.module('timeAppApp')
.controller('ProjectDetailController', function($scope, $meteor, $state, $stateParams, svgFactory)
and try to draw the image in the matching view. <div id="svg"></div>
I know I'm probably doing 127things wrong and raphael/angular enthousiast are crying blood, but I really don't know what :(
As an added plus, I also kinda need to be able to pass 3 values to the factory, instead of having them hardcoded.
Thanks in advance for drudging through this mess!
I'm not sure how, but it all worked out. I ditched the factory idea, and used a directive. This worked without any issues.