Danfo.js
  • Danfo.js Documentation
  • Getting Started
  • API reference
    • General Functions
      • danfo.tensorflow
      • danfo. convertFunctionTotransformer
      • danfo.streamCsvTransformer
      • danfo.streamJSON
      • danfo.streamCSV
      • danfo.Utils
      • danfo.Str
      • danfo.Dt
      • danfo.dateRange
      • danfo.OneHotEncoder
      • danfo.StandardScaler
      • danfo.MinMaxScaler
      • danfo.LabelEncoder
      • danfo.toDateTime
      • danfo.getDummies
      • danfo.concat
      • danfo.merge
    • Input/Output
      • danfo.readExcel
      • danfo.toExcel
      • danfo.readJSON
      • danfo.toJSON
      • danfo.readCSV
      • danfo.toCSV
    • Series
      • Creating a Series
      • Series.append
      • Series.cumSum
      • Series.cumMax
      • Series.cumProd
      • Series.cumMin
      • Series.str.split
      • Series.str.len
      • Series.str.join
      • Series.str.trim
      • Series.str.substring
      • Series.str.substr
      • Series.str.slice
      • Series.str.search
      • Series.str.repeat
      • Series.str.replace
      • Series.str.lastIndexOf
      • Series.str.indexOf
      • Series.str.includes
      • Series.str.endsWith
      • Series.str.startsWith
      • Series.str.concat
      • Series.str.charAt
      • Series.str.toUpperCase
      • Series.str.toLowerCase
      • Series.str.capitalize
      • Series.dt.seconds
      • Series.dt.minutes
      • Series.dt.dayOfMonth
      • Series.dt.monthName
      • Series.dt.hours
      • Series.dt.dayOfWeek
      • Series.dt.dayOfWeek
      • Series.dt.month
      • Series.dt.year
      • Series.argMax
      • Series.argMin
      • Series.argSort
      • Series.replace
      • Series.isNa
      • Series.fillNa
      • Series.dropNa
      • Series.dropDuplicates
      • Series.valueCounts
      • Series.nUnique
      • Series.unique
      • Series.abs
      • Series.ne
      • Series.eq
      • Series.ge
      • Series.le
      • Series.gt
      • Series.lt
      • Series.iloc
      • Series.loc
      • Series.at
      • Series.iat
      • Series.ndim
      • Series.shape
      • Series.dtype
      • Series.values
      • Series.tensor
      • Series.index
      • Series.apply
      • Series.map
      • Series.setIndex
      • Series.resetIndex
      • Series.describe
      • Series.copy
      • Series.sortValues
      • Series.var
      • Series.std
      • Series.round
      • Series.minimum
      • Series.maximum
      • Series.count
      • Series.sum
      • Series.max
      • Series.min
      • Series.mode
      • Series.median
      • Series.mean
      • Series.mod
      • Series.pow
      • Series.div
      • Series.mul
      • Series.sub
      • Series.add
      • Series.sample
      • Series.tail
      • Series.head
      • Series.and
      • Series.or
    • Dataframe
      • Creating a DataFrame
      • DataFrame.sortIndex
      • DataFrame.append
      • DataFrame.nUnique
      • DataFrame.tensor
      • DataFrame.print
      • DataFrame.toCSV
      • DataFrame.toJSON
      • DataFrame.toExcel
      • DataFrame.sortValues
      • DataFrame.setIndex
      • DataFrame.resetIndex
      • DataFrame.rename
      • DataFrame.drop
      • DataFrame.asType
      • DataFrame.shape
      • DataFrame.axis
      • DataFrame.ndim
      • DataFrame.values
      • DataFrame.selectDtypes
      • DataFrame.ctypes
      • DataFrame.index
      • DataFrame.loc
      • DataFrame.iloc
      • DataFrame.at
      • DataFrame.iat
      • DataFrame.head
      • DataFrame.tail
      • DataFrame.sample
      • DataFrame.add
      • DataFrame.sub
      • DataFrame.mul
      • DataFrame.div
      • DataFrame.pow
      • DataFrame.mod
      • DataFrame.mean
      • DataFrame.median
      • DataFrame.min
      • DataFrame.max
      • DataFrame.std
      • DataFrame.var
      • DataFrame.count
      • DataFrame.round
      • DataFrame.cumSum
      • DataFrame.cumMin
      • DataFrame.cumMax
      • DataFrame.cumProd
      • DataFrame.copy
      • DataFrame.describe
      • DataFrame.sum
      • DataFrame.abs
      • DataFrame.query
      • DataFrame.addColumn
      • DataFrame.groupby
      • DataFrame.column
      • DataFrame.fillNa
      • DataFrame.isNa
      • DataFrame.dropNa
      • DataFrame.apply
      • DataFrame.applyMap
      • DataFrame.It
      • DataFrame.gt
      • DataFrame.le
      • DataFrame.ge
      • DataFrame.ne
      • DataFrame.eq
      • DataFrame.replace
    • Configuration Options
    • Plotting
      • Timeseries Plots
      • Violin Plots
      • Box Plots
      • Tables
      • Pie Charts
      • Histograms
      • Scatter Plots
      • Bar Charts
      • Line Charts
      • Customizing your plots
    • Groupby
      • Groupby.getGroups
      • Groupby.col
      • Groupby.max
      • Groupby.min
      • Groupby.sum
      • Groupby.mean
      • Groupby.std
      • Groupby.var
      • Groupby.count
      • Groupby.cumSum
      • Groupby.cumMax
      • Groupby.cumMin
      • Groupby.cumProd
      • Groupby.agg
  • User Guides
    • Migrating to the stable version of Danfo.js
    • Using Danfojs in React
    • Titanic Survival Prediction using Danfo.js and Tensorflow.js
  • Building Data Driven Applications with Danfo.js - Book
  • Contributing Guide
  • Release Notes
Powered by GitBook
On this page

Was this helpful?

  1. API reference
  2. Plotting

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.

App.jsx
import { useEffect } from 'react';
import './App.css';
import { readCSV } from "danfojs-nightly";

function App() {

  useEffect(() => {
    readCSV(
      "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
    )
      .then((df) => {

        const layout = {
          title: "A financial charts",
          xaxis: {
            title: "Date",
          },
          yaxis: {
            title: "Count",
          },
        };

        const config = {
          columns: ["AAPL.Open", "AAPL.High"],
        };

        const new_df = df.setIndex({ column: "Date" });
        new_df.plot("plot_div").line({ config, layout });
      })
      .catch((err) => {
        console.log(err);
      });

  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <div id="plot_div"></div>
      </header>
    </div>
  );
}

export default App;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/danfojs-nightly@1.0.2/lib/bundle.js"></script>
    <title>Document</title>
  </head>

  <body>
    <div id="plot_div"></div>

    <script>
      dfd
        .readCSV(
          "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
        )
        .then((df) => {

          const layout = {
            title: "A financial charts",
            xaxis: {
              title: "Date",
            },
            yaxis: {
              title: "Count",
            },
          };

          const config = {
            columns: ["AAPL.Open", "AAPL.High"],
          };

          const new_df = df.setIndex({ column: "Date" });
          new_df.plot("plot_div").line({ config, layout });
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
</html>
PreviousPlottingNextViolin Plots

Last updated 3 years ago

Was this helpful?

To set customize your charts, see the

Customizing your plot page