Bar chart with time axis X - display problem

masterboy · October 23, 2023, 4:04pm

Hi, I have a simple bar chart that displays like this:


<!DOCTYPE html>
<html lang="cs">
 <head>
  <title>Metheus</title>
  <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
  <meta charset="UTF-8" />
 </head>
 <body>
  <div id="chart" style="display: block; margin: auto; width: 900px;"></div>
  <script>

var test = {  
    y: [69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 68, 68, 69, 68, 69, 68, 69, 69, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, , 65, 67, 67, 67, 67, 67, 67, 67, 67, 67, 68, 67, 67, 67, 67, 67, 67, 67, , 64, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, , 63, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, , 62, 65, 65, 65, 65, 64, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 67, 67, 67, , 64, 67, 67, 67, 67, 67, 67, 67, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66],
    type: 'bar', 
    mode: 'lines', 
    xaxis: 'x',
    yaxis: 'y1',
    connectgaps: false,
};

var data = [test];

var layout = {
    bargap: 0
};

var config = {
    staticPlot: false
};

Plotly.newPlot('chart', data, layout, config);

  </script>
 </body>
</html>

If I omit the X-axis values, the graph displays correctly. If I put the date and time on the X axis, the same graph displays incorrectly.

<!DOCTYPE html>
<html lang="cs">
 <head>
  <title>Metheus</title>
  <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
  <meta charset="UTF-8" />
 </head>
 <body>
  <div id="chart" style="display: block; margin: auto; width: 900px;"></div>
  <script>

