I have a CSV file with 3 columns: stock, date, price
I would like to plot it using Plotly.js as multiple lines (1 per stock).
Do I need to unpack each stock to a variable 'manually' or is there a function for doing this? (I've searched the docs and couldn't find anything)
It might be better to arrange the CSV file so that the header row is ['Date','StockA','StockB','StockC']. Then each following row is ['actual_date','PriceA','PriceB','PriceC']. This way, you can run the javascript map function to output to individual traces.
I recently pieced together something like this but cannot find the links to credit at the moment:
<div id=chartID></div>
<script>
Plotly.d3.csv('/chart_data.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) {return row[key]; });
}
var trace1 = {
type: "scatter",
mode: "lines",
name: "StockA",
x: unpack(rows, 'Date'),
y: unpack(rows, 'StockA'),
line: {
color: '#FF8700',
width: 3,
shape: "spline"
}
}
var trace2 = {
type: "scatter",
mode: "lines",
name: "Stock B",
x: unpack(rows, 'Date'),
y: unpack(rows, 'StockB'),
line: {
color: '#81827F',
width: 3,
shape: "spline"
}
}
var trace3 = {
type: "scatter",
mode: "lines",
name: "Stock C",
x: unpack(rows, 'Date'),
y: unpack(rows, 'StockC'),
line: {
color: '#04824C',
width: 3,
shape: "spline"
}
}
var data = [trace1, trace2, trace3];
var layout = {
// Put your visual settings here
};
Plotly.newPlot('chartID', data, layout);
})
</script>
