|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|
|
<body> |
|
|
|
|
|
<div id="myPlot" style="width:100%;max-width:700px"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const xArray = [ |
|
|
new Date(2022, 0, 1, 0), |
|
|
new Date(2022, 0, 1, 1), |
|
|
new Date(2022, 0, 1, 2), |
|
|
new Date(2022, 0, 1, 3), |
|
|
new Date(2022, 0, 1, 4), |
|
|
new Date(2022, 0, 1, 5), |
|
|
new Date(2022, 0, 1, 6), |
|
|
new Date(2022, 0, 1, 7), |
|
|
new Date(2022, 0, 1, 8), |
|
|
new Date(2022, 0, 1, 9), |
|
|
new Date(2022, 0, 1, 10) |
|
|
]; |
|
|
|
|
|
const yArray = [7,8,8,9,9,9,10,11,14,14,15]; |
|
|
|
|
|
|
|
|
const data = [{ |
|
|
x: xArray, |
|
|
y: yArray, |
|
|
mode: "lines" |
|
|
}]; |
|
|
|
|
|
|
|
|
const layout = { |
|
|
xaxis: { |
|
|
title: "Date and Time", |
|
|
type: 'date' |
|
|
}, |
|
|
yaxis: {range: [5, 16], title: "Price in Millions"}, |
|
|
title: "House Prices vs. Time" |
|
|
}; |
|
|
|
|
|
|
|
|
Plotly.newPlot("myPlot", data, layout); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