var test = {  
    x: ['2023-10-22 07:00:00', '2023-10-22 07:10:00', '2023-10-22 07:20:00', '2023-10-22 07:30:00', '2023-10-22 07:40:00', '2023-10-22 07:50:00', '2023-10-22 08:00:00', '2023-10-22 08:10:00', '2023-10-22 08:20:00', '2023-10-22 08:30:00', '2023-10-22 08:40:00', '2023-10-22 08:50:00', '2023-10-22 09:00:00', '2023-10-22 09:10:00', '2023-10-22 09:20:00', '2023-10-22 09:30:00', '2023-10-22 09:40:00', '2023-10-22 09:50:00', '2023-10-22 10:00:00', '2023-10-22 10:10:00', '2023-10-22 10:20:00', '2023-10-22 10:30:00', '2023-10-22 10:40:00', '2023-10-22 10:50:00', '2023-10-22 11:00:00', '2023-10-22 11:10:00', '2023-10-22 11:20:00', '2023-10-22 11:30:00', '2023-10-22 11:40:00', '2023-10-22 11:50:00', '2023-10-22 12:00:00', '2023-10-22 12:10:00', '2023-10-22 12:20:00', '2023-10-22 12:30:00', '2023-10-22 12:40:00', '2023-10-22 12:50:00', '2023-10-22 13:00:00', '2023-10-22 13:10:00', '2023-10-22 13:20:00', '2023-10-22 13:30:00', '2023-10-22 13:40:00', '2023-10-22 13:50:00', '2023-10-22 14:00:00', '2023-10-22 14:10:00', '2023-10-22 14:20:00', '2023-10-22 14:30:00', '2023-10-22 14:40:00', '2023-10-22 14:50:00', '2023-10-22 15:00:00', '2023-10-22 15:10:00', '2023-10-22 15:20:00', '2023-10-22 15:30:00', '2023-10-22 15:40:00', '2023-10-22 15:50:00', '2023-10-22 16:00:00', '2023-10-22 16:10:00', '2023-10-22 16:20:00', '2023-10-22 16:30:00', '2023-10-22 16:40:00', '2023-10-22 16:50:00', '2023-10-22 17:00:00', '2023-10-22 17:10:00', '2023-10-22 17:20:00', '2023-10-22 17:30:00', '2023-10-22 17:40:00', '2023-10-22 17:50:00', '2023-10-22 18:00:00', '2023-10-22 18:10:00', '2023-10-22 18:20:00', '2023-10-22 18:30:00', '2023-10-22 18:40:00', '2023-10-22 18:41:00', '2023-10-22 19:00:00', '2023-10-22 19:10:00', '2023-10-22 19:20:00', '2023-10-22 19:30:00', '2023-10-22 19:40:00', '2023-10-22 19:50:00', '2023-10-22 20:00:00', '2023-10-22 20:10:00', '2023-10-22 20:20:00', '2023-10-22 20:30:00', '2023-10-22 20:40:00', '2023-10-22 20:50:00', '2023-10-22 21:00:00', '2023-10-22 21:10:00', '2023-10-22 21:20:00', '2023-10-22 21:30:00', '2023-10-22 21:40:00', '2023-10-22 21:50:00', '2023-10-22 21:51:00', '2023-10-22 22:10:00', '2023-10-22 22:20:00', '2023-10-22 22:30:00', '2023-10-22 22:40:00', '2023-10-22 22:50:00', '2023-10-22 23:00:00', '2023-10-22 23:10:00', '2023-10-22 23:20:00', '2023-10-22 23:30:00', '2023-10-22 23:40:00', '2023-10-22 23:50:00', '2023-10-23 00:00:00', '2023-10-23 00:10:00', '2023-10-23 00:20:00', '2023-10-23 00:30:00', '2023-10-23 00:40:00', '2023-10-23 00:50:00', '2023-10-23 01:00:00', '2023-10-23 01:10:00', '2023-10-23 01:20:00', '2023-10-23 01:30:00', '2023-10-23 01:40:00', '2023-10-23 01:50:00', '2023-10-23 02:00:00', '2023-10-23 02:10:00', '2023-10-23 02:20:00', '2023-10-23 02:21:00', '2023-10-23 02:40:00', '2023-10-23 02:50:00', '2023-10-23 03:00:00', '2023-10-23 03:10:00', '2023-10-23 03:20:00', '2023-10-23 03:30:00', '2023-10-23 03:40:00', '2023-10-23 03:50:00', '2023-10-23 04:00:00', '2023-10-23 04:10:00', '2023-10-23 04:20:00', '2023-10-23 04:30:00', '2023-10-23 04:40:00', '2023-10-23 04:50:00', '2023-10-23 05:00:00', '2023-10-23 05:10:00', '2023-10-23 05:20:00', '2023-10-23 05:30:00', '2023-10-23 05:40:00', '2023-10-23 05:50:00', '2023-10-23 06:00:00', '2023-10-23 06:10:00', '2023-10-23 06:20:00', '2023-10-23 06:30:00', '2023-10-23 06:40:00', '2023-10-23 06:50:00', '2023-10-23 07:00:00', '2023-10-23 07:10:00', '2023-10-23 07:20:00', '2023-10-23 07:30:00', '2023-10-23 07:40:00', '2023-10-23 07:50:00', '2023-10-23 08:00:00', '2023-10-23 08:10:00', '2023-10-23 08:20:00', '2023-10-23 08:30:00', '2023-10-23 08:40:00', '2023-10-23 08:50:00', '2023-10-23 09:00:00', '2023-10-23 09:10:00', '2023-10-23 09:20:00', '2023-10-23 09:30:00', '2023-10-23 09:40:00', '2023-10-23 09:50:00', '2023-10-23 10:00:00', '2023-10-23 10:10:00', '2023-10-23 10:20:00', '2023-10-23 10:30:00', '2023-10-23 10:40:00', '2023-10-23 10:50:00', '2023-10-23 11:00:00', '2023-10-23 11:01:00', '2023-10-23 11:20:00', '2023-10-23 11:30:00', '2023-10-23 11:40:00', '2023-10-23 11:50:00', '2023-10-23 12:00:00', '2023-10-23 12:10:00', '2023-10-23 12:20:00', '2023-10-23 12:30:00', '2023-10-23 12:40:00', '2023-10-23 12:50:00', '2023-10-23 13:00:00', '2023-10-23 13:10:00', '2023-10-23 13:20:00', '2023-10-23 13:30:00', '2023-10-23 13:40:00', '2023-10-23 13:50:00', '2023-10-23 14:00:00', '2023-10-23 14:10:00', '2023-10-23 14:20:00', '2023-10-23 14:30:00', '2023-10-23 14:40:00', '2023-10-23 14:41:00', '2023-10-23 15:00:00', '2023-10-23 15:10:00', '2023-10-23 15:20:00', '2023-10-23 15:30:00', '2023-10-23 15:40:00', '2023-10-23 15:50:00', '2023-10-23 16:00:00', '2023-10-23 16:10:00', '2023-10-23 16:20:00', '2023-10-23 16:30:00', '2023-10-23 16:40:00', '2023-10-23 16:50:00', '2023-10-23 17:00:00', '2023-10-23 17:10:00', '2023-10-23 17:20:00', '2023-10-23 17:30:00', '2023-10-23 17:40:00', '2023-10-23 17:50:00', '2023-10-23 18:00:00'],
    y: [69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 69, 68, 68, 69, 68, 69, 68, 69, 69, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, 68, , 65, 67, 67, 67, 67, 67, 67, 67, 67, 67, 68, 67, 67, 67, 67, 67, 67, 67, , 64, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, , 63, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, , 62, 65, 65, 65, 65, 64, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 67, 67, 67, , 64, 67, 67, 67, 67, 67, 67, 67, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66, 66],
    type: 'bar', 
    mode: 'lines', 
    xaxis: 'x',
    yaxis: 'y1',
    connectgaps: false,
};

