How to reload data in Google Maps Calendar while keeping the cell selected?

I use jQuery and I use the following JS function to load and reload / redraw the Google Chart Calendar.

It works, however, it also removes the border from the selected item. I want to reload the calendar data, while keeping the currently selected item selected.

Any ideas?

function refreshCalendar( rows)
{
    //if( calendar != 0 )
    {
        calendar = new google.visualization.Calendar(document.getElementById('calendar_basic'))

        google.visualization.events.addListener(calendar, 'select', calendarSelectHandler);

        calendarData = new google.visualization.DataTable();
        calendarData.addColumn({ type: 'date', id: 'Date' });
        calendarData.addColumn({ type: 'number', id: 'Logs' });
        calendarData.addRows( rows );

        calendarOptions = {
            title: "Logs",
            height: 175,
            colorAxis: {minValue: 0,  colors: ['#FFFFFF', '#FF0000']},
            calendar: {
              focusedCellColor: {
                background: '#00FF00',
                stroke: '#004400',
                strokeOpacity: 1,
                strokeWidth: 2,
              },
              cellColor: {
                stroke: '#76a7fa',
                strokeOpacity: 0.5,
                strokeWidth: 1,
              }
            }
        };

        calendar.draw(calendarData, calendarOptions);
    }
}

Normally, you would use chart.getSelection and chart.setSelection.

Get selection on 'select' event
Set selection on 'ready' event

getSelection works fine, but setSelection doesn't work with the Calendar chart.
No error is thrown, but nothing is selected.
I tried versions '41' thru 'current'...

To demonstrate, the following example uses both a Calendar chart and a Column chart.
Make a selection on both charts, then click "Redraw Chart".
The selection for the Column chart remains but not on the Calendar.

google.charts.load('current', {
  callback: drawChart,
  packages: ['calendar', 'corechart']
});

function drawChart() {
  var selectionCal;
  var selectionCol;

  var calendar = new google.visualization.Calendar(document.getElementById('calendar'))
  google.visualization.events.addListener(calendar, 'select', function () {
    selectionCal = calendar.getSelection();
  });
  google.visualization.events.addListener(calendar, 'ready', function () {
    if (selectionCal) {
      calendar.setSelection(selectionCal);
    }
  });

  var column = new google.visualization.ColumnChart(document.getElementById('column'))
  google.visualization.events.addListener(column, 'select', function () {
    selectionCol = column.getSelection();
  });
  google.visualization.events.addListener(column, 'ready', function () {
    if (selectionCol) {
      column.setSelection(selectionCol);
    }
  });

  document.getElementById('test_button').addEventListener('click', function () {
    calendar.draw(calendarData, calendarOptions);
    column.draw(calendarData, {});
  }, false);

  var calendarData = new google.visualization.DataTable();
  calendarData.addColumn({ type: 'date', id: 'Date' });
  calendarData.addColumn({ type: 'number', id: 'Logs' });
  calendarData.addRows([
    [ new Date(2012, 3, 13), 37032 ],
    [ new Date(2012, 3, 14), 38024 ],
    [ new Date(2012, 3, 15), 38024 ],
    [ new Date(2012, 3, 16), 38108 ],
    [ new Date(2012, 3, 17), 38229 ],
  ]);

  var calendarOptions = {
      title: "Logs",
      height: 175,
      colorAxis: {minValue: 0,  colors: ['#FFFFFF', '#FF0000']},
      calendar: {
        focusedCellColor: {
          background: '#00FF00',
          stroke: '#004400',
          strokeOpacity: 1,
          strokeWidth: 2,
        },
        cellColor: {
          stroke: '#76a7fa',
          strokeOpacity: 0.5,
          strokeWidth: 1,
        }
      }
  };

  calendar.draw(calendarData, calendarOptions);
  column.draw(calendarData, {});
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar"></div>
<div id="column"></div>
<input type="button" id="test_button" value="Redraw Chart" />

Related Articles