Adjust Google Column Chart Data in small chunks

I have plotted google charts as below (please enter the image) enter image description here. Is there any way by which I can show 5-year charts at a one time and adjust the remaining chart in a slider.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2001', 1001, 400, 200],
          ['2002', 1002, 400, 200],
          ['2003', 1003, 400, 200],
          ['2004', 1004, 400, 200],
          ['2005', 1005, 400, 200],
          ['2006', 1006, 400, 200],
          ['2007', 1007, 400, 200],
          ['2008', 1008, 400, 200],
          ['2009', 1009, 400, 200],
          ['2010', 1010, 400, 200],
          ['2011', 1011, 400, 200],
          ['2012', 1012, 400, 200],
          ['2013', 1013, 400, 200],
          ['2014', 1014, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350],
          ['2018', 1030, 540, 350],
          ['2019', 1030, 540, 350],
          ['2020', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2000-2020',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

I want to show 2000-2005 data first then 2006-2010 the 2011-2015 and last 2016-2020.

Upvotes: 1

Answers (1)

WhiteHat

Reputation: 61230

we can use google's Controls and Dashboards to draw the chart with an attached range filter.

we use the ChartWrapper class to draw the chart.

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Bar',
    containerId: 'columnchart_material',
    options: google.charts.Bar.convertOptions({
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2000-2020',
      },
      hAxis: {
        format: '0000'
      }
    })
  });

and the ControlWrapper class to create the ChartRangeFilter control
when we define the range filter, we can set the initial state property,
to display the initial range of 2000 - 2005

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_range_filter',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            format: '0000'
          }
        }
      }
    },
    state: {
      range: {
        start: 2000,
        end : 2005
      }
    }
  });

we use the Dashboard class to bind the two together and draw the dashboard.

var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard') ); dashboard.bind(control, chart); dashboard.draw(data);

you can also have multiple charts and controls in a single dashboard.
just pass an array of each to the bind method, e.g.

dashboard.bind([control1, control2], [chart1, chart2]);

the only real difference, the range filter must be set to a number or date column.
it cannot use string columns.

so we must change the first column in the data to a number (2001) vs string ('2001')...

see following working snippet...
(use the Full page link at the top of the snippet)

google.charts.load('47', {
  packages: ['controls', 'bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    [2001, 1001, 400, 200],
    [2002, 1002, 400, 200],
    [2003, 1003, 400, 200],
    [2004, 1004, 400, 200],
    [2005, 1005, 400, 200],
    [2006, 1006, 400, 200],
    [2007, 1007, 400, 200],
    [2008, 1008, 400, 200],
    [2009, 1009, 400, 200],
    [2010, 1010, 400, 200],
    [2011, 1011, 400, 200],
    [2012, 1012, 400, 200],
    [2013, 1013, 400, 200],
    [2014, 1014, 400, 200],
    [2015, 1170, 460, 250],
    [2016, 660, 1120, 300],
    [2017, 1030, 540, 350],
    [2018, 1030, 540, 350],
    [2019, 1030, 540, 350],
    [2020, 1030, 540, 350]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Bar',
    containerId: 'columnchart_material',
    options: google.charts.Bar.convertOptions({
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2000-2020',
      },
      hAxis: {
        format: '0000'
      }
    })
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_range_filter',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            format: '0000'
          }
        }
      }
    },
    state: {
      range: {
        start: 2000,
        end : 2005
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  dashboard.bind(control, chart);
  dashboard.draw(data);
  window.addEventListener('resize', function () {
    dashboard.draw(data);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#dashboard {
  height: 100%;
}

#columnchart_material {
  height: 80%;
}

#control_range_filter {
  height: 20%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="columnchart_material"></div>
  <div id="control_range_filter"></div>
</div>

Upvotes: 1

Adjust Google Column Chart Data in small chunks

Answers (1)

Related Questions