Not Able To Zoom In On Google Charts

July 23, 2022 Post a Comment

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...

Baca Juga

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 array
      var arrayData = $.csv.toArrays(csvString, {
        onParseValue: $.csv.hooks.castToScalar
      });

      // this new DataTable object holds all the data
      var 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 date
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'datetime'
    },
    // just use index # for second column
    1
     ]);


      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();
    }
  );
});

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

JavaScript Gen

Not Able To Zoom In On Google Charts

Solution 1:

Post a Comment for "Not Able To Zoom In On Google Charts"