Scatter Chart Example

An example of a Google Scatter Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['controls']}]}"></script>
<div id="dashboard">
    <div id="dateRange"></div>
       <div id="chart_div" style=""></div>
</div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight', 'Date'],
          [ 8,      12, new Date(2015, 10, 1)],
          [ 4,      5.5, new Date(2015, 10, 2)],
          [ 11,     14, new Date(2015, 10, 3)],
          [ 4,      5, new Date(2015, 10, 4)],
          [ 3,      3.5, new Date(2015, 10, 5)],
          [ 6.5,    7, new Date(2015, 10, 6)]
        ]);
		
        var scatterWrap = new google.visualization.ChartWrapper({
            chartType:'ScatterChart',
            containerId:'chart_div',
            dataTable:data,
            view:{
                columns:[0, 1]
            },
            options:{
                title: 'Age vs. Weight comparison',
                hAxis: {title: 'Age', minValue: 0, maxValue: 15},
                vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
                legend: 'none'
            }
        });
		var dateRangeWrap = new google.visualization.ControlWrapper({
            controlType:'DateRangeFilter',
            containerId:'dateRange',
            options:{
                filterColumnIndex:2
            }
        });
          var googleDashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
          googleDashboard.bind(dateRangeWrap, scatterWrap);
          googleDashboard.draw(data);
        scatterWrap.draw();
      }