Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script src="highstock.js" type="text/javascript"></script>
<script src="exporting.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

  var c = [];
  var d = [];
  var options = {
    chart: {
      backgroundColor: '#FCFFC5',
      renderTo: 'chart',
      defaultSeriesType: 'line'
    },
                plotOptions: {
    line: {
        zones: [{
            value: 18, // Values up to 10 (not including) ...
            color: 'red' // ... have the color blue.
        },{
            value: 22, // Values up to 10 (not including) .
            color: 'yellow' // ... have the color blue.
        },{
            value: 27, // Values up to 10 (not including) ...
            color: 'lightgreen' // ... have the color blue.
        },{
            value: 32, // Values up to 10 (not including) ...
            color: 'yellow' // ... have the color blue.
        },{
            color: 'red' // Values from 10 (including) and up have the color red
        }]
    }
},

    title: {
      text: 'Water temp(°C)'
    },
    rangeSelector: {
      enabled: true,
      buttons: [
        {
          type: 'minute',
          count: 5,
          text: '5m'
        }, {
          type: 'day',
          count: 1,
          text: 'day'
        }, {
          type: 'month',
          count: 1,
          text: 'month'
        }, {
          type: 'year',
          count: 1,
          text: 'year'
        }, {
          type: 'all',
          text: 'All'
        }
      ],
      allButtonsEnabled: true
    },
    xAxis: {
      title: {
        text: 'Date Measurement'
      },
      type: 'datetime'

    },
    yAxis: {
        max:55,
        min:14,
      title: {
        text: 'reading'
      },
      plotLines: [ {
                value: '20',
                color: 'red',

                width: 2,
                label: {
                    text: 'lower limit'
                }
            }
        , {
                value: '30',
                color: 'red',

                width: 2,
                label: {
                    text: 'upper limit'
                }
            }]


            },

    series: [{
      data: d,
      tooltip: {
        valueDecimals: 2
      }
    }]
  };

  var jqxhr = $.get('https://drive.google.com/uc?export=download&id=1G_ffup-_S3muG1DakppAsH0IIfQv1ZSw', function(data) {
    var lines = data.split('n'),
        aDate,
      parseDate = function (rawDate) {
      // rawDate like 07/11/2017 15:28:34
        var dateAndTime = (rawDate.split('"')[1] || rawDate).split(' '),
          date = dateAndTime[0].split('/').reverse(),
          time = dateAndTime[1].split(':');
          //in Date.UTC months are indexed from 0, so -1
        return Date.UTC(+date[0], +date[1] - 1, +date[2], +time[0], +time[1], +time[2]);
      };

    $.each(lines, function(lineNo, line) {
      if (lineNo > 0 && line) {
        var items = line.split(';');
        aDate = parseDate(items[1]);
        d.push([aDate, parseFloat(items[2])]);
      }
    });
    var chart = new Highcharts.stockChart(options);
  });
});

</script>
   </head>
   <body>


<div id="chart" style="width: 1200px; height: 600px; margin: 0
auto"></div>
   </body>
</html>