Cannot remove AM PM format from Google Chart date

Question

when drawing a material chart,
need to convert the options using static method –> google.charts.Line.convertOptions

materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));

this will ensure the supported options are included properly,
see following working snippet…

google.charts.load('current', {
  'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('datetime');
  data.addColumn('number', "Temp");
  data.addColumn('number', "Humidity");


  data.addRows([




    [new Date(2020, 11, 04, 15, 00), 25.50, 62.76],


    [new Date(2020, 11, 04, 15, 10), 25.58, 62.63],


    [new Date(2020, 11, 04, 15, 20), 25.60, 62.47],



  ]);

  // give date a certain format
  var dateFormatter = new google.visualization.DateFormat({
    pattern: 'dd/MM/yyyy HH:mm'
  });
  dateFormatter.format(data, 0);

  var materialOptions = {

    // trying to format date/time on lower line, not working :/
    hAxis: {
      format: 'dd/MM/yyyy HH:mm',
      gridlines: {
        count: 15
      }
    },


    legend: {
      position: 'none'
    },

    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {
        axis: 'Temp'
      },
      1: {
        axis: 'Humidity'
      },
    },
    axes: {
      y: {
        Temp: {
          label: 'Temps (Celsius)',
          range: {
            max: 15,
            min: 40
          }
        },
        Humidity: {
          label: 'Humidity (%)',
          range: {max: 30, min: 90 }
        },
      },

    },
    colors: ['#B00000', '#1bdec4']
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
  }

  drawMaterialChart();

}

 
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    
  </head>
  <body>
  
    <div id="chart_div" style="width: 100%; height: 500px;"></div>

</body>
</html>

note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity

Leave a Comment Cancel Reply