Using Google Chart Tools
to Create Interactive Dashboards

  // Populating the DataTable.
  var dataTable = Charts.newDataTable()
      .addColumn("Range" , [1, 2, 3, 4, 5, ...])
      .addColumn("Others", [2, 4, 6, 1, 0, ...])
      .addColumn("You"   , [0, 0, 1, 0, 0, ...])
      .addColumn("Winner", [0, 0, 0, 1, 0, ...]);

  // Creating the chart.
  var chart = Charts.newColumnChart()
      .setTitle("Unique Game: The Results")
      .setDimensions(1200, 800)
      .setDataTable(dataTable)
      .setStacked()
      .build();

  // Creating the chart blob.
  var chartBlob = chart.getBlob().getBytes();

  // Prepare the email attachment.
  var chartFile = [{fileName: "chart.png",
                    mimeType: "image/png",
                    content: chartBlob}];

  // Send the email.
  MailApp.sendEmail(
      "charts@google.com",
      "The unique game results",  // Subject
      "Sorry, you did not win. Better luck next time.",  // Content
      {attachments: chartFile});

google.load('visualization', '1', {packages: ['corechart']});

function drawVisualization() {
  var query = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=abc');
  query.send(handleQueryResponse);
}
    
function handleQueryResponse(response) {
  if (response.isError()) { return; } // Handle error.

  var data = response.getDataTable();
  var container = document.getElementById('chart_div')
  chart = new google.visualization.ColumnChart(container);
  chart.draw(data, {});
}

google.load('visualization', '1');

function drawVisualization() {
  wrapper = new google.visualization.ChartWrapper(
        {dataSourceUrl: 'http://spreadsheets.google.com/tq?key=abc',
         chartType    : 'ColumnChart', 
         containerId  : 'chart_div'});
  wrapper.draw();
}

// We can also easily modify and redraw.
wrapper.setChartType('AreaChart');
wrapper.setOption('title', 'My new AreaChart');
wrapper.draw();

var wrapper = new google.visualization.ChartWrapper({...});
// Serializing the wrapper.
wrapper.toJSON();

// Creating a snippet.
google.visualization.createSnippet(wrapper.toJSON());

// Create the ChartWrappter.
var chartWrapper = new google.visualization.ChartWrapper({
  dataSourceUrl: url    // Using a remote data source.
});

// Create an editor instance.
var editor = new google.visualization.ChartEditor();

// Listen to the 'ok' button/event.
google.visualization.events.addListener(editor, 'ok', function() {
       editor.getChartWrapper().draw(chartContainer);
    });

// Open the editor's dialog.
editor.openDialog(chartWrapper);

var wrapper = new google.visualization.ChartWrapper({
  'chartType': 'GeoChart',
  'dataTable': myData,
  'containerId': 'geoElementId',
  'options': {}
});
wrapper.draw();

// Change colors and redraw.
wrapper.setOption('colors', [ '#D6F1FF', '#0A43BF' ]);
wrapper.draw();

// Serialize to JSON
var json = wrapper.toJSON();

var wrapper = new google.visualization.ControlWrapper({
  'controlType': 'NumberRangeFilter',
  'containerId': 'controlElementId',
  'options': {
    'filterColumnLabel': 'salary',
    'minValue': 100,
    'maxValue': 1000
    },
  'state': {'lowValue': 200, 'highValue': 600}
});

// Change the Control state programmatically
wrapper.setState({'lowValue': 400, 'highValue': 800});

wrapper.setOption('minValue', 0); // And the options too..

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

// Have one or more Controls affect one or more Charts.
dashboard.bind(
  [controlWrapper1, controlWrapper2],
  [chartWrapper1, chartWrapper2, chartWrapper3]);

// Controls can also affect each other.
dashboard.bind(controlWrapper1, controlWrapper2);

// Draw the entire dashboard.
dashboard.draw(dataTable);