✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Issues with my Time Series Code

Graphing Library Plotly.js
#1

Using Plotly for the first time to make a time series and not sure what’s going on. Any help would be greatly appreciated!

Plotly.d3.csv("/Users/matthewsexton/Desktop/bitcoin.csv", function(err, rows){

function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}

var trace1 = {
type: “scatter”,
mode: “lines”,
name: ‘Bitcoin Opening Price’,
x: unpack(rows, ‘Date’),
y: unpack(rows, ‘Open’),
line: {color: ‘#17BECF’}
}

var trace2 = {
type: “scatter”,
mode: “lines”,
name: ‘Bitcoin Closing Price’,
x: unpack(rows, ‘Date’),
y: unpack(rows, ‘Close’),
line: {color: ‘#7F7F7F’}
}

var data = [trace1,trace2];

var layout = {
title: ‘Bitcoin Stock Price’,
};

Plotly.newPlot(‘myDiv’, data, layout);
})

</script>
#2

Seeing that I should be referencing plotly and needed to add the following line to call the function.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Here is my most recent code:

<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="/Users/matthewsexton/Desktop/bitcoin.csv"></script>
</head>
<body>
<div id="myDiv" style="width:1200px;height:2250px;"></div>
  <script>

Plotly.d3.csv("/Users/matthewsexton/Desktop/bitcoin.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}


var trace1 = {
  type: "scatter",
  mode: "lines",
  name: 'Bitcoin Opening Price',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'Open'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  name: 'Bitcoin Closing Price',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'Close'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
  title: 'Bitcoin Stock Price',
};

Plotly.newPlot('myDiv', data, layout);
})
    
    </script>
</body>
</html>

** Is Style w/ width and height even necessary with plotly?

#3

Can you describe what you’re seeing to help us debug? More specifically, are you seeing any console errors?

A few tips:

No.

Won’t do anything. A csv file isn’t a script.

Make sure that your dev server is serving up this file. Moving bitcoin.csv to the same directory as your HTML file should do the trick.

#4

I wasn’t seeing anything - i think because I was opening it on chrome. Just opened it up on firefox and its working, thanks guys!