CODEWITHSUNDEEP
javascripthtmlplotlytimeline
Evgenii Kosiakov
Evgenii Kosiakov

Reputation: 605

Plotly: create horizontal timeline

That's what i have so far...

Plotly.plot('graph', [{
  type: 'bar',
  y: [1,0,0],
  x: [1,2,1],
  orientation: 'h',
  base: [0,2,5]
}, {
  type: 'bar',
  y: [1,1,1],
  x: [2,1,2],
  orientation: 'h',
  base: [0,3,5]
}])
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

How can I use dates on the horizontal axis instead of numeric values?

Upvotes: 0

Views: 6166

Answers (2)

Evgenii Kosiakov
Evgenii Kosiakov

Reputation: 605

Finally timeline was created! Codepen.io link: https://codepen.io/elv1s42/pen/bKVEJb

Sharing with everyone in case you will need it:

var layout = {
  height: 300,
  yaxis: {
    showgrid: false,
    zeroline: false,
    showline: false,
    showticklabels: false
  }
};

Plotly.plot('graph', [{
    x: ['2017-11-04 22:23:00', '2017-11-04 22:24:00'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'red', width: 20 },
    mode: 'lines',
    name: 'First event'
  },{
    x: ['2017-11-04 22:24:00', '2017-11-04 22:24:30'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'green', width: 20 },
    mode: 'lines',
    name: 'Second event'
  },{
    x: ['2017-11-04 22:25:00', '2017-11-04 22:26:00'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'yellow', width: 20 },
    mode: 'lines',
    name: 'Third event'
  }], layout)
    <head>
      <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body>
      <div id="graph"></div>
    </body>

Upvotes: 4

Dinesh undefined
Dinesh undefined

Reputation: 5546

You need to use x axis type property. you can specify x axis as date type: Like

x:{type:"date"}

I updated your example. please take a look at the below example

Plotly.plot('graph', [{
  type: 'bar',
  y: [1,0,0],
  x: ['2000-01-01', '2000-01-02', '2000-01-03'],
  orientation: 'v',
  base: [0,2,5]
}, {
  type: 'bar',
  y: [1,1,1],
  x: ['2000-01-01', '2000-01-02', '2000-01-03'],
  orientation: 'v',
  base: [0,3,5]
}],{xaxis:{type:"date"}})
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

Upvotes: 1

Related Questions