CODEWITHSUNDEEP
javascriptplotly.js
user10993028
user10993028

Reputation:

Title: TypeError: Plotly.newPlot(...).Promise is undefined

If I use the below line of code: 

return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ;

in the below plotly plot function and call plot(crypto("BTC")) in the online code editor I get

[object Promise]

and if I change the above line of code to:

 CreateInputDiv();
 return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();

then I get the plot in the online code editor but then I also get the following error in the console.log

TypeError: Plotly.newPlot(...).Promise is undefined

I doubt I am doing thing correctly because I have a hard time understanding how async functions and promises work. The solution to my problem might be very simple or not. If the above code was working correctly I would not have to create a new input div because function parse() creates input and output divs and I would also not get an error in the console log. How can the error message in the console.log be solved?

JavaS.js and HTML below

// 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 = document.createElement("div");
  input.setAttribute("id", "input" + cc);
  input.setAttribute("class", "input");
  input.innerHTML = "&nbsp";
  input.setAttribute("contenteditable", "true");
  input.setAttribute("onkeypress", "parse(event, this)");
  document.getElementById('calc').appendChild(input);
  input.focus();
}

// creates an output div 
function CreateOutputDiv() {
  output = document.createElement("div");
  output.setAttribute("id", "output" + cc);
  output.setAttribute("class", "output");
  output.setAttribute("tabindex", "0");
  output.setAttribute("contenteditable", "false");
  document.getElementById('calc').appendChild(output);
}

function parse(e1, e2) {
  console.log("e2 = " + e2);
  if (e1.keyCode == 13) { // keycode for enter 
    event.preventDefault();
    var inId = e2.id;
    console.log("inId = " + inId);
    var outId = "output" + inId.substring(5);
    console.log("outId = " + outId);

    var inz = input.innerText;

    // check if input contains a colon. Hides output if colon exist. 
    if (inz.indexOf(':') > -1) {
      var inz = input.innerText.replace(/:/g, '');
      console.log("input with colon = " + inz);
      var outz = eval(inz);
      console.log("hidden out = " + outz);
      document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
      CreateOutputDiv();
      CreateInputDiv();
    }
    else { // no colon = display and revaluate input
      if (document.getElementById(outId)) {
        console.log("Already created");
        inz = document.getElementById(inId).innerText;
        console.log("inz = " + inz);
        var outz = eval(inz);
        console.log("outz = " + outz);
        document.getElementById(outId).innerHTML = outz;
        input.focus();
      }
      else { // no colon = display create new lines 
        document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
        CreateOutputDiv();
        // calculate and assign output value to output div  
        // console.log("input = " + inz);
        var outz = eval(inz);
        // console.log("out z = " + outz);
        output.innerHTML = outz;
        CreateInputDiv();
      }
    }
  }
}


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 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 synchrously data call to cryptocompare
    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;
}


// 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: 700,
    height: 300,
    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'
      }
    }
  };
  cc = increment.n;
  div1 = 'output' + cc;

// return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ;  // object promise

 CreateInputDiv();
 return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();


}
<!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;
    }
    .output {
      background-color: lightblue;
      width: 980px;
      line-height: 20px;
      border: none;
      font-size: 16px;
      resize: none;
      overflow-wrap: break-word;
    }

    #count {
      background-color: lightblue;
      color: black;
      width: 25px;
      height: 500px;
      font-size: 17px;
      resize: none;
      border: none;
    }

    #calc {
      background-color: lightblue;
      vertical-align: top;
      border: none;
      overflow: hidden;
    }
  </style>
</head>

<body bgcolor="grey">
  <table align="center" width="1000px" height="500px" bgcolor="lightblue" overflow="hidden">
    <tr>
      <td><textarea id="count" disabled>1 </textarea> </td>
      <td id="calc"></td>
    </tr>
  </table>

  <script>   CreateInputDiv();   </script>

</body>

</html>

Upvotes: 1

Views: 1402

Answers (1)

user10993028
user10993028

Reputation:

A working solution to the above plotting problem can be found below. Replace the line 

return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ;  // object promise

in the plot function with

 setTimeout(function(){Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true });}, 10);
 return "";

That will give you the plotly.js plot in the web editor without getting [object Promise] or any error messages in the console log.

Upvotes: 1

Related Questions