Timeseries Plots
Timeseries plot are based on date index
Examples
In the example below, we plot the yearly trend of a financial dataset. First, we reset the index to the Date column.
React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { readCSV } from "danfojs-nightly";
4
​
5
function App() {
6
​
7
useEffect(() => {
8
readCSV(
9
"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
10
)
11
.then((df) => {
12
​
13
const layout = {
14
title: "A financial charts",
15
xaxis: {
16
title: "Date",
17
},
18
yaxis: {
19
title: "Count",
20
},
21
};
22
​
23
const config = {
24
columns: ["AAPL.Open", "AAPL.High"],
25
};
26
​
27
const new_df = df.setIndex({ column: "Date" });
28
new_df.plot("plot_div").line({ config, layout });
29
})
30
.catch((err) => {
31
console.log(err);
32
});
33
​
34
}, [])
35
​
36
return (
37
<div className="App">
38
<header className="App-header">
39
<div id="plot_div"></div>
40
</header>
41
</div>
42
);
43
}
44
​
45
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
<title>Document</title>
8
</head>
9
​
10
<body>
11
<div id="plot_div"></div>
12
​
13
<script>
14
dfd
15
.readCSV(
16
"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
17
)
18
.then((df) => {
19
​
20
const layout = {
21
title: "A financial charts",
22
xaxis: {
23
title: "Date",
24
},
25
yaxis: {
26
title: "Count",
27
},
28
};
29
​
30
const config = {
31
columns: ["AAPL.Open", "AAPL.High"],
32
};
33
​
34
const new_df = df.setIndex({ column: "Date" });
35
new_df.plot("plot_div").line({ config, layout });
36
})
37
.catch((err) => {
38
console.log(err);
39
});
40
</script>
41
</body>
42
</html>
Copied!
%20(1).png?alt=media)
Last modified 3mo ago
Copy link