Use Google Chart Tools (JavaScript API) to visualize a data set of your choice.

ID: 671803 • Letter: U

Question

Use Google Chart Tools (JavaScript API) to visualize a data set of your choice. A few examples are listed below. Create a dashboard with at least three (3) charts and at least one (1) control.

You don’t have to visualize all the data in the spreadsheet. Select the columns that you find useful or interesting.

Read the data directly from a Google Spreadsheet. Don’t manually enter the data in the code. Don’t load data from a local file.

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':[ 'controls', 'map', 'table', 'corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Send query to the Google Spreadsheet that contains the housing data.
function drawChart() {
var queryString = encodeURIComponent('SELECT E, F, G, H, I, J');

var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1Ixlanep_0VfZtnk4rzS0jb1owTIbIRWAdGr9mp7OMIc/gviz/tq?tq=' + queryString);

   // Here we get the whole spreadseet.
query.send(handleQueryResponse);
}

   // Callback function that receives data from the Google Spreadsheet
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

   // If there is no error, retrieve data from the Google Spreadsheet response.
var dataTable = response.getDataTable();
   // Sort by the first column.
dataTable.sort([{column: 4 }]);

   // Create a DataView object for chart #1
var dataView1 = new google.visualization.DataView(dataTable);
// Select and rearrange the columns for more user friendly viewing.
dataView1.setColumns([4, 5, 8]);

   // Create an empty ChartWrapper and set its properties
var chart1 = new google.visualization.ChartWrapper();
chart1.setChartType('Table');
chart1.setContainerId('chart1_div');
// To set a DataView for the ChartWrapper, use DataView.toJSON()function.
// There is a no need to set DataTable for the ChartWrapper.
chart1.setView(dataView1.toJSON());

   // Don't draw the chart here. It will be drawn when the dashboard is drawn.

   // Create a DataView for the chart #2
var dataView2 = new google.visualization.DataView(dataTable);
dataView2.setColumns([4, 7]);

var chart2 = new google.visualization.ChartWrapper();
chart2.setChartType('ScatterChart');
chart2.setContainerId('chart2_div');
chart2.setView(dataView2.toJSON());

   // Create and draw the dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

   // Bind the filters to charts. These filters and charts now become part of this dashboard.
dashboard.bind([chart1, chart2]);
   // Draw all the charts and filters in this dashboard.
dashboard.draw(dataTable);
}

Explanation / Answer

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {'packages':['corechart', 'controls']});
      google.setOnLoadCallback(drawChart);

function drawChart() {

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

        // We omit "var" so that programmaticSlider is visible to changeRange.
        programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

       programmaticChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'legend': 'none',
          'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value'
        }
      });

      var data = google.visualization.arrayToDataTable([
        ['Name', 'Donuts eaten'],
        ['Michael' , 5],
        ['Elisa', 7],
        ['Robert', 3],
        ['John', 2],
        ['Jessica', 6],
        ['Aaron', 1],
        ['Margareth', 8]
      ]);

      dashboard.bind(programmaticSlider, programmaticChart);
      dashboard.draw(data);
    }

    </script>
</head>
<body>
    <div id="programmatic_dashboard_div">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div"></div>
            <div>
              <button>
                Select range [2, 5]
              </button><br />
              <button>
                Make the pie chart 3D
              </button>
            </div>
            <script type="text/javascript">
              function changeRange() {
                programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
                programmaticSlider.draw();
              }

              function changeOptions() {
                programmaticChart.setOption('is3D', true);
                programmaticChart.draw();
              }
            </script>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
</body>
</html>

Navigate

Use Gauss\'s law to determine electric fields when the symmetry is spherical. A

Use Google Earth (free download for the PC and Mac, and on many campus computers

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Use Google Chart Tools (JavaScript API) to visualize a data set of your choice.

Question

Explanation / Answer

Related Questions

Navigate