Make google chart dashboard controls larger

Question

I am using google charts and have set up a dashboard with a line chart and a date slider.

This works absolutely fine but there are quite a few dates plotted and so it makes it difficult to accurately choose dates.

To combat this I wish to make the slider longer so that is spans the whole width of the window as it only uses up about 25% of the space available to it, however I cannot see any options in the api to do this.

This is my set up for the slider:

var dateSlider = new google.visualization.ControlWrapper({
            controlType: 'DateRangeFilter',
            containerId: 'resendControl',
            options: {
                filterColumnLabel: 'Week',
                width: ($(window).width())
            }
        });

Here is a jsFiddle: here

Answer 1

ui.cssClass simply allows you to replace the default class given to the control's container

how it works, create a class in css, and assign it to the property...

css

.filter-date {
  background-color: cyan;
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

js

var filterDate = new google.visualization.ControlWrapper({
  controlType: 'DateRangeFilter',
  containerId: 'filter-date',
  options: {
    filterColumnLabel: 'Date',
    ui: {
      // assign custom class
      cssClass: 'filter-date'
    }
  }
});

the resulting container will have the custom class vs. the default of...

google-visualization-controls-rangefilter

the only actual css this default class provides is --> white-space: nowrap

unfortunately, not all the bits and pieces of the actual control will follow the styles placed in the custom class

instead, you must inspect the elements and find the classes you need to override

as such, to make the slide control longer, we can override the default class with...

.filter-date .google-visualization-controls-slider-horizontal {
  width: 800px;  
}

/*  default = 200px  */

---

see following working snippet, you can see how the labels don't follow the color of the custom class, etc...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['controls']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // set x value
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

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

    var filterDate = new google.visualization.ControlWrapper({
      controlType: 'DateRangeFilter',
      containerId: 'filter-date',
      options: {
        filterColumnLabel: 'Date',
        ui: {
          cssClass: 'filter-date'
        }
      }
    });

  var chartColumn = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart-column',
    options: {
      theme: 'material',
      legend: {
        position: 'bottom',
      },
      chartArea: {
        top: 12,
        right: 12,
        bottom: 48,
        left: 48,
        height: '100%',
        width: '100%'
      },
      hAxis: {
        format: 'dd/MM',
        ticks: ticksAxisH
      }
    }
  });

  dashboard.bind(filterDate, chartColumn);
  dashboard.draw(dataTable);
}

.filter-date {
  background-color: cyan;
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

.filter-date .google-visualization-controls-slider-horizontal {
  width: 800px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashbord">
  <div id="filter-date"></div>
  <div id="chart-column"></div>
</div>

---

note: if you want to try to make the width a percentage (100%), then you'll have to track down the parent elements, and adjust those as well...