I have created this JavaScript web editor that has a function called parse that creates divs and assigns output to divs. For example I use synchronous AJAX requests (data is outputted directly from the function without having to use a callback) toget data. The parser then evaluates and assigns a div. The plotly.js plot function however is not working at the moment. The plot function returns object promise and using asynchronous functions in this web editor does not seem to work very well. Is there a way to get the plot function to start working? What changes do I have to make to the plot function code?
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaS.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<style>
.input {
background-color: lightgreen;
width: 980px;
border: none;
font-size: 16px;
resize: none;
overflow: auto;
overflow-wrap: break-word;
}
.output {
background-color: lightblue;
width: 980px;
border: none;
font-size: 16px;
resize: none;
overflow-wrap: break-word;
}
#count {
background-color: lightblue;
color: black;
width: 25px;
height: 650px;
font-size: 17px;
resize: none;
overflow: auto;
border: none;
}
#calc {
background-color: lightblue;
overflow: scroll;
vertical-align: top;
border: none;
}
</style>
</head>
<body bgcolor="grey">
<table align="center" width="1000px" height="650px" bgcolor="lightblue">
<tr>
<td><textarea id="count" disabled>1 </textarea> </td>
<td id="calc"></td>
</tr>
</table>
<script> CreateInputDiv(); </script>
</body>
</html>
JavaS.js
// caret position in div on page load
function setfocus(a) {
a.focus();
}
// counts the number of input divs created
function increment() {
increment.n = increment.n || 0;
return ++increment.n;
}
// creates an input div
function CreateInputDiv() {
increment();
cc = increment.n;
console.log("increment.n = " + cc);
input = [];
output = [];
input.cc = document.createElement("div");
input.cc.setAttribute("id", JSON.stringify(input.cc));
input.cc.setAttribute("class", "input");
input.cc.innerHTML = " ";
input.cc.setAttribute("contenteditable", "true");
input.cc.setAttribute("onkeypress", "parse(event, this)");
document.getElementById('calc').appendChild(input.cc);
setfocus(input.cc);
}
function parse(e) {
var key = window.event.keyCode;
if (key == 13) { //keycode for enter
event.preventDefault();
var inz = input.cc.innerText;
// check if input contains a colon
if (inz.indexOf(':') > -1) {
var inz = input.cc.innerText.replace(/:/g, '');
console.log("input without colon = " + inz);
var outz = eval(inz);
console.log("out = " + outz);
document.getElementById("count").value += '\n' + eval(cc + 1);
CreateInputDiv();
}
else {
// counter
document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
// create output div
output.cc = document.createElement("div");
output.cc.setAttribute("id", JSON.stringify(output.cc));
output.cc.setAttribute("class", "output");
output.cc.setAttribute("tabindex", "0");
output.cc.setAttribute("contenteditable", "true");
document.getElementById('calc').appendChild(output.cc);
// calculate and assign output value to output div
console.log("input = " + inz);
var outz = eval(inz);
console.log("out = " + outz);
output.cc.innerHTML = outz;
// creates a new input div
CreateInputDiv();
}
}
}
// an array with random numbers between -1 and 1
function rand(n) {
x = [];
for (var i = 0; i < n; i++) {
x[i] = Math.random() * 2 - 1;
}
console.log("x = " + x);
return x;
}
// calculates the sum of a given array a
function sum(a) {
var z = 0;
for (var i = 0; i < a.length; i++) {
z = z + a[i];
}
return z;
}
// counts the number of elements in an array
function count(a){
var c = a.length;
return c;
}
// an array with a random walk
function rw(n) {
var x = [];
x[0] = 100;
for (var i = 1; i <= n; i++) {
x[i] = x[i - 1] + (Math.random() * 2 - 1);
}
return x;
}
// an array with data from a to b
function seq(a, b) {
var data = [];
for (var i = a; i <= b; i++) {
data.push(i);
}
return data;
}
function help() {
var x =
"1) Function rand(n) gives you a 1D array with length n with random numbers between -1 and 1." + "<br>" +
"2) Function rw(n) gives you a 1D array with length n with a pure random walk." + "<br>" +
"3) Function seq(a,b) gives you a 1D array with data from a to b." + "<br>" +
"4) Function sum(a) gives you a sum of a 1D array a." + "<br>" +
"5) Function count(a) counts the number of elements in array a." + "<br>" +
"6) Function plot(z) plots a 1D array z." + "<br>" +
"7) Function clear() gives you a clean input-, output- and plot- box plus restarts row counters." + "<br>" +
"8) Function help() gives you command help." + "<br>" +
"9) Function ticker() gives you the ticker symbols of the 100 crypto currencies with the largest marketcap" + "<br>" +
"10) Function crypto(ticker) gives you historial crypto currency price data for a specified ticker symbol string." + "<br>" + "11) Note that if you put a colon (:) after a input command the output will be hidden from view.";
return x;
}
function T(UNIX_timestamp) {
var MyDate = new Date(UNIX_timestamp * 1000);
var MyDateString = MyDate.getFullYear() + '-' + ('0' + (MyDate.getMonth() + 1)).slice(-2) + '-' + ('0' + MyDate.getDate()).slice(-2);
return JSON.stringify(MyDateString);
}
function ticker() {
var ApiKey = "ddd85b386e1a7c889e468a4933f75f22f52b0755b747bdb637ab39c88a3bc19b";
var urlA = "https://min-api.cryptocompare.com/data/top/mktcapfull?limit=100&tsym=USD&api_key=" + ApiKey;
var result = null;
$.ajax({
url: urlA,
async: false, // makes a synchronous data call to cryptocompare's api
dataType: "json",
success: function (data) { result = data; }
});
var y = result.Data;
var A = [];
for (var i = 0; i < y.length; i++) {
A.push([y[i].CoinInfo.Name]);
}
return A;
}
function crypto(ticker) {
var ApiKey = "ddd85b386e1a7c889e468a4933f75f22f52b0755b747bdb637ab39c88a3bc19b";
var urlA = "https://min-api.cryptocompare.com/data/histoday?fsym=" + ticker + "&tsym=USD&limit=1000&api_key=" + ApiKey;
var result = null;
$.ajax({
url: urlA,
async: false, // makes a synchronous data call to cryptocompare's api
dataType: "json",
success: function (data) { result = data; }
});
var y = result.Data;
var D1 = [];
var D2 = [];
for (var i = 0; i < y.length; i++) {
D1.push(T(y[i].time));
D2.push(y[i].close);
}
console.log(D2);
return D2;
}
// clears the input and output boxes
function clear() {
event.preventDefault();
increment.n = -1;
document.getElementById('box').value = "";
return "";
};
// plots a give data array
function plot(z) {
var yy = z;
var xx = [];
for (var i = 0; i <= yy.length; i++) {
xx[i] = JSON.stringify(i);
}
var data = [{
x: xx,
y: yy,
type: 'scatter',
line: { color: 'green', width: 2 }
}];
var layout =
{
width: 500,
height: 200,
paper_bgcolor: 'lightblue',
plot_bgcolor: 'lightblue',
margin: { l: 60, b: 60, r: 20, t: 20 },
title: "",
xaxis: {
title: 'x-axis', titlefont: {
family: 'Courier New, monospace', size: 18,
color: 'black'
}
},
yaxis: {
title: 'y-axis', titlefont: { family: 'Courier New, monospace', size: 18, color: 'black' },
width: 1000, height: 380,
xaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true, tickmode: "linear",
gridcolor: 'black', linecolor: 'black'
},
yaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true,
gridcolor: 'black', linecolor: 'black'
}
}
};
console.log("cc = " + cc);
var pl = output.cc;
return Plotly.plot(pl, data, layout, { displayModeBar: false, staticPlot: true });
}