Google linechart scrolling/zoom issue

Question

I am new to javascript. I am trying to get scrolling working for a Google Linechart but all I get is a static graph and no scrolling. I am using the example I found at the below link which works well for the set of defined data in the example but when I try and load data from a CSV file then just the static graph.

Zoom Google Line chart

    <html>

    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="jquery.csv.js"></script>
    <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(BasicLine);

        function BasicLine() 
        {
            $.get("mil.csv", function(csvString) 
            {
                var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}),
                    data      = new google.visualization.arrayToDataTable(arrayData),
                    options   = {
                                  hAxis:
                                  {
                                    title: 'Date'
                                  },
                                  vAxis:
                                  {
                                    title: 'Total'
                                  },
                                  backgroundColor: '#f1f8e9',
                                  lineWidth: 0.7,
                                  chartArea:{width:'100%',height:'100%'},

                                            vAxis: {
                minValue: 0
              },

              explorer: {
                axis: 'horizontal',
                keepInBounds: true,
                maxZoomIn: 4.0
              },
                                },
                    chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                    chart.draw(data, options);

            }, 'text');
        }
    </script>
    </head>
    <body>
        <!--Div that will hold the pie chart-->
        <div id="chart_div"></div>
    </body>

    </html>

CSV File (first 20 rows)

Date,Total
9-Oct-17,103173
10-Oct-17,103377
11-Oct-17,103903
12-Oct-17,103644
13-Oct-17,103511
14-Oct-17,103511
15-Oct-17,103511
16-Oct-17,103541
17-Oct-17,103636
18-Oct-17,103868
19-Oct-17,104419
20-Oct-17,104770
21-Oct-17,104770
22-Oct-17,104770
23-Oct-17,104748
24-Oct-17,104986
25-Oct-17,104994
26-Oct-17,105246
27-Oct-17,105424

Thanks for replying. I have updated the question with the first 20 lines of my csv file — ratsstack, Oct 16 '18 at 20:23

WhiteHat · Accepted Answer · 2018-10-22T14:23:55.443

the explorer option is only supported by a continuous axis.

For a continuous axis, set the data column type to one of: number, date, datetime or timeofday.
For a discrete axis, set the data column type to string.

see --> discrete vs continuous

when using arrayToDataTable with the sample csv data,
the first column type is set to string by default.
(note: the new keyword isn't needed with arrayToDataTable, it is a static method)

we can convert the first column to a real date to enable the explorer option.

arrayData = arrayData.map(function (row) {
  return [
    new Date(row[0]),
    row[1]
  ];
});

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var csvString = 'Date,Total\n9-Oct-17,103173\n10-Oct-17,103377\n11-Oct-17,103903\n12-Oct-17,103644\n13-Oct-17,103511\n14-Oct-17,103511\n15-Oct-17,103511\n16-Oct-17,103541\n17-Oct-17,103636\n18-Oct-17,103868\n19-Oct-17,104419\n20-Oct-17,104770\n21-Oct-17,104770\n22-Oct-17,104770\n23-Oct-17,104748\n24-Oct-17,104986\n25-Oct-17,104994\n26-Oct-17,105246\n27-Oct-17,105424\n';
  var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
  arrayData = arrayData.map(function (row) {
    return [
      new Date(row[0]),
      row[1]
    ];
  });
  var data = google.visualization.arrayToDataTable(arrayData);
  var options = {
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      minValue: 0,
      title: 'Total'
    },
    backgroundColor: '#f1f8e9',
    lineWidth: 0.7,
    chartArea: {
      height: '100%',
      width: '100%',
      top: 12,
      right: 24,
      bottom: 48,
      left: 72
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: true,
      maxZoomIn: 4.0
    }
  }
  chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: jsapi should no longer be used to load the library, use loader.js instead.

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

EDIT

adding back the $.get function, the snippet should be as follows...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $.get('mil.csv', function(csvString) {
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
    arrayData = arrayData.map(function (row) {
      return [
        new Date(row[0]),
        row[1]
      ];
    });
    var data = google.visualization.arrayToDataTable(arrayData);
    var options = {
      hAxis: {
        title: 'Date'
      },
      vAxis: {
        minValue: 0,
        title: 'Total'
      },
      backgroundColor: '#f1f8e9',
      lineWidth: 0.7,
      chartArea: {
        height: '100%',
        width: '100%',
        top: 12,
        right: 24,
        bottom: 48,
        left: 72
      },
      explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
      }
    }
    chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }, 'text');    
});

Thanks for your post WhiteHat. As I mentioned I am new to JS and am struggling to incorporate the CSV file load using your example. Would you be able to modify your answer to include the CSV file load? Much appreciated. — ratsstack, Oct 22 '18 at 00:49

Google linechart scrolling/zoom issue

1 Answers1