CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
Julia_arch
Julia_arch

Reputation: 376

Google Chart problems (chart title, axis text)

I have a couple of problems with google charts, please take a look at the screenshot and code below.

  1. The first line chart title doesn't display

  2. The legend was automatically displayed to the right( first line chart), even though I specified the legend to display on the bottom of the chart

  3. The horizontal axis data appear on the first line chat only, how do I display the data in all three charts?

  4. How do I change the horizontal axis data so it can display at a 90-degree angle so it can be readable? 

<html>

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Time', 'Temperature'],
        ['2016-02-08 08:46:04', 79],
        ['2016-02-08 08:47:02', 79],
        ['2016-02-08 09:00:02', 77],
        ['2016-02-08 09:15:01', 76],
        ['2016-02-08 09:30:01', 78],
        ['2016-02-08 09:45:02', 78],
        ['2016-02-08 10:00:01', 77],
        ['2016-02-08 10:15:01', 77],
        ['2016-02-08 10:29:23', 78],
        ['2016-02-08 10:30:02', 78],
        ['2016-02-08 10:45:02', 77],
        ['2016-02-08 11:00:01', 77],
        ['2016-02-08 11:15:02', 78],
        ['2016-02-08 11:30:01', 78],
        ['2016-02-08 11:45:02', 77],
        ['2016-02-08 12:00:02', 77],
        ['2016-02-08 12:15:02', 78],
        ['2016-02-08 12:30:02', 77],
        ['2016-02-08 12:45:02', 76],
        ['2016-02-08 13:00:01', 75],
        ['2016-02-08 13:15:01', 74],
        ['2016-02-08 13:30:02', 76],
        ['2016-02-08 13:45:02', 76],
        ['2016-02-08 14:00:02', 75],
        ['2016-02-08 14:15:02', 75],
        ['2016-02-08 14:30:01', 77],
        ['2016-02-08 14:45:01', 77],
        ['2016-02-08 15:00:01', 76],
        ['2016-02-08 15:15:02', 77],
        ['2016-02-08 15:30:02', 77],
        ['2016-02-08 15:45:02', 77],
        ['2016-02-08 16:00:02', 77],
        ['2016-02-08 16:15:02', 77],
        ['2016-02-08 16:30:01', 78],
        ['2016-02-08 16:45:01', 78],
        ['2016-02-08 17:00:02', 78],
        ['2016-02-08 17:15:01', 79],
        ['2016-02-08 17:30:02', 78],
        ['2016-02-08 17:45:02', 77],
        ['2016-02-08 18:00:02', 77],
        ['2016-02-08 18:15:01', 77],
        ['2016-02-08 18:30:02', 77],
        ['2016-02-08 18:45:01', 77],
        ['2016-02-08 19:00:02', 78],
        ['2016-02-08 19:15:01', 78],
        ['2016-02-08 19:30:02', 77],
        ['2016-02-08 19:45:02', 77],
        ['2016-02-08 20:00:01', 77],
        ['2016-02-08 20:15:02', 77],
        ['2016-02-08 20:30:01', 77],
        ['2016-02-08 20:45:01', 77],
        ['2016-02-08 21:00:02', 77],
        ['2016-02-08 21:15:01', 77],
        ['2016-02-08 21:30:02', 77],
        ['2016-02-08 21:45:02', 77],
        ['2016-02-08 22:00:02', 77],
        ['2016-02-08 22:15:02', 77],
        ['2016-02-08 22:30:01', 77],
        ['2016-02-08 22:45:01', 77],
        ['2016-02-08 23:00:01', 77],
        ['2016-02-08 23:15:02', 76],
        ['2016-02-08 23:30:02', 76],
        ['2016-02-08 23:45:01', 76],
        ['2016-02-09 00:00:02', 76],
        ['2016-02-09 00:15:01', 76],
        ['2016-02-09 00:30:02', 76],
        ['2016-02-09 00:45:01', 76],
        ['2016-02-09 01:00:02', 76],
        ['2016-02-09 01:15:01', 76],
        ['2016-02-09 01:30:01', 75],
        ['2016-02-09 01:45:01', 75],
        ['2016-02-09 01:49:09', 75],
        ['2016-02-09 02:00:01', 75],
        ['2016-02-09 02:15:02', 75],
        ['2016-02-09 02:30:02', 76],
        ['2016-02-09 02:45:02', 75],
        ['2016-02-09 03:00:01', 75],
        ['2016-02-09 03:15:02', 75],
        ['2016-02-09 03:30:02', 75],
        ['2016-02-09 03:45:02', 74],
        ['2016-02-09 04:00:01', 75],
        ['2016-02-09 04:15:01', 75],
        ['2016-02-09 04:30:02', 75],
        ['2016-02-09 04:45:02', 75],
        ['2016-02-09 05:00:02', 75],
        ['2016-02-09 05:15:01', 76],
        ['2016-02-09 05:30:01', 75],
        ['2016-02-09 05:45:02', 75],
        ['2016-02-09 06:00:02', 76],
        ['2016-02-09 06:15:02', 76],
        ['2016-02-09 06:30:01', 75],
        ['2016-02-09 06:39:58', 75],
        ['2016-02-09 06:45:01', 75],
        ['2016-02-09 07:00:01', 76],
        ['2016-02-09 07:15:02', 76],
        ['2016-02-09 07:30:02', 75]
      ]);
      var data3 = google.visualization.arrayToDataTable([
        ['Time', 'Humidity'],
        ['2016-02-08 08:46:04', 35],
        ['2016-02-08 08:47:02', 35],
        ['2016-02-08 09:00:02', 36],
        ['2016-02-08 09:15:01', 36],
        ['2016-02-08 09:30:01', 35],
        ['2016-02-08 09:45:02', 35],
        ['2016-02-08 10:00:01', 35],
        ['2016-02-08 10:15:01', 35],
        ['2016-02-08 10:29:23', 34],
        ['2016-02-08 10:30:02', 34],
        ['2016-02-08 10:45:02', 35],
        ['2016-02-08 11:00:01', 36],
        ['2016-02-08 11:15:02', 34],
        ['2016-02-08 11:30:01', 34],
        ['2016-02-08 11:45:02', 34],
        ['2016-02-08 12:00:02', 35],
        ['2016-02-08 12:15:02', 34],
        ['2016-02-08 12:30:02', 34],
        ['2016-02-08 12:45:02', 34],
        ['2016-02-08 13:00:01', 34],
        ['2016-02-08 13:15:01', 34],
        ['2016-02-08 13:30:02', 33],
        ['2016-02-08 13:45:02', 33],
        ['2016-02-08 14:00:02', 34],
        ['2016-02-08 14:15:02', 33],
        ['2016-02-08 14:30:01', 32],
        ['2016-02-08 14:45:01', 32],
        ['2016-02-08 15:00:01', 33],
        ['2016-02-08 15:15:02', 31],
        ['2016-02-08 15:30:02', 31],
        ['2016-02-08 15:45:02', 32],
        ['2016-02-08 16:00:02', 32],
        ['2016-02-08 16:15:02', 32],
        ['2016-02-08 16:30:01', 31],
        ['2016-02-08 16:45:01', 33],
        ['2016-02-08 17:00:02', 31],
        ['2016-02-08 17:15:01', 30],
        ['2016-02-08 17:30:02', 29],
        ['2016-02-08 17:45:02', 31],
        ['2016-02-08 18:00:02', 31],
        ['2016-02-08 18:15:01', 31],
        ['2016-02-08 18:30:02', 31],
        ['2016-02-08 18:45:01', 31],
        ['2016-02-08 19:00:02', 31],
        ['2016-02-08 19:15:01', 31],
        ['2016-02-08 19:30:02', 32],
        ['2016-02-08 19:45:02', 31],
        ['2016-02-08 20:00:01', 31],
        ['2016-02-08 20:15:02', 32],
        ['2016-02-08 20:30:01', 32],
        ['2016-02-08 20:45:01', 34],
        ['2016-02-08 21:00:02', 33],
        ['2016-02-08 21:15:01', 33],
        ['2016-02-08 21:30:02', 32],
        ['2016-02-08 21:45:02', 31],
        ['2016-02-08 22:00:02', 31],
        ['2016-02-08 22:15:02', 30],
        ['2016-02-08 22:30:01', 29],
        ['2016-02-08 22:45:01', 30],
        ['2016-02-08 23:00:01', 30],
        ['2016-02-08 23:15:02', 29],
        ['2016-02-08 23:30:02', 28],
        ['2016-02-08 23:45:01', 27],
        ['2016-02-09 00:00:02', 29],
        ['2016-02-09 00:15:01', 30],
        ['2016-02-09 00:30:02', 30],
        ['2016-02-09 00:45:01', 32],
        ['2016-02-09 01:00:02', 32],
        ['2016-02-09 01:15:01', 32],
        ['2016-02-09 01:30:01', 32],
        ['2016-02-09 01:45:01', 33],
        ['2016-02-09 01:49:09', 33],
        ['2016-02-09 02:00:01', 33],
        ['2016-02-09 02:15:02', 32],
        ['2016-02-09 02:30:02', 32],
        ['2016-02-09 02:45:02', 32],
        ['2016-02-09 03:00:01', 32],
        ['2016-02-09 03:15:02', 32],
        ['2016-02-09 03:30:02', 32],
        ['2016-02-09 03:45:02', 32],
        ['2016-02-09 04:00:01', 33],
        ['2016-02-09 04:15:01', 33],
        ['2016-02-09 04:30:02', 33],
        ['2016-02-09 04:45:02', 32],
        ['2016-02-09 05:00:02', 32],
        ['2016-02-09 05:15:01', 31],
        ['2016-02-09 05:30:01', 32],
        ['2016-02-09 05:45:02', 31],
        ['2016-02-09 06:00:02', 30],
        ['2016-02-09 06:15:02', 30],
        ['2016-02-09 06:30:01', 31],
        ['2016-02-09 06:39:58', 30],
        ['2016-02-09 06:45:01', 30],
        ['2016-02-09 07:00:01', 29],
        ['2016-02-09 07:15:02', 29],
        ['2016-02-09 07:30:02', 29]
      ]);
      var data4 = google.visualization.arrayToDataTable([
        ['Time', 'Pressure'],
        ['2016-02-08 08:46:04', 1018],
        ['2016-02-08 08:47:02', 1018],
        ['2016-02-08 09:00:02', 1018],
        ['2016-02-08 09:15:01', 1018],
        ['2016-02-08 09:30:01', 1018],
        ['2016-02-08 09:45:02', 1018],
        ['2016-02-08 10:00:01', 1018],
        ['2016-02-08 10:15:01', 1018],
        ['2016-02-08 10:29:23', 1018],
        ['2016-02-08 10:30:02', 1018],
        ['2016-02-08 10:45:02', 1019],
        ['2016-02-08 11:00:01', 1019],
        ['2016-02-08 11:15:02', 1019],
        ['2016-02-08 11:30:01', 1019],
        ['2016-02-08 11:45:02', 1020],
        ['2016-02-08 12:00:02', 1020],
        ['2016-02-08 12:15:02', 1020],
        ['2016-02-08 12:30:02', 1021],
        ['2016-02-08 12:45:02', 1021],
        ['2016-02-08 13:00:01', 1021],
        ['2016-02-08 13:15:01', 1021],
        ['2016-02-08 13:30:02', 1022],
        ['2016-02-08 13:45:02', 1022],
        ['2016-02-08 14:00:02', 1022],
        ['2016-02-08 14:15:02', 1022],
        ['2016-02-08 14:30:01', 1022],
        ['2016-02-08 14:45:01', 1023],
        ['2016-02-08 15:00:01', 1023],
        ['2016-02-08 15:15:02', 1023],
        ['2016-02-08 15:30:02', 1023],
        ['2016-02-08 15:45:02', 1023],
        ['2016-02-08 16:00:02', 1023],
        ['2016-02-08 16:15:02', 1023],
        ['2016-02-08 16:30:01', 1023],
        ['2016-02-08 16:45:01', 1023],
        ['2016-02-08 17:00:02', 1023],
        ['2016-02-08 17:15:01', 1023],
        ['2016-02-08 17:30:02', 1023],
        ['2016-02-08 17:45:02', 1022],
        ['2016-02-08 18:00:02', 1022],
        ['2016-02-08 18:15:01', 1022],
        ['2016-02-08 18:30:02', 1022],
        ['2016-02-08 18:45:01', 1022],
        ['2016-02-08 19:00:02', 1021],
        ['2016-02-08 19:15:01', 1021],
        ['2016-02-08 19:30:02', 1021],
        ['2016-02-08 19:45:02', 1020],
        ['2016-02-08 20:00:01', 1020],
        ['2016-02-08 20:15:02', 1020],
        ['2016-02-08 20:30:01', 1020],
        ['2016-02-08 20:45:01', 1019],
        ['2016-02-08 21:00:02', 1019],
        ['2016-02-08 21:15:01', 1019],
        ['2016-02-08 21:30:02', 1019],
        ['2016-02-08 21:45:02', 1019],
        ['2016-02-08 22:00:02', 1018],
        ['2016-02-08 22:15:02', 1019],
        ['2016-02-08 22:30:01', 1019],
        ['2016-02-08 22:45:01', 1019],
        ['2016-02-08 23:00:01', 1019],
        ['2016-02-08 23:15:02', 1019],
        ['2016-02-08 23:30:02', 1019],
        ['2016-02-08 23:45:01', 1019],
        ['2016-02-09 00:00:02', 1019],
        ['2016-02-09 00:15:01', 1019],
        ['2016-02-09 00:30:02', 1019],
        ['2016-02-09 00:45:01', 1020],
        ['2016-02-09 01:00:02', 1020],
        ['2016-02-09 01:15:01', 1020],
        ['2016-02-09 01:30:01', 1020],
        ['2016-02-09 01:45:01', 1020],
        ['2016-02-09 01:49:09', 1021],
        ['2016-02-09 02:00:01', 1021],
        ['2016-02-09 02:15:02', 1021],
        ['2016-02-09 02:30:02', 1021],
        ['2016-02-09 02:45:02', 1021],
        ['2016-02-09 03:00:01', 1021],
        ['2016-02-09 03:15:02', 1021],
        ['2016-02-09 03:30:02', 1021],
        ['2016-02-09 03:45:02', 1021],
        ['2016-02-09 04:00:01', 1021],
        ['2016-02-09 04:15:01', 1021],
        ['2016-02-09 04:30:02', 1021],
        ['2016-02-09 04:45:02', 1021],
        ['2016-02-09 05:00:02', 1022],
        ['2016-02-09 05:15:01', 1021],
        ['2016-02-09 05:30:01', 1021],
        ['2016-02-09 05:45:02', 1021],
        ['2016-02-09 06:00:02', 1021],
        ['2016-02-09 06:15:02', 1021],
        ['2016-02-09 06:30:01', 1021],
        ['2016-02-09 06:39:58', 1021],
        ['2016-02-09 06:45:01', 1021],
        ['2016-02-09 07:00:01', 1021],
        ['2016-02-09 07:15:02', 1021],
        ['2016-02-09 07:30:02', 1021]
      ]);
      var data2 = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Temp', 75.577],
        ['RH', 29.82]
      ]);



      var chart = new google.visualization.LineChart(document.getElementById('chart1'));
      chart.draw(data, options1);



      var options1 = {
        title: 'Outside Temperature',
        curveType: 'none',
        legend: {
          position: 'bottom'}
      };

      var options3 = {
        title: 'Outside Humidity',
        curveType: 'none',
        legend: {
          position: 'bottom'
        }
      };

      var options4 = {
        title: 'Outside Pressure',
        curveType: 'none',
        legend: {
          position: 'bottom'
        }
      };
      var options2 = {
        redFrom: 90,
        redTo: 100,
        yellowFrom: 75,
        yellowTo: 90,
        minorTicks: 5
      };

      var chart2 = new google.visualization.Gauge(document.getElementById('chart2'));
      chart2.draw(data2, options2);


      ////////////////


      var chart3 = new google.visualization.LineChart(document.getElementById('chart3'));
      chart3.draw(data3, options3);
      var chart4 = new google.visualization.LineChart(document.getElementById('chart4'));
      chart4.draw(data4, options4);
    }
  </script>
