<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
</html>
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function (err, rows) {
function unpack(rows, key) {
return rows.map(function (row) {
return row[key];
});
}
var trace1 = {
type: "scatter",
mode: "lines",
name: 'AAPL High',
x: unpack(rows, 'Date'),
y: unpack(rows, 'AAPL.High'),
line: {
color: '#17BECF'
}
}
var trace2 = {
type: "scatter",
mode: "lines",
name: 'AAPL Low',
x: unpack(rows, 'Date'),
y: unpack(rows, 'AAPL.Low'),
line: {
color: '#7F7F7F'
}
}
var data = [trace1, trace2];
var layout = {
title: 'Time series with custom tickformat',
xaxis: {
tickformat: '%_d %B (%a)\n %Y', // For more time formatting types, see: https://github.com/d3/d3-time-format/blob/master/README.md
tick0:"2000-03-01",
dtick: "M3"
}
};
Plotly.newPlot('myDiv', data, layout);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.