var data = [test];

var layout = {
    bargap: 0
};

var config = {
    staticPlot: false
};

Plotly.newPlot('chart', data, layout, config);

  </script>
 </body>
</html>

Is it possible to achieve the same result with an X-axis that will have the date and time and the graph will look like the first case?

AIMPED · October 24, 2023, 7:51am

HI @masterboy this behavior is actually expected.

If using a time axis, plotly reserves space on the axis for each time increment and scales the width of the bars accordingly, that’s why you see gaps.

Maybe you are better off using a line chart with some interpolation:

masterboy · October 24, 2023, 8:10am

Thank you for your reply. I thought it was the timeline that played a role in this, which rules other than numerical. I am addressing this because I would like to achieve this display:


<!DOCTYPE html>
<html lang="cs">
 <head>
  <title>Metheus</title>
  <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
  <meta charset="UTF-8" />
 </head>
 <body>
  <div id="chart" style="display: block; margin: auto; width: 900px;"></div>
  <script>

var test = {  
    y: [5, 5, 5, , 5, 5, 5, , 5, 5, 5, 5, 5, 5, 5],
    base: 2,
    marker: {
        color: ['green', 'lightgreen', 'lightgreen', , 'lightgreen', 'lightgreen', 'pink', , 'pink', 'pink', 'red', 'red', 'red', 'pink', 'lightgreen']
    },
    type: 'bar', 
    xaxis: 'x',
    yaxis: 'y1',
    connectgaps: false,
};

var data = [test];

var layout = {
    height: 250,
    bargap: 0,
    yaxis: {
        range: [0, 9],
        dtick: 3,
    }
};

var config = {
    staticPlot: false
};

Plotly.newPlot('chart', data, layout, config);

  </script>
 </body>
</html>

I want to graphically represent the state of the battery at a certain time. I therefore need this to work with the timeline … Isn’t there some way to make the library work like this with the timeline as well?

masterboy · October 25, 2023, 4:46pm

So I ended up adjusting the data, which I then plot on a graph. The device sends me data at precise times, so I was able to simplify the graph on the X-axis and replace it with a numerical sequence. Then I get a nice strip chart plotted. I have a problem with the hover mode though. If I hover the graph, the data from the graph is displayed correctly, but on the X axis I get a number see the picture and the red circle. I would need to insert some text instead of this number, in my case the date and time. I am also sending the code for this chart.

Topic		Replies	Views
Bar chart axis not showing duration properly (line chart does) plotly.js	6	1643	October 5, 2017
Time series chart behavior is wrong plotly.js	2	4815	August 18, 2016
Bar chart too short for the container plotly.js	3	2057	October 17, 2018
BarChart right/left bar cut in half plotly.js	0	237	March 6, 2021
Xaxis type date displaying in the reverse order plotly.js	2	2062	January 10, 2019

Bar chart with time axis X - display problem

Related Topics