</head>

<body>
</body>

</html>

Screenshot

Upvotes: 1

Views: 1202

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

Answers:

  1. First chart title is not visible since chart.draw function is called before options is getting initialized
  2. The same reason as specified in item 1
  3. X axis labels are not displayed since they are getting truncated, set chart size
  4. set option slantedTextAngle to set text angle , e.g. hAxis: { slantedText:true, slantedTextAngle:90 }

Modified example

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Temperature'],
      ['2016-02-08 08:46:04', 79],
      ['2016-02-08 08:47:02', 79],
      ['2016-02-08 09:00:02', 77],
      ['2016-02-08 09:15:01', 76],
      ['2016-02-08 09:30:01', 78],
      ['2016-02-08 09:45:02', 78],
      ['2016-02-08 10:00:01', 77],
      ['2016-02-08 10:15:01', 77],
      ['2016-02-08 10:29:23', 78],
      ['2016-02-08 10:30:02', 78],
      ['2016-02-08 10:45:02', 77],
      ['2016-02-08 11:00:01', 77],
      ['2016-02-08 11:15:02', 78],
      ['2016-02-08 11:30:01', 78],
      ['2016-02-08 11:45:02', 77],
      ['2016-02-08 12:00:02', 77],
      ['2016-02-08 12:15:02', 78],
      ['2016-02-08 12:30:02', 77],
      ['2016-02-08 12:45:02', 76],
      ['2016-02-08 13:00:01', 75],
      ['2016-02-08 13:15:01', 74],
      ['2016-02-08 13:30:02', 76],
      ['2016-02-08 13:45:02', 76],
      ['2016-02-08 14:00:02', 75],
      ['2016-02-08 14:15:02', 75],
      ['2016-02-08 14:30:01', 77],
      ['2016-02-08 14:45:01', 77],
      ['2016-02-08 15:00:01', 76],
      ['2016-02-08 15:15:02', 77],
      ['2016-02-08 15:30:02', 77],
      ['2016-02-08 15:45:02', 77],
      ['2016-02-08 16:00:02', 77],
      ['2016-02-08 16:15:02', 77],
      ['2016-02-08 16:30:01', 78],
      ['2016-02-08 16:45:01', 78],
      ['2016-02-08 17:00:02', 78],
      ['2016-02-08 17:15:01', 79],
      ['2016-02-08 17:30:02', 78],
      ['2016-02-08 17:45:02', 77],
      ['2016-02-08 18:00:02', 77],
      ['2016-02-08 18:15:01', 77],
      ['2016-02-08 18:30:02', 77],
      ['2016-02-08 18:45:01', 77],
      ['2016-02-08 19:00:02', 78],
      ['2016-02-08 19:15:01', 78],
      ['2016-02-08 19:30:02', 77],
      ['2016-02-08 19:45:02', 77],
      ['2016-02-08 20:00:01', 77],
      ['2016-02-08 20:15:02', 77],
      ['2016-02-08 20:30:01', 77],
      ['2016-02-08 20:45:01', 77],
      ['2016-02-08 21:00:02', 77],
      ['2016-02-08 21:15:01', 77],
      ['2016-02-08 21:30:02', 77],
      ['2016-02-08 21:45:02', 77],
      ['2016-02-08 22:00:02', 77],
      ['2016-02-08 22:15:02', 77],
      ['2016-02-08 22:30:01', 77],
      ['2016-02-08 22:45:01', 77],
      ['2016-02-08 23:00:01', 77],
      ['2016-02-08 23:15:02', 76],
      ['2016-02-08 23:30:02', 76],
      ['2016-02-08 23:45:01', 76],
      ['2016-02-09 00:00:02', 76],
      ['2016-02-09 00:15:01', 76],
      ['2016-02-09 00:30:02', 76],
      ['2016-02-09 00:45:01', 76],
      ['2016-02-09 01:00:02', 76],
      ['2016-02-09 01:15:01', 76],
      ['2016-02-09 01:30:01', 75],
      ['2016-02-09 01:45:01', 75],
      ['2016-02-09 01:49:09', 75],
      ['2016-02-09 02:00:01', 75],
      ['2016-02-09 02:15:02', 75],
      ['2016-02-09 02:30:02', 76],
      ['2016-02-09 02:45:02', 75],
      ['2016-02-09 03:00:01', 75],
      ['2016-02-09 03:15:02', 75],
      ['2016-02-09 03:30:02', 75],
      ['2016-02-09 03:45:02', 74],
      ['2016-02-09 04:00:01', 75],
      ['2016-02-09 04:15:01', 75],
      ['2016-02-09 04:30:02', 75],
      ['2016-02-09 04:45:02', 75],
      ['2016-02-09 05:00:02', 75],
      ['2016-02-09 05:15:01', 76],
      ['2016-02-09 05:30:01', 75],
      ['2016-02-09 05:45:02', 75],
      ['2016-02-09 06:00:02', 76],
      ['2016-02-09 06:15:02', 76],
      ['2016-02-09 06:30:01', 75],
      ['2016-02-09 06:39:58', 75],
      ['2016-02-09 06:45:01', 75],
      ['2016-02-09 07:00:01', 76],
      ['2016-02-09 07:15:02', 76],
      ['2016-02-09 07:30:02', 75]
    ]);
    var data3 = google.visualization.arrayToDataTable([
      ['Time', 'Humidity'],
      ['2016-02-08 08:46:04', 35],
      ['2016-02-08 08:47:02', 35],
      ['2016-02-08 09:00:02', 36],
      ['2016-02-08 09:15:01', 36],
      ['2016-02-08 09:30:01', 35],
      ['2016-02-08 09:45:02', 35],
      ['2016-02-08 10:00:01', 35],
      ['2016-02-08 10:15:01', 35],
      ['2016-02-08 10:29:23', 34],
      ['2016-02-08 10:30:02', 34],
      ['2016-02-08 10:45:02', 35],
      ['2016-02-08 11:00:01', 36],
      ['2016-02-08 11:15:02', 34],
      ['2016-02-08 11:30:01', 34],
      ['2016-02-08 11:45:02', 34],
      ['2016-02-08 12:00:02', 35],
      ['2016-02-08 12:15:02', 34],
      ['2016-02-08 12:30:02', 34],
      ['2016-02-08 12:45:02', 34],
      ['2016-02-08 13:00:01', 34],
      ['2016-02-08 13:15:01', 34],
      ['2016-02-08 13:30:02', 33],
      ['2016-02-08 13:45:02', 33],
      ['2016-02-08 14:00:02', 34],
      ['2016-02-08 14:15:02', 33],
      ['2016-02-08 14:30:01', 32],
      ['2016-02-08 14:45:01', 32],
      ['2016-02-08 15:00:01', 33],
      ['2016-02-08 15:15:02', 31],
      ['2016-02-08 15:30:02', 31],
      ['2016-02-08 15:45:02', 32],
      ['2016-02-08 16:00:02', 32],
      ['2016-02-08 16:15:02', 32],
      ['2016-02-08 16:30:01', 31],
      ['2016-02-08 16:45:01', 33],
      ['2016-02-08 17:00:02', 31],
      ['2016-02-08 17:15:01', 30],
      ['2016-02-08 17:30:02', 29],
      ['2016-02-08 17:45:02', 31],
      ['2016-02-08 18:00:02', 31],
      ['2016-02-08 18:15:01', 31],
      ['2016-02-08 18:30:02', 31],
      ['2016-02-08 18:45:01', 31],
      ['2016-02-08 19:00:02', 31],
      ['2016-02-08 19:15:01', 31],
      ['2016-02-08 19:30:02', 32],
      ['2016-02-08 19:45:02', 31],
      ['2016-02-08 20:00:01', 31],
      ['2016-02-08 20:15:02', 32],
      ['2016-02-08 20:30:01', 32],
      ['2016-02-08 20:45:01', 34],
      ['2016-02-08 21:00:02', 33],
      ['2016-02-08 21:15:01', 33],
      ['2016-02-08 21:30:02', 32],
      ['2016-02-08 21:45:02', 31],
      ['2016-02-08 22:00:02', 31],
      ['2016-02-08 22:15:02', 30],
      ['2016-02-08 22:30:01', 29],
      ['2016-02-08 22:45:01', 30],
      ['2016-02-08 23:00:01', 30],
      ['2016-02-08 23:15:02', 29],
      ['2016-02-08 23:30:02', 28],
      ['2016-02-08 23:45:01', 27],
      ['2016-02-09 00:00:02', 29],
      ['2016-02-09 00:15:01', 30],
      ['2016-02-09 00:30:02', 30],
      ['2016-02-09 00:45:01', 32],
      ['2016-02-09 01:00:02', 32],
      ['2016-02-09 01:15:01', 32],
      ['2016-02-09 01:30:01', 32],
      ['2016-02-09 01:45:01', 33],
      ['2016-02-09 01:49:09', 33],
      ['2016-02-09 02:00:01', 33],
      ['2016-02-09 02:15:02', 32],
      ['2016-02-09 02:30:02', 32],
      ['2016-02-09 02:45:02', 32],
      ['2016-02-09 03:00:01', 32],
      ['2016-02-09 03:15:02', 32],
      ['2016-02-09 03:30:02', 32],
      ['2016-02-09 03:45:02', 32],
      ['2016-02-09 04:00:01', 33],
      ['2016-02-09 04:15:01', 33],
      ['2016-02-09 04:30:02', 33],
      ['2016-02-09 04:45:02', 32],
      ['2016-02-09 05:00:02', 32],
      ['2016-02-09 05:15:01', 31],
      ['2016-02-09 05:30:01', 32],
      ['2016-02-09 05:45:02', 31],
      ['2016-02-09 06:00:02', 30],
      ['2016-02-09 06:15:02', 30],
      ['2016-02-09 06:30:01', 31],
      ['2016-02-09 06:39:58', 30],
      ['2016-02-09 06:45:01', 30],
      ['2016-02-09 07:00:01', 29],
      ['2016-02-09 07:15:02', 29],
      ['2016-02-09 07:30:02', 29]
    ]);
    var data4 = google.visualization.arrayToDataTable([
      ['Time', 'Pressure'],
      ['2016-02-08 08:46:04', 1018],
      ['2016-02-08 08:47:02', 1018],
      ['2016-02-08 09:00:02', 1018],
      ['2016-02-08 09:15:01', 1018],
      ['2016-02-08 09:30:01', 1018],
      ['2016-02-08 09:45:02', 1018],
      ['2016-02-08 10:00:01', 1018],
      ['2016-02-08 10:15:01', 1018],
      ['2016-02-08 10:29:23', 1018],
      ['2016-02-08 10:30:02', 1018],
      ['2016-02-08 10:45:02', 1019],
      ['2016-02-08 11:00:01', 1019],
      ['2016-02-08 11:15:02', 1019],
      ['2016-02-08 11:30:01', 1019],
      ['2016-02-08 11:45:02', 1020],
      ['2016-02-08 12:00:02', 1020],
      ['2016-02-08 12:15:02', 1020],
      ['2016-02-08 12:30:02', 1021],
      ['2016-02-08 12:45:02', 1021],
      ['2016-02-08 13:00:01', 1021],
      ['2016-02-08 13:15:01', 1021],
      ['2016-02-08 13:30:02', 1022],
      ['2016-02-08 13:45:02', 1022],
      ['2016-02-08 14:00:02', 1022],
      ['2016-02-08 14:15:02', 1022],
      ['2016-02-08 14:30:01', 1022],
      ['2016-02-08 14:45:01', 1023],
      ['2016-02-08 15:00:01', 1023],
      ['2016-02-08 15:15:02', 1023],
      ['2016-02-08 15:30:02', 1023],
      ['2016-02-08 15:45:02', 1023],
      ['2016-02-08 16:00:02', 1023],
      ['2016-02-08 16:15:02', 1023],
      ['2016-02-08 16:30:01', 1023],
      ['2016-02-08 16:45:01', 1023],
      ['2016-02-08 17:00:02', 1023],
      ['2016-02-08 17:15:01', 1023],
      ['2016-02-08 17:30:02', 1023],
      ['2016-02-08 17:45:02', 1022],
      ['2016-02-08 18:00:02', 1022],
      ['2016-02-08 18:15:01', 1022],
      ['2016-02-08 18:30:02', 1022],
      ['2016-02-08 18:45:01', 1022],
      ['2016-02-08 19:00:02', 1021],
      ['2016-02-08 19:15:01', 1021],
      ['2016-02-08 19:30:02', 1021],
      ['2016-02-08 19:45:02', 1020],
      ['2016-02-08 20:00:01', 1020],
      ['2016-02-08 20:15:02', 1020],
      ['2016-02-08 20:30:01', 1020],
      ['2016-02-08 20:45:01', 1019],
      ['2016-02-08 21:00:02', 1019],
      ['2016-02-08 21:15:01', 1019],
      ['2016-02-08 21:30:02', 1019],
      ['2016-02-08 21:45:02', 1019],
      ['2016-02-08 22:00:02', 1018],
      ['2016-02-08 22:15:02', 1019],
      ['2016-02-08 22:30:01', 1019],
      ['2016-02-08 22:45:01', 1019],
      ['2016-02-08 23:00:01', 1019],
      ['2016-02-08 23:15:02', 1019],
      ['2016-02-08 23:30:02', 1019],
      ['2016-02-08 23:45:01', 1019],
      ['2016-02-09 00:00:02', 1019],
      ['2016-02-09 00:15:01', 1019],
      ['2016-02-09 00:30:02', 1019],
      ['2016-02-09 00:45:01', 1020],
      ['2016-02-09 01:00:02', 1020],
      ['2016-02-09 01:15:01', 1020],
      ['2016-02-09 01:30:01', 1020],
      ['2016-02-09 01:45:01', 1020],
      ['2016-02-09 01:49:09', 1021],
      ['2016-02-09 02:00:01', 1021],
      ['2016-02-09 02:15:02', 1021],
      ['2016-02-09 02:30:02', 1021],
      ['2016-02-09 02:45:02', 1021],
      ['2016-02-09 03:00:01', 1021],
      ['2016-02-09 03:15:02', 1021],
      ['2016-02-09 03:30:02', 1021],
      ['2016-02-09 03:45:02', 1021],
      ['2016-02-09 04:00:01', 1021],
      ['2016-02-09 04:15:01', 1021],
      ['2016-02-09 04:30:02', 1021],
      ['2016-02-09 04:45:02', 1021],
      ['2016-02-09 05:00:02', 1022],
      ['2016-02-09 05:15:01', 1021],
      ['2016-02-09 05:30:01', 1021],
      ['2016-02-09 05:45:02', 1021],
      ['2016-02-09 06:00:02', 1021],
      ['2016-02-09 06:15:02', 1021],
      ['2016-02-09 06:30:01', 1021],
      ['2016-02-09 06:39:58', 1021],
      ['2016-02-09 06:45:01', 1021],
      ['2016-02-09 07:00:01', 1021],
      ['2016-02-09 07:15:02', 1021],
      ['2016-02-09 07:30:02', 1021]
    ]);
    var data2 = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Temp', 75.577],
      ['RH', 29.82]
    ]);



  
    

    var options1 = {
        title: 'Outside Temperature',
        curveType: 'none',
        legend: {
            position: 'bottom'
        },
        chartArea:{top:0,height:200},
        hAxis: {
           slantedText:true,
           slantedTextAngle:90
        },
    };

    var options3 = {
        title: 'Outside Humidity',
        curveType: 'none',
        legend: {
            position: 'bottom'
        },
        chartArea:{top:0,height:200},
        hAxis: {
           slantedText:true,
           slantedTextAngle:90
        }
    };

    var options4 = {
        title: 'Outside Pressure',
        curveType: 'none',
        legend: {
            position: 'bottom'
        },
        chartArea:{top:0,height:200},
        hAxis: {
           slantedText:true,
           slantedTextAngle:90
        }
    };
    var options2 = {
        redFrom: 90,
        redTo: 100,
        yellowFrom: 75,
        yellowTo: 90,
        minorTicks: 5
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart1'));
    chart.draw(data, options1);


    var chart2 = new google.visualization.Gauge(document.getElementById('chart2'));
    chart2.draw(data2, options2);


    ////////////////


    var chart3 = new google.visualization.LineChart(document.getElementById('chart3'));
    chart3.draw(data3, options3);
    var chart4 = new google.visualization.LineChart(document.getElementById('chart4'));
    chart4.draw(data4, options4);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart1" style="height:400px"></div>
<div id="chart2"></div>
<div id="chart3" style="height:400px"></div>
<div id="chart4" style="height:400px"></div>

Upvotes: 1

Related Questions