CODEWITHSUNDEEP
javascriptdategoogle-visualizationdate-formatcolumn-chart
RasmusGP
RasmusGP

Reputation: 5346

Google Charts ColumnChart date format not showing minutes and hours

I'm trying to make a column chat, using Google charts with the numbers up the vertical axis, and dates across the horizontal axis. For some reason the date format does not print the hours, minutes or seconds. It does work just fine with year, month and day.

I'm using the format "M-d, HH:mm:ss" to format and print this timestamp: "2017-07-15 20:10:30" but instead it prints

7-17,00:00:00 instead of 7-17, 20:10:30

Is this a bug or have i missed something?

<html>
    <head>
    <script src="https://www.google.com/jsapi?ext.js"></script>
    </head>


   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() 
      {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Present');


        data.addRows([
            [new Date("2017-07-15 20:10:30"), 5]
          ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" 
                        }]);

        var options = {
            width: 600,
            height: 400,
            //bar: {groupWidth: "95%"},
            legend: { position: "none" },
            vAxis: {title: 'Times occured'},
            hAxis: {
                format: "M-d, HH:mm:ss", // <------- This shows: "7-17,00:00:00" not "7-17, 20:10:30"
                //format: "HH:mm",
                //format:'M-d H:mm',

                title: 'Date',
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
        chart.draw(view, options);
      }
    </script>

<body class="chart">
    <div id="chart_div"></div>
</body>
</html>

Upvotes: 2

Views: 2023

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

looks like some sort of bug,

recommend using a discrete axis (string) for column charts anyway

you could use a data formatter to convert the x-axis

see following working snippet... 

google.charts.load("current", {
  callback: drawChart,
  packages:["corechart"]
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'M-d, HH:mm:ss'
  });

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Present');
  data.addRows([
    [new Date("2017-07-15 20:10:30"), 5]
  ]);
    
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return formatDate.formatValue(dt.getValue(row, 0))
    },
    type: "string",
    label: data.getColumnLabel(0)
  }, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation" 
  }]);

  var options = {
    width: 600,
    height: 400,
    legend: { position: "none" },
    vAxis: {title: 'Times occured'},
    hAxis: {
      title: 'Date'
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions