Not Able To Zoom In On Google Charts

I have created a Google Chart that visualises the outside temperature at my house. The amount of data keeps growing, so the chart gets unreadable in a few days ;-) I want to be abl

Solution 1:

try using the current library...

<script src="https://www.gstatic.com/charts/loader.js"></script>

jsapi is out of date, according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this will only change the load statement, see following working snippet...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  $.get(
    "https://cors-anywhere.herokuapp.com/https://weather.wtrdk.nl/temperature.csv",
    function(csvString) {
      // transform the CSV string into a 2-dimensional arrayvar arrayData = $.csv.toArrays(csvString, {
        onParseValue: $.csv.hooks.castToScalar
      });

      // this new DataTable object holds all the datavar data = new google.visualization.arrayToDataTable(arrayData);
      
       var view = new google.visualization.DataView(data);
  view.setColumns([
    // first column is calculated
    {
      calc: function (dt, row) {
        // convert string to datereturnnewDate(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'datetime'
    },
    // just use index # for second column1
     ]);


      var temperature = new google.visualization.ChartWrapper({
        chartType: "AreaChart",
        containerId: "temperature",
        dataTable: view,
        options: {
          height: 400,
          explorer: {
            actions: ["dragToZoom", "rightClickToReset"],
            //axis: "horizontal",//keepInBounds: true
          },
          animation: { duration: 2000, easing: "out", startup: true },
          title: "Temperature",
          titleTextStyle: { color: "grey", fontSize: 11 },
          legend: { textStyle: { color: "grey", fontSize: 11 } },
          backgroundColor: { fill: "transparent" },
          colors: ["#e39c3a"],
          hAxis: {
            textStyle: {
              color: "grey",
              fontSize: 11
            },
            //format: 'datetime',
          },
          vAxis: {
            title: "°C",
            titleTextStyle: {
              color: "grey",
              fontSize: 22
            },
            textStyle: {
              color: "grey",
              fontSize: 11
            }
          }
        }
      });
      temperature.draw();
    }
  );
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><scriptsrc="https://weather.wtrdk.nl/jquery.csv.min.js"></script><bodybgcolor="#282B30"><divid="temperature"></div></body>