Format x axis of Google Line Chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Line Chart

Description

Format x axis of Google Line Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from w w  w  .jav  a 2 s  .  co m
      google.charts.load('current', {
          'packages': ['line', 'corechart']
      });
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
          var data = google.visualization.arrayToDataTable([
              ['Time', 'Temperature'],
              [new Date(2017, 0, 1, 0, 0, 0), 5],
              [new Date(2017, 0, 1, 1, 0, 0), 12],
              [new Date(2017, 0, 1, 2, 0, 0), 14],
              [new Date(2017, 0, 1, 3, 0, 0), 18],
              [new Date(2017, 0, 1, 4, 0, 0), 17],
              [new Date(2017, 0, 1, 4, 20, 0), 17],
              [new Date(2017, 0, 1, 4, 30, 0), 18],
              [new Date(2017, 0, 1, 4, 40, 0), 22],
              [new Date(2017, 0, 1, 5, 0, 0), 24],
              [new Date(2017, 0, 1, 6, 0, 0), 20],
              [new Date(2017, 0, 1, 7, 0, 0), 17],
              [new Date(2017, 0, 1, 8, 0, 0), 17],
              [new Date(2017, 0, 1, 9, 0, 0), 16],
              [new Date(2017, 0, 1, 10, 0, 0), 17],
              [new Date(2017, 0, 1, 11, 0, 0), 16],
              [new Date(2017, 0, 1, 12, 0, 0), 15]
          ]);
          new google.visualization.LineChart(document.getElementById('visualization')).
          draw(data, {
              "height": 500,
              "curveType": "function",
              "lineWidth": 2,
              "pointSize": 2,
              "vAxes": {
                  "0": {
                      "title": "?C",
                      "format": "#,##00.00 ?C"
                  }
              },
              "hAxes": {
                  "0": {
                      "title": "Time",
                      "format": 'HH:mm'
                  }
              },
              "series": {
                  "0": {
                      "targetAxisIndex": 0
                  }
              }
          });
      };
    }

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="visualization"></div>  
   </body>
</html>

Related Tutorials