plotJS.js:106:5 TypeError: cannot use 'in' operator to search for 'bardir' in '{x:Time-1,Time-2...'

plotly.js
1

I have just been doing JavaScript and HTML programming for a couple of months so I am still learning. However, I dont like like the fact that plotly.js uses curly brackets like this:

trace[1] = { x: xx, y: yy[1], type: 'scatter' };

My understanding so far is that in JavaScript curly brackets are for JavaScript functions and
regular brackets [ ] are for JavaScript Arrays. I therefore think plotly.js should use regular
brackets like this:

trace[1] = [ x: xx, y: yy[1], type: 'scatter' ];

That would make things a lot simpler. I have been wasting the my whole day because of the curly barackets.

My below plotly.js code has an error message:

"plotJS.js:106:5 TypeError: cannot use ‘in’ operator to search for ‘bardir’ in ‘{x:Time-1,Time-2…’ "

The foor loop that is causing the problem is this one:

// JavaScript for loop not working
for (var j = 1; j <= Nc; j++) {
trace[j] = “{” + “x:” + xx + “,” + “y:” + yy[j] + “,” + “type:” + ‘scatter’ + “}”;
}

If I comment out that loop and hard code it like this:

trace[1] = { x: xx, y: yy[1], type: 'scatter' };
trace[2] = { x: xx, y: yy[2], type: 'scatter' };
trace[3] = { x: xx, y: yy[3], type: 'scatter' };
trace[4] = { x: xx, y: yy[4], type: 'scatter' };
trace[5] = { x: xx, y: yy[5], type: 'scatter' };

Then the plotly.js plot is generated sucessfully but I dont want to hard code it like that because
I want to make the code more generic so I can simulate and plot 100 pure unit roots without
having to type in all those trace variables.

My HTML code ( Plot HTML.html ):

<!DOCTYPE html>
<html>

<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="plotJS.js"></script>
<meta charset="utf-8" />
<style>
    table {
        border-collapse: collapse;
        text-align: center;
    }
    table,
    td,
    th {
        border: 1px solid black;
    }
</style>
</head>
<body>

<div id="div1"> </div>
<div id="div2"> </div>

<script>
    var data = RandomWalk(10, 5);
    htmlTable(data);
    Plot(data);

</script>
</body>

My JavaScript code ( plotJS.js ) :

function GetRandom(min, max) {
var x = Math.random() * (max - min) + min;
return x;
}

function ArraySelect(DataArray, row_start, column) {

var Nr = DataArray.length;
var Nc = DataArray[1].length;

var D = [];

for (var i = row_start; i < Nr; i++) {
    D.push(DataArray[i][column]);
}
return D;
}


function RandomWalk(rows, cols) {
var arr = [];

for (var i = 0; i < rows + 1; i++) {
    arr.push([]);
    arr[i].push(new Array(cols));

    if (i == 1) {
        for (var j = 1; j <= cols; j++) {
            arr[1][j] = 100;
        }
    }
    else if (i > 1) {
        for (var j = 1; j <= cols; j++) {
            arr[i][j] = arr[i - 1][j] + GetRandom(-1, +1);
        }
    }
    else {
        for (var j = 1; j <= cols; j++) {
            arr[i][j] = "Random Walk " + j;
        }
    }
}

for (var i = 1; i <= rows; i++) {
    arr[i][0] = "Time-" + i;
}

arr[0][0] = "2D Array";
console.log(arr);
return arr;
}


function htmlTable(d) {
var data = d;
var html = '<table><thead><tr></tr></thead><tbody>';

for (var i = 0; i < data.length; i++) {
    html += '<tr>';
    for (var j = 0; j < data[i].length; ++j) {
        html += '<td>' + data[i][j] + '</td>';
    }
    html += "</tr>";
}
$(html).appendTo('#div1');
}

function Plot(DD) {
console.log("DD = " + DD);
var xx = ArraySelect(DD, 1, 0);
console.log("xx = " + xx);
var Nc = DD[1].length - 1;
console.log("Nc = " + Nc);

var yy = [];

for (var j = 1; j <= Nc; j++) {
    yy[j] = ArraySelect(DD, 1, j);
}

console.log("yy1 =" + yy[1]);
console.log("yy2 =" + yy[2]);

var trace = [];

// JavaScript for loop not working 
for (var j = 1; j <= Nc; j++) {
    trace[j] = "{" + "x:" + xx + "," + "y:" + yy[j] + "," + "type:" + 'scatter' + "}";
}


/* 
trace[1] = { x: xx, y: yy[1], type: 'scatter' };
trace[2] = { x: xx, y: yy[2], type: 'scatter' };
trace[3] = { x: xx, y: yy[3], type: 'scatter' };
trace[4] = { x: xx, y: yy[4], type: 'scatter' };
trace[5] = { x: xx, y: yy[5], type: 'scatter' };
*/

console.log("trace1 = " + trace[1]);
console.log("trace5 = " + trace[5]);

var data = [trace[1], trace[2], trace[3], trace[4], trace[5]];

Plotly.newPlot('div2', data, { showlegend: false, xaxis: { tickmode: "linear", dtick: 1 } }, {   displayModeBar: false });
}
2

Hmm. Where does that plotJS.js come from? It doesn’t look like something Plotly released.

3

the plotJS.js file is just a JavaScript file that I have written where I keep all my JavaScript functions that I want to call from the HTML file. The plotJS.js file is located in the same folder on my computer as the above HTML file. I think it is good programming practice to keep things organized, simple and to store JavaScript functions separate from HTML. That keeps the HTML mean and lean.

plotJS.js file is the same file that I mistakenly called “PlotJS.js” (with capitalized P) above. I did not make the same mistake on my computer and that is not what is causing the problem.

Note : I have now edited the above post to correct the file name to plotJS.js.

The problem source is the above identified for loop and a somewhat demanding plotly.js syntax.

4

I have my managed to solve the problem myself. The code for the working function Plot(DD) is below:

function Plot(DD) {
console.log("DD = " + DD);
var xx = ArraySelect(DD, 1, 0);
console.log("xx = " + xx);
var Nc = DD[1].length - 1;
console.log("Nc = " + Nc);

var yy = [];
var trace = [];
var data = [];

for (var j = 1; j <= Nc; j++) {
    yy[j] = ArraySelect(DD, 1, j);
    trace[j] = { x: xx, y: yy[j], name: 'Random Walk ' + j, type: 'scatter' };
    data.push(trace[j]);
    console.log(trace[j]);
}

 Plotly.newPlot('div2', data, { showlegend: false, xaxis: { tickmode: "linear", dtick: 1 } }, { displayModeBar: false });
}

If you replace the old Plot(DD) function code with the new code you get:

Plotly%20graph
Plotly graph.JPG2509×1358 364 KB

which is exactly what I want. I can now simulate and plot a large number of random walks on the same chart with little effort.

I have added the code to my github repository

Please see github pages for working code

https://cryptomanxxx.github.io/RandomWalksPlusHtmlTablePlusPlot/