Not able to zoom in on Google Charts

前端未结

关注

 1  1435

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

相关标签:

1条回答

你的背包

2021-01-25 18:16

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

0 讨论(0)