Please help .... date time graph trying to plot data vs date time :(

11 views

Skip to first unread message

Roy Taylor

unread,

Jul 18, 2016, 11:03:27 AM7/18/16

to Google Visualization API

here my code but I cant show the data

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

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="application/x-javascript">
      google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Motivation ddddd');
//var formatter = new google.visualization.DateFormat({pattern: "yyyy-mm-dd HH:mm:ss"});
//formatter.format(data,0) ;
      data.addRows([

[new Date('2016-07-04 08:03:00') ,    404     , 4938 ],
[new Date('2016-07-04 10:04:00') ,    404.4 ,    4915] ,
[new Date('2016-07-04 12:05:00') ,    404.3 ,    4862] ,
[new Date('2016-07-04 13:06:00') ,    404.8 ,    4826] ,
[new Date('2016-07-04 15:07:00') ,    404.4 ,    4756] ,
[new Date('2016-07-04 16:08:00') ,    402.6 ,    4713] ,
[new Date('2016-07-04 17:09:00') ,    404     , 4655 ]    ,
[new Date('2016-07-04 18:10:00') ,    403.4 ,    4610 ]

      ]);

      var options = {
        width: 900,
        height: 500,
        legend: {position: 'none'},
        enableInteractivity: true,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
          // min: new Date('2016-07-04 08:03:00'),
         // max: new Date('2017-08-04 08:03:00')
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['mm dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }
      };

      var chart = new google.visualization.LineChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);

      var button = document.getElementById('change');
      var isChanged = false;

      button.onclick = function () {
        if (!isChanged) {
          options.hAxis.viewWindow.min = new Date(2016, 0, 1);
          options.hAxis.viewWindow.max = new Date(2016, 0, 1, 3);
          isChanged = true;
        } else {
          options.hAxis.viewWindow.min = new Date(2016, 11, 31, 18),
          options.hAxis.viewWindow.max = new Date(2017, 12, 3, 1)
          isChanged = false;
        }
        chart.draw(data, options);
      };
    }

        </script>

</head>
<body>




    <button id="change">Change View Window</button>
<div id="chart_div"></div>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages