Time Series in JavaScript

How to plot D3.js-based date and time in Plotly.js. An example of a time-series plot.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Date Strings

var data = [
  {
    x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
    y: [1, 3, 6],
    type: 'scatter'
  }
];

Plotly.newPlot('myDiv', data);

Basic Time Series

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: {
    text: 'Date'
  },
};

Plotly.newPlot('myDiv', data, layout);
})

Manually Set Range

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",
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.High'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.Low'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
  title: {
    text: 'Custom Range'
  },
  xaxis: {
    range: ['2016-07-01', '2016-12-31'],
    type: 'date'
  },
  yaxis: {
    autorange: true,
    range: [86.8700008333, 138.870004167],
    type: 'linear'
  }
};

Plotly.newPlot('myDiv', data, layout);
})

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\n\nvar trace1 = {\n type: \"scatter\",\n mode: \"lines\",\n x: unpack(rows, 'Date'),\n y: unpack(rows, 'AAPL.High'),\n line: {color: '#17BECF'}\n}\n\nvar trace2 = {\n type: \"scatter\",\n mode: \"lines\",\n x: unpack(rows, 'Date'),\n y: unpack(rows, 'AAPL.Low'),\n line: {color: '#7F7F7F'}\n}\n\nvar data = [trace1,trace2];\n\nvar layout = {\n title: {\n text: 'Custom Range'\n },\n xaxis: {\n range: ['2016-07-01', '2016-12-31'],\n type: 'date'\n },\n yaxis: {\n autorange: true,\n range: [86.8700008333, 138.870004167],\n type: 'linear'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n})\n"}">

Time Series with Rangeslider

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: {text: 'Time Series with Rangeslider'},
  xaxis: {
    autorange: true,
    range: ['2015-02-17', '2017-02-16'],
    rangeselector: {buttons: [
        {
          count: 1,
          label: '1m',
          step: 'month',
          stepmode: 'backward'
        },
        {
          count: 6,
          label: '6m',
          step: 'month',
          stepmode: 'backward'
        },
        {step: 'all'}
      ]},
    rangeslider: {range: ['2015-02-17', '2017-02-16']},
    type: 'date'
  },
  yaxis: {
    autorange: true,
    range: [86.8700008333, 138.870004167],
    type: 'linear'
  }
};

Plotly.newPlot('myDiv', data, layout);
})

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv(\"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv\", function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\n\nvar trace1 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL High',\n x: unpack(rows, 'Date'),\n y: unpack(rows, 'AAPL.High'),\n line: {color: '#17BECF'}\n}\n\nvar trace2 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL Low',\n x: unpack(rows, 'Date'),\n y: unpack(rows, 'AAPL.Low'),\n line: {color: '#7F7F7F'}\n}\n\nvar data = [trace1,trace2];\n\nvar layout = {\n title: {text: 'Time Series with Rangeslider'},\n xaxis: {\n autorange: true,\n range: ['2015-02-17', '2017-02-16'],\n rangeselector: {buttons: [\n {\n count: 1,\n label: '1m',\n step: 'month',\n stepmode: 'backward'\n },\n {\n count: 6,\n label: '6m',\n step: 'month',\n stepmode: 'backward'\n },\n {step: 'all'}\n ]},\n rangeslider: {range: ['2015-02-17', '2017-02-16']},\n type: 'date'\n },\n yaxis: {\n autorange: true,\n range: [86.8700008333, 138.870004167],\n type: 'linear'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n})\n"}">