Chart API Examples

What is it?

There are several charting APIs that provide code for making a range of charts and maps. The Google Charts API is one such platforms. With a little JavaScript and data knowledge, you can make them interactive and integrate into your sites.

Why should I learn it?

These examples will show you how you can add interactivity to charts by allowing users to input data or filtering with a dropdown.

What can I do with it?

Feel free to modify and customize any of these scripts for your own purposes.

How long will it take?

You already know all the JavaScript you need to be able to apply these concepts. Start incorporating charts, graphs and maps into your projects.

Resources

Getting Started

This isn't an exercise as much as it is a series of completed examples using some different Google Charts. I don't have step-by-step videos or instructions for these, but you should now be able to make changes to code for your own purposes. Put the code for each in an html file and open in a browser to see them in action. Look through the extensive Google Chart Gallery for ideas about charts you'd might be able to use.

Each chart needs the following code in the head of the document to connect to the Google Charts API:

In addition, the code needs to know what charting package to use. Pie, bar, column an and line charts are all part of the "core" package. Maps are part of the "map" package.

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

We also need to use the following code to indicate what happens when the page loads, which function should be called on load. Typically, a version of the chart is drawn when page loads, so that something is visible. However, if you don't want anything visible on load, this line can be eliminated.

google.charts.setOnLoadCallback(drawChart);

Then you create the function that draws the chart. In these examples, the function is named drawChart(), but you can name it anything you want as long as that is how you call it. You call it in the form HTML with an appropriate event. For example:

Within the function, you use JavaScript to get the values from the form into your variables, either from direct input or via JSON. The arrayToDataTable includes the elements and variable names. The code ends with the declarations to create and draw the charts to the appropriate DOM element.

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

The examples below provide working code for various types of charts. The charts are now completely responsive. See note below first chart sample.

Pie Chart - Budget App

Google Charts can be used with JavaScript to pass values into charts based on user input. Using the Interactive App example from the More Interactive Examples module, we add a pie chart to display the percentages of each expense item. When the user submits the form, the inputs are converted to variables and the values associated with those variables populate the pie chart.

Budget Calculator

Income:

Expenses:

Balance for Savings:

Pie Chart - Budget App

<!DOCTYPE html>
  <html>
    <head>
  <title>Budget Calculator</title>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
      .chart {
      width: 100%;
      }
  
      #budgetchart {
      height: 600px;
      }
  
      label {
      display: inline-block;
      width: 230px;
      }
  
      input {
        width: 60px;
        text-align: right;
      }
  
      #income {
          margin-bottom: 20px;
      }
  </style>
  </head>
  <body>
  <h1>Budget Calculator</h1>
  <h2>Monthly Expenses</h2>
  
      <form id="formbudget" onsubmit="drawChart(); return false" >
          <label for="income">Your Income</label><input type="text" id="income" value="0"><br>
       <label for="housing">Housing: Rent or Mortgage</label><input type="text" id="housing" value="0"><br>
       <label for="utility">Utiltities: Electricity/Gas/Water</label><input type="text"  id="utility" value="0"><br>
       <label for="internet">Phone/Internet</label><input type="text"  id="internet" value="0"><br>
       <label for="carpay">Car Payment</label><input type="text"  id="carpay" value="0"><br>
       <label for="transit">Gas/Other Transit</label><input type="text"  id="transit" value="0"><br>
       <label for="streaming">Streaming Services</label><input type="text" id="streaming" value="0"><br>
       <label for="grocery">Grocery</label><input type="text" id="grocery" value="0"><br>
       <label for="entertainment">Entertainment</label><input type="text" id="entertainment" value="0"><br>
       <label for="credit">Credit Cards</label><input type="text" id="credit" value="0"><br>
       <label for="other">Other</label><input type="text" id="other" value="0"><br>
       <button type="submit" value="Submit">Submit</button>
       </form>
  
       <div>Income: <span id="myincome"></span></div>
       <div>Expenses: <span id="mytotal"></span></div>
       <div>Balance for Savings: <span id="mybalance"></span></div>
      <div id="budgetchart" class="chart"></div>
  
    <script>
        //define the chart package, we don't need anything on the page when it loads
        google.charts.load('current', {'packages':['corechart']});
       
       //submit requires text inputs to use parseInt to work as numbers
        function drawChart() {
    // uses  parseInt. Change to parseFloat for decimals. Might need toFixed to limit decimal places.    
  
         inc = parseInt(document.getElementById('income').value);
         house = parseInt(document.getElementById('housing').value);
         util = parseInt(document.getElementById('utility').value);
         int = parseInt(document.getElementById('internet').value);
         car = parseInt(document.getElementById('carpay').value);
         trans = parseInt(document.getElementById('transit').value);
         stream = parseInt(document.getElementById('streaming').value);
         groc = parseInt(document.getElementById('grocery').value);
         ent = parseInt(document.getElementById('entertainment').value);
         cred = parseInt(document.getElementById('credit').value);
         oth = parseInt(document.getElementById('other').value);
  
         //total expenses
         total = house + util + int + car + trans + stream + groc + ent + cred + oth;
  
         // balance that can go to savings
         bal = inc - total;
  
         //check total in console; can remove later
         console.log(inc);
  
         //display total on page. 
         document.getElementById("myincome").innerHTML = inc;
        document.getElementById("mytotal").innerHTML = total;
        document.getElementById("mybalance").innerHTML = bal;
        
         //replace data with variable names
         var data = google.visualization.arrayToDataTable([
            ['Item', 'Monthly Budget'],
            ['Housing', house],
            ['Utilties', util],
            ['Internet', int],
            ['Car Payment', car],
            ['Gas/Transit', trans],
            ['Streaming Services', stream],
            ['Grocery', groc],
            ['Entertainment', ent],
            ['Credit cards', cred],
            ['Other',    oth]
          ]);
          var options = {
            title: 'Monthly Budget',
            pieSliceText: 'label',
          };
      //the id is the DOM location to draw the chart
      var chart = new google.visualization.PieChart(document.getElementById('budgetchart'));
      chart.draw(data, options);
        }
  
   // this function makes the chart responsive; include the name of the proper drawChart function; if more than one chart on page, include additional statements for each drawChart function
  window.onresize = function() {
   drawChart();
  }
  </script>
  
  </body>
  </html>

There are various styles that control how the form and chart display. But you can use any styles you want to create your desired layout on the page.

Pie Chart with Dropdown

This example shows how to change the data from JSON that is used in a pie chart based on a user's dropdown selection. This form uses an onchange event for when the dropdown is executed.

Each chart type includes various options that can be found in the Google Charts Gallery that can be used to customize the presentation. You can remove the legend by include "legend: {position: 'none'}" in the options (separate each line with a comma). And you can include a array of colors (color names or hexidecimal) under options to change the colors of the chart elements. See in code sample.

Using the Core chart package, youc an easily change the chart type in the visualization statement from PieChart to ColumnChart (horizontal bar presentation), BarChart (vertical bar presentation) or LineChart (best with date listed in date order). Choose the chart type that best corresponds to your data.

Pie Chart with Dropdown/JSON

<!DOCTYPE html>
<html>
  <head>
 <title>Pie with Dropdown and JSON</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

#piechart {
    height: 600px;
    }

</style>
</head>
<body>

<select id="thedropdown">
     <option value="male">Male</option>
     <option value="female">Female</option>
     </select>

</form>

function drawChart() {
     mygender = document.getElementById("thedropdown").value;

info = [{gender: "male", work: 40, eat: 8, commute: 4, tv: 3, sleep: 40},
     {gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 50}
     ];

for(i=0; i<info.length; i++) {
    if(mygender == info[i].gender) {
       work = info[i].work;
       eat = info[i].eat;
       commute = info[i].commute;
       tv = info[i].tv;
       sleep = info[i].sleep;

}// end if
    } // end for

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Week'],
          ['Work',     work],
          ['Eat',      eat],
          ['Commute',  commute],
          ['Watch TV', tv],
          ['Sleep',    sleep]
        ]);
        var options = {
          title: 'Weekly Activities',
          colors: ['orange','#00cc33', 'pink', 'yellow','lightblue']
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }

// this function makes the chart responsive; include the name of the proper drawChart function; if more than one chart on page, include additional statements for each drawChart function
    window.onresize = function() {
    drawChart();
    }

</script>
</body>
</html>

Charts with Multiple Dimensions

This example demonstrates how to change a Bar Chart with JSON data with multiple variables based on the user's selection from a dropdown. This data could also be presented as Column or Line charts, but would not work with a pie chart, which is a one dimensional chart type.

If you want a chart with vertical bars, simply change the following line to request ColumnChart:

var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));

If you want a line chart, simply change the following line to request LineChart

var chart = new google.visualization.LineChart(document.getElementById('div_chart'));

BarChart, ColumnChart and LineChart are all part of the "core" package. Carefully consider which chart type is best for your data

Bar Chart with Multiple Dimensions

<!DOCTYPE html>
<html>
  <head>
  <title>Bar Chart with Multiple Dimensions</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
    .chart {
    width: 100%;
    }

</style>

</head>
  <body>
  <form id="form1" name="form1" onchange="drawChart()" >

<select id="thedropdown">
     <option value="Austin">Austin</option>
     <option value="Boulder">Boulder</option>
     </select>

</form>

function drawChart() {

info = [{city: "Austin", gender: "male", work: 40, eat: 8, commute: 2, tv: 3, sleep: 49},
     {city: "Austin", gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 56},
     {city: "Boulder", gender: "male", work: 50, eat: 7, commute: 5, tv: 8, sleep: 42},
     {city: "Boulder", gender: "female", work: 32, eat: 5, commute: 6, tv: 10, sleep: 42}
     ];

mycity = document.getElementById("thedropdown").value;

for(i=0; i<info.length; i++) {
    if(mycity == info[i].city && info[i].gender=="male") {
       workmale = info[i].work;
       eatmale = info[i].eat;
       commutemale = info[i].commute;
       tvmale = info[i].tv;
       sleepmale = info[i].sleep;

}// end if

if(mycity == info[i].city && info[i].gender=="female") {
       workfemale = info[i].work;
       eatfemale = info[i].eat;
       commutefemale = info[i].commute;
       tvfemale = info[i].tv;
       sleepfemale = info[i].sleep;

}// end if
    } // end for

var data = google.visualization.arrayToDataTable([
          ['Element', 'Male', 'Female'],
          ['work', workmale, workfemale],
          ['eat', eatmale, eatfemale],
          ['commute', commutemale, commutefemale],
          ['tv', tvmale, tvfemale],
          ['sleep', sleepmale, sleepfemale]
        ]);

var options = {
            title: 'Weekly Activities',
        };

var chart = new google.visualization.BarChart(document.getElementById('div_chart'));

chart.draw(data, options);
      }

Google Map with Dropdown

Since Google now requires a billing account to use this map's API, we are no longer using in this class. Just review in the tutorial. You can provide location information to create a Google Map. This example shows how the map can also be filtered based on a user's dropdown selection. The map data is stored in origData, but the selection of the dropdown creates a newData array that is invoked for the map using the "push" function. We use this push approach because we don't know how many elements will be posted to the map for each selection. A for loop matches an element in each object of the array and creates the newData array.

If your map does not show when you upload to your domain, it is probably because you need a Google Maps API. You need to create one by going to the Google API Console and getting an API key. Set up a project for your site.

Your code will look something like this. Include it at the bottom of your html page.

Search for trailheads with picnic locations.

Google Map with Dropdown

<!DOCTYPE html>
<html>
  <head>
  <title>Map with Filtered Data Set</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<style>
.chart {
width: 100%;
}
</style>
<body>

<p>Search for trailheads with picnic locations.</p>
  <form id="form1" onchange="drawChart()">
  <select id="thedropdown">
  <option value="0">Choose Picnic:</option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

</form>
    <div id="map_div" class="chart"></div>

//data is formatted for google map

var origData = [
        ['Lat', 'Long', 'Name', 'Picnic'],
        [40.00502079,-105.3065126,'Flagstaff Summit West','Yes'],
		[40.00418774,-105.3034886,'Flagstaff Summit East','Yes'],
		[40.06203476,-105.1317793,'East Boulder Trail at White Rocks','No'],
		[40.11129787,-105.3064337,'Buckingham Park','Yes'],
		[40.01403427,-105.2953243,'Settlers Park','Yes'],
		[40.02007287,-105.2978393,'Centennial','Yes'],
		[40.0216195,-105.1587565,'Teller Farm South','Yes'],
		[40.03976096,-105.1425324,'Teller Farm North','No'],
		[40.03997609,-105.2369699,'Cottonwood','No'],
		[40.10482144,-105.2657619,'Left Hand','No'],
		[40.07982797,-105.2627991,'Boulder Valley Ranch','No'],
		[40.08029576,-105.2358061,'Eagle','No'],
		[40.06271718,-105.2889486,'Four Mile Creek','No'],
		[40.07048258,-105.2824582,'Foothills','No'],
		[40.05086277,-105.2824198,'Wonderland Lake','Yes'],
		[40.03953507,-105.1850645,'Sawhill Ponds','Yes'],
		[39.99988941,-105.2148387,'Bobolink','No'],
		[39.99966374,-105.1909312,'Dry Creek','Yes'],
		[39.98276694,-105.2145567,'Cherryvale','No'],
		[39.99879048,-105.2828988,'Chautauqua','Yes'],
		[39.9973017,-105.2802015,'Enchanted Mesa','Yes'],
		[39.99751137,-105.2926378,'Gregory Canyon','Yes'],
		[39.96025253,-105.2368007,'South Boulder Creek West','Yes'],
		[40.00596455,-105.2928848,'Panorama Point','Yes'],
		[40.00178146,-105.2970695,'Crown Rock','Yes'],
		[39.92863183,-105.2334102,'Greenbelt Plateau','No'],
		[39.95308488,-105.2314097,'Marshall Mesa','Yes'],
		[39.92396203,-105.2350346,'Flatirons Vista','No'],
		[40.00650088,-105.2945558,'Halfway House','Yes'],
		[39.99733639,-105.3090728,'Realization Point','Yes'],
		[39.93859468,-105.2580575,'South Mesa','Yes'],
		[39.9382445,-105.2566495,'Doudy Draw','No'],
		[39.97870804,-105.2754686,'NCAR','No'],
		[39.99504834,-105.6344194,'Fourth of July','Yes'],
		[40.00884984,-105.3253138,'Chapman Drive','No'],
		[40.11014744,-105.2826065,'Interim Joder','No'],
        ];

function drawChart() {

//form to change based on dropdown

selection = document.getElementById("thedropdown").value;

//if 0 selected, maps everything
        if(selection == "0") {
//writes origData to html for initial view, line by line with breaks

// creates visualization using newData array
        var options = {
        mapType: 'normal',
        showInfoWindow: true,
        }

var data = google.visualization.arrayToDataTable(origData);
        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, options);
        }

// if there is a selection
        else {
        //start a new array to include only data that is selected
        var newData = [['Lat', 'Long', 'Name', 'Picnic']];

//loop to go match selection and create a new array
        for(i=1;i<origData.length; i++) {
            if(origData[i][3] == selection){
            // only data that meets the selection criteria goes into newData array
            newData.push(origData[i]);
            }//end if
        }//end for

//loop that writes the data in newData, line by line with breaks.

var options = {
        mapType: 'normal',
        showInfoWindow: true,
        }

// creates visualization using newData array
        var data = google.visualization.arrayToDataTable(newData);
        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, options);

} // end else

}//end function

Google Map with Dropdown and Filtered Table

Since Google now requires a billing account to use this map's API, we are no longer using in this class. Just review in the tutorial. This example includes a filtered data table, which we will cover in more detail in the Filtering Large Datasets lesson. As above, the map data is stored in origData, but the selection of the dropdown creates a newData array that is invoked for the map.

Your code will look something like this. Include it at the bottom of your html page.

Search for trailheads with picnic locations.

Trailhead	Picnic: Yes or No

Google Map with Dropdown and Filtered Data Set

<!DOCTYPE html>
<html>
  <head>
  <title>Map with Filtered Data Set</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

table {
    width: 50%;
    }
    </style>
</head>
<body>

</form>
    <div id="map_div" class="chart"></div>
    <table>
    <thead><th>Trailhead</th><th>Picnic: Yes or No</th></thead>
    <tbody id="mapanswer"></tbody>

</table>

//data is formatted for google map

function drawChart() {

//form to change based on dropdown

selection = document.getElementById("thedropdown").value;

//if 0 selected, maps everything
        if(selection == "0") {
//writes origData to html for initial view, line by line with breaks
        for(i=1; i<origData.length; i++) {
        document.getElementById("mapanswer").innerHTML += "<tr><td>" + origData[i][2] + "</td><td>" + origData[i][3] + "</td></tr>";
        } // end initial for

// creates visualization using newData array
        var options = {
        mapType: 'normal',
        showInfoWindow: true,
        }

var data = google.visualization.arrayToDataTable(origData);
        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, options);
        }

// if there is a selection
        else {
        //start a new array to include only data that is selected
        var newData = [['Lat', 'Long', 'Name', 'Picnic']];

}//end if

}//end for

//clears out answer div in html

document.getElementById("mapanswer").innerHTML = " ";

//loop that writes the data in newData, line by line with breaks.
        for(i=1; i<newData.length; i++) {
        document.getElementById("mapanswer").innerHTML += "<tr><td>" + newData[i][2] + "</td><td>" + newData[i][3] + "</td></tr>";
        }
        var options = {
        mapType: 'normal',
        showInfoWindow: true,
        }

} // end else

}//end function

GeoChart

This example shows a Google GeoChart, sometimes known as a Choropleth map. This is a map that allows comparison by region based on values. The following is a GeoChart of the US that allows the user to choose Population, Violent Crime per 100k or Property Crime per 100k. The data is included in a JSON section and a loop is used to populate the chart depending on the user's selection.

The data for this chart was obtained at the FBI's Crime Data Explorer. The Summary Data with Estimates was downloaded and opened in Excel, filtered for only 2017 data by state and selecting only state name, population, violent crime and property crime. I used a formula in Excel to convert the absolute violent crime and property crime data to be per 100,000 to create a relative comparison by state. The data was then copied and transposed in order to create a csv file with lines for the three measures with data for each state. The CSV data was converted to JSON and pulled into the file to be accessed by the loop.

Even though there is a lot of data here, don't be intimidated by this example. It is another demonstration of using a loop to identify JSON data.

2017 US State Population and Crime Per 100,000

Google GeoChart

<!DOCTYPE html>
<html>
  <head>
      <title>Google GeoChart</title>

</head>

<body>
    <h1>2017 US State Population and Crime Per 100,000</h1>

<form id="form1" onchange="drawRegionsMap()">
<select id="thedropdown">
<option value="Population">Population</option>
<option value="Violent Crime">Violent Crime Per 100k</option>
<option value="Property Crime">Property Crime Per 100k</option>

</select>
</form>
<h2 id="thetype"></h2>
    <div id="geochart" class="chart"></div>

function drawRegionsMap() {
    //2017 US Population and Crime Data per 100000
    var statedata = [
         {
           "measure": "Population",
           "alaska": 739795,
           "alabama": 4874747,
           "arkansas": 3004279,
           "arizona": 7016270,
           "california": 39536653,
           "colorado": 5607154,
           "connecticut": 3588184,
           "districtofcolumbia": 693972,
           "delaware": 961939,
           "florida": 20984400,
           "georgia": 10429379,
           "hawaii": 1427538,
           "iowa": 3145711,
           "idaho": 1716943,
           "illinois": 12802023,
           "indiana": 6666818,
           "kansas": 2913123,
           "kentucky": 4454189,
           "louisiana": 4684333,
           "massachusetts": 6859819,
           "maryland": 6052177,
           "maine": 1335907,
           "michigan": 9962311,
           "minnesota": 5576606,
           "missouri": 6113532,
           "mississippi": 2984100,
           "montana": 1050493,
           "northcarolina": 10273419,
           "northdakota": 755393,
           "nebraska": 1920076,
           "newhampshire": 1342795,
           "newjersey": 9005644,
           "newmexico": 2088070,
           "nevada": 2998039,
           "newyork": 19849399,
           "ohio": 11658609,
           "oklahoma": 3930864,
           "oregon": 4142776,
           "pennsylvania": 12805537,
           "rhodeisland": 1059639,
           "southcarolina": 5024369,
           "southdakota": 869666,
           "tennessee": 6715984,
           "texas": 28304596,
           "utah": 3101833,
           "virginia": 8470020,
           "vermont": 623657,
           "washington": 7405743,
           "wisconsin": 5795483,
           "westvirginia": 1815857,
           "wyoming": 579315
         },
         {
           "measure": "Violent Crime",
           "alaska": 829,
           "alabama": 524,
           "arkansas": 555,
           "arizona": 508,
           "california": 449,
           "colorado": 368,
           "connecticut": 228,
           "districtofcolumbia": 1005,
           "delaware": 453,
           "florida": 408,
           "georgia": 357,
           "hawaii": 251,
           "iowa": 293,
           "idaho": 226,
           "illinois": 439,
           "indiana": 399,
           "kansas": 413,
           "kentucky": 226,
           "louisiana": 557,
           "massachusetts": 358,
           "maryland": 500,
           "maine": 121,
           "michigan": 450,
           "minnesota": 238,
           "missouri": 530,
           "mississippi": 286,
           "montana": 377,
           "northcarolina": 364,
           "northdakota": 281,
           "nebraska": 306,
           "newhampshire": 199,
           "newjersey": 229,
           "newmexico": 783,
           "nevada": 556,
           "newyork": 357,
           "ohio": 297,
           "oklahoma": 456,
           "oregon": 282,
           "pennsylvania": 313,
           "rhodeisland": 232,
           "southcarolina": 506,
           "southdakota": 434,
           "tennessee": 652,
           "texas": 439,
           "utah": 239,
           "virginia": 208,
           "vermont": 166,
           "washington": 304,
           "wisconsin": 320,
           "westvirginia": 351,
           "wyoming": 238
         },
         {
           "measure": "Property Crime",
           "alaska": 3542,
           "alabama": 2957,
           "arkansas": 3079,
           "arizona": 2915,
           "california": 2497,
           "colorado": 2702,
           "connecticut": 1770,
           "districtofcolumbia": 4284,
           "delaware": 2441,
           "florida": 2512,
           "georgia": 2860,
           "hawaii": 2829,
           "iowa": 2125,
           "idaho": 1635,
           "illinois": 2011,
           "indiana": 2417,
           "kansas": 2801,
           "kentucky": 2129,
           "louisiana": 3367,
           "massachusetts": 1437,
           "maryland": 2222,
           "maine": 1507,
           "michigan": 1800,
           "minnesota": 2192,
           "missouri": 2834,
           "mississippi": 2734,
           "montana": 2592,
           "northcarolina": 2545,
           "northdakota": 2198,
           "nebraska": 2274,
           "newhampshire": 1382,
           "newjersey": 1556,
           "newmexico": 3942,
           "nevada": 2612,
           "newyork": 1514,
           "ohio": 2419,
           "oklahoma": 2876,
           "oregon": 2986,
           "pennsylvania": 1649,
           "rhodeisland": 1752,
           "southcarolina": 3196,
           "southdakota": 1876,
           "tennessee": 2941,
           "texas": 2563,
           "utah": 2780,
           "virginia": 1793,
           "vermont": 1437,
           "washington": 3174,
           "wisconsin": 1808,
           "westvirginia": 1852,
           "wyoming": 1830
         }
        ];

//select thedropdown element
          selection = document.getElementById("thedropdown").value;

document.getElementById("thetype").innerHTML = selection;

//go json and find proper measure, assign values to each state variable
          for(i=0; i<statedata.length; i++) {
            if(selection == statedata[i].measure) {

//this draws the chart
        var data = google.visualization.arrayToDataTable([
          ['State', selection],
          [ "Alaska", statedata[i].alaska ],
          [ "Alabama", statedata[i].alabama ],
          [ "Arkansas", statedata[i].arkansas ],
          [ "Arizona", statedata[i].arizona ],
          [ "California", statedata[i].california ],
          [ "Colorado", statedata[i].colorado ],
          [ "Connecticut", statedata[i].connecticut ],
          [ "Delaware", statedata[i].delaware ],
          [ "Florida", statedata[i].florida ],
          [ "Georgia", statedata[i].georgia ],
          [ "Hawaii", statedata[i].hawaii ],
          [ "Iowa", statedata[i].iowa ],
          [ "Idaho", statedata[i].idaho ],
          [ "Illinois", statedata[i].illinois ],
          [ "Indiana", statedata[i].indiana ],
          [ "Kansas", statedata[i].kansas ],
          [ "Kentucky", statedata[i].kentucky ],
          [ "Louisiana", statedata[i].louisiana ],
          [ "Massachusetts", statedata[i].massachusetts ],
          [ "Maryland", statedata[i].maryland ],
          [ "Maine", statedata[i].maine ],
          [ "Michigan", statedata[i].michigan ],
          [ "Minnesota", statedata[i].minnesota ],
          [ "Missouri", statedata[i].missouri ],
          [ "Mississippi", statedata[i].mississippi ],
          [ "Montana", statedata[i].montana ],
          [ "North Carolina", statedata[i].northcarolina ],
          [ "North Dakota", statedata[i].northdakota ],
          [ "Nebraska", statedata[i].nebraska ],
          [ "New Hampshire", statedata[i].newhampshire ],
          [ "New Jersey", statedata[i].newjersey ],
          [ "New Mexico", statedata[i].newmexico ],
          [ "Nevada", statedata[i].nevada ],
          [ "New York", statedata[i].newyork ],
          [ "Ohio", statedata[i].ohio ],
          [ "Oklahoma", statedata[i].oklahoma ],
          [ "Oregon", statedata[i].oregon ],
          [ "Pennsylvania", statedata[i].pennsylvania ],
          [ "Rhode Island", statedata[i].rhodeisland ],
          [ "South Carolina", statedata[i].southcarolina ],
          [ "South Dakota", statedata[i].southdakota ],
          [ "Tennessee", statedata[i].tennessee ],
          [ "Texas", statedata[i].texas ],
          [ "Utah", statedata[i].utah ],
          [ "Virginia", statedata[i].virginia ],
          [ "Vermont", statedata[i].vermont ],
          [ "Washington", statedata[i].washington ],
          [ "Wisconsin", statedata[i].wisconsin ],
          [ "West Virginia", statedata[i].westvirginia ],
          [ "Wyoming", statedata[i].wyoming ]
        ]);
            }// end if
          }// end for

var options = {
          region: 'US',
          displayMode: 'regions',
          resolution: 'provinces',
          colorAxis: {colors: ['darkblue']},
        };

var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
        chart.draw(data, options);
      }
       // this function makes the chart responsive; include the name of the proper drawChart function; if more than one chart on page, include additional statements for each drawChart function
    window.onresize = function() {
    drawRegionsMap();
    }
    </script>
  </body>
</html>

Scatter Chart

A Scatter Chart allows you to plot distribution of two numeric variables. The code to the right provides an example of the distribution of student pre-test vs. post-test scores. The dropdown allows you to filter the chart by another variable, in this case gender. The code works by pushing the data into a newData table that matches the dropdown when the user changes the dropdown. The newData table is what is used to draw the chart. Each time the user changes the dropdown, a new chart is drawn. Think about what type of data would be appropriate to display in this manner for your own storytelling.

Code Sample - Scatter Chart

<html>
    <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
    #chart_div{
    height: 400px;
    }
    </style>
    </head>
    <body>
    <form id="form1" onchange="drawChart()">
    <select id="thedropdown">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
    
    </select>
    </form>
    <div id="chart_div"></div>
    
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {
    
        selection = document.getElementById("thedropdown").value;
    newData = [['PostTest','PreTest']];
    
        info = [{gender: "male", pretest: 12, posttest: 54},
        {gender: "male", pretest: 10, posttest: 60},
        {gender: "male", pretest: 17, posttest: 65},
        {gender: "male", pretest: 50, posttest: 95},
        {gender: "male", pretest: 40, posttest: 100},
        {gender: "male", pretest: 65, posttest: 100},
        {gender: "male", pretest: 42, posttest: 88},
        {gender: "female", pretest: 80, posttest: 70},
        {gender: "female", pretest: 75, posttest: 95},
        {gender: "female", pretest: 68, posttest: 81},
        {gender: "female", pretest: 20, posttest: 65},
        {gender: "female", pretest: 25, posttest: 70},
        {gender: "female", pretest: 40, posttest: 90},
        {gender: "female", pretest: 38, posttest: 88},
        {gender: "female", pretest: 45, posttest: 66},
        {gender: "female", pretest: 60, posttest: 90},
        {gender: "other", pretest: 65, posttest: 97},
        {gender: "other", pretest: 40, posttest: 99},
    
        ];
    for(i=0; i<info.length; i++){
    if(selection == info[i].gender) {
    newData.push([info[i].posttest, info[i].pretest]);
    }
    }
        var data = google.visualization.arrayToDataTable(newData);
    
        var options = {
        title: 'Pre-Test/Post-Test Comparison by Gender',
        vAxis: {title: 'Pre-Test', minValue: 0, maxValue: 100},
        hAxis: {title: 'Post-Test', minValue: 0, maxValue: 100},
        pointSize: 20,
        pointShape: 'square',
        legend: 'none'
        };
    
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    
        chart.draw(data, options);
    }
    
    window.onresize = function() {
    drawChart();
    }
    </script>
    </body>
    </html>

Bubble Chart

A Bubble Chart allows you to plot three numeric variables, one variable each on the horizontal and vertical axes and then a third numeric variable that determines the size of the bubbles. The example plots average GPA and 6-year graduation rate for different majors by schools (fictional for this example) when selected in dropdown. The code works by pushing the data into a newData table that matches the dropdown when the user changes the dropdown. The newData table is what is used to draw the chart. Each time the user changes the dropdown, a new chart is drawn. Think about what type of data would be appropriate to display in this manner for your own storytelling

Code Sample - Bubble Chart

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#series_chart_div {
height: 400px;
}
</style>
</head>
<body>
<form id="form1" onchange="drawSeriesChart()">
<select id="thedropdown">
    <option value="School 1">School 1</option>
    <option value="School 2">School 2</option>
    <option value="School 3">School 3</option>

</select>
</form>
<div id="series_chart_div"></div>

function drawSeriesChart() {
selection = document.getElementById("thedropdown").value;
console.log(selection);

newData = [['ID', 'Avg GPA', 'Graduation', 'Program', 'Enrollment']];

info = [{major: "Journalism", gpa: 3.4, graduation: 54, school: "School 1", enrollment: 2000},
{major: "Computer Science", gpa: 3.2, graduation: 56, school: "School 1", enrollment: 600},
{major: "English", gpa: 2.6, graduation: 68, school: "School 1", enrollment: 1250},
{major: "Chemistry", gpa: 2.2, graduation: 72, school: "School 1", enrollment: 1750},
{major: "History", gpa: 3.2, graduation: 72, school: "School 1", enrollment: 140},
{major: "Journalism", gpa: 3.4, graduation: 57, school: "School 2", enrollment: 2140},
{major: "Computer Science", gpa: 3.4, graduation: 40, school: "School 2", enrollment: 320},
{major: "English", gpa: 2.6, graduation: 80, school: "School 2", enrollment: 1250},
{major: "Chemistry", gpa: 3.0, graduation: 72, school: "School 2", enrollment: 500},
{major: "History", gpa: 2.9, graduation: 62, school: "School 2", enrollment: 202},
{major: "Journalism", gpa: 3.2, graduation: 57, school: "School 3", enrollment: 200},
{major: "Computer Science", gpa: 3.5, graduation: 56, school: "School 3", enrollment: 175},
{major: "English", gpa: 2.7, graduation: 68, school: "School 3", enrollment: 200},
{major: "Chemistry", gpa: 3.0, graduation: 72, school: "School 3", enrollment: 750},
{major: "History", gpa: 2.8, graduation: 64, school: "School 3", enrollment: 99},
];

for(i=0; i<info.length; i++){
    if(selection == info[i].school){
        newData.push([info[i].school, info[i].gpa, info[i].graduation, info[i].major, info[i].enrollment]);
    }
}

var data = google.visualization.arrayToDataTable(newData);

var options = {
    title: 'Avg GPA vs. 6-year Graduation % by Major per School',
    hAxis: {title: 'GPA', minValue: 0, maxValue: 4.0},
    vAxis: {title: '6-year graduation', minValue: 0, maxValue: 100},
    bubble: {textStyle: {fontSize: 11}},  
};

var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}

</script>
  </body>
  </html>

Now You Try

See the code at the right. Find the appropriate code to create a line chart visualization that will place a line chart in the div named line_chart. Put that where indicated in the code. Then create the if statement where indicated to pull the data from the json into the chart.

Try a Line Chart

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
    .chart {
    width: 100%;
    }
    </style>

</head>
  <body>
  <form id="form1" onchange="drawChart()" >

<select id="thedropdown">
     <option value="Austin">Austin</option>
     <option value="Boulder">Boulder</option>
     </select>

</form>
    <div id="line_chart" class="chart"></div>

function drawChart() {

selection = document.getElementById("thedropdown").value;

info = [
     {city: "Austin",  y2004: 60, y2005: 80, y2006: 75, y2007: 90},
     {city: "Boulder",  y2004: 40, y2005: 37, y2006: 50, y2007: 55},
     ];

for(i=0; i<info.length; i++) {

//create the if statement to read the json and have it put the appropriate cities data in the chart based on the dropdown

} // end for

var data = google.visualization.arrayToDataTable([
          ['Element', 'Minutes'],
          ['2004', y1],
          ['2005', y2],
          ['2006', y3],
          ['2007', y4],

]);

var options = {
          title: 'Weekly Commute Minutes',
          legend: { position: 'bottom' }
        };

//find the appropriate visualization code to draw a line chart and place it in the div below called line_chart

chart.draw(data, options);
      }

</script>
  </body>
</html>

Using Multiple Charts on a Page

The above methods work great when you just have one chart on a page. But what if you wanted to use multiple charts on the same page? You must include the script references, the function and the html for the form and chart drawing elements in the appropriate places on the page. So, take your time and place the items in the proper areas. Then there are a few things that need to be adjusted to allow multiple charts to function on a page.

The most important thing to change is the name of the function for each chart. Your code will get confused if you have multiple functions named drawChart, so go through and uniquely name each function.
Your dropdowns need to have unique ids as well (remember, an id is only supposed to be used once on a page anyway), so the script won't get confused about which input should be used.
Only need to load the packages line once, if you are using the same package, i.e. "corechart." If you are using multiple packages, i.e. "corechart" and "maps", you can include them on two separate lines or combine them as follows:
You need to set the callback for all the charts you want to draw when the site loads, so you can use multiple lines for these, as such.
To make the charts responsive, you will include each drawChart function in the resize function

Of course, you want to use your Bootstrap skills to place these elements in a grid element to achieve your desired layout.

That's it. If you give the functions and dropdowns unique names, the script will find the proper JSON, data and chart options for that operation. As with any of these charts, you may need to adjust the styles or include them in their own divs to achieve your desired layout. But think carefully about what each part of the script is doing, and you will be able to use multiple charts on your pages.

Using Multiple Charts on a Page

<!DOCTYPE html>
<html>
<head>

#piechart {
   height: 600px;
    }

#div_chart {
    height: 400px;
    }

</style>

</head>
<body>

<form id="form1" onchange="drawChart()" >

<select id="thedropdown">
     <option value="total">Total</option>
     <option value="male">Male</option>
     <option value="female">Female</option>
     </select>

</form>

<select id="thedropdown2">
     <option value="Austin">Austin</option>
     <option value="Boulder">Boulder</option>
     </select>

</form>

//first chart
        function drawChart() {

mygender = document.getElementById("thedropdown").value;

info = [{gender: "male", work: 40, eat: 8, commute: 2, tv: 3, sleep: 7},
         {gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 8}
         ];

for(i=0; i<info.length; i++) {

//gets the total, adds both lines together in the dataset
        if(mygender == "total")
        {
         work = info[0].work + info[1].work;
         eat = info[0].eat + info[1].eat;
         commute = info[0].commute + info[1].commute;
         tv = info[0].tv + info[1].tv;
         sleep = info[0].sleep + info[1].sleep;
        }

else if(mygender == info[i].gender) {
           work = info[i].work;
           eat = info[i].eat;
           commute = info[i].commute;
           tv = info[i].tv;
           sleep = info[i].sleep;

}// end if
        } // end for

var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Week'],
              ['Work',     work],
              ['Eat',      eat],
              ['Commute',  commute],
              ['Watch TV', tv],
              ['Sleep',    sleep]
            ]);
            var options = {
              title: 'Weekly Activities'
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
          }

//second chart - function needs a unique name
    function drawChart2() {

mycity = document.getElementById("thedropdown2").value;

info = [{city: "Austin", gender: "male", work: 40, eat: 8, commute: 2, tv: 3, sleep: 7},
         {city: "Austin", gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 8},
         {city: "Boulder", gender: "male", work: 50, eat: 7, commute: 5, tv: 8, sleep: 6},
         {city: "Boulder", gender: "female", work: 32, eat: 5, commute: 6, tv: 10, sleep: 6}
         ];

for(i=0; i<info.length; i++) {
        if(mycity == info[i].city && info[i].gender=="male") {
           workmale = info[i].work;
           eatmale = info[i].eat;
           commutemale = info[i].commute;
           tvmale = info[i].tv;
           sleepmale = info[i].sleep;

}// end if

else if(mycity == info[i].city && info[i].gender=="female") {
           workfemale = info[i].work;
           eatfemale = info[i].eat;
           commutefemale = info[i].commute;
           tvfemale = info[i].tv;
           sleepfemale = info[i].sleep;

}// end if
        } // end for

var data = google.visualization.arrayToDataTable([
              ['Element', 'Male', 'Female'],
              ['work', workmale, workfemale],
              ['eat', eatmale, eatfemale],
              ['commute', commutemale, commutefemale],
              ['tv', tvmale, tvfemale],
              ['sleep', sleepmale, sleepfemale]
            ]);

var options = {

title: 'Weekly Activities',
            };

var chart = new google.visualization.BarChart(document.getElementById('div_chart'));
            chart.draw(data, options);
          }

// this function makes the chart responsive; include the name of the proper drawChart function; This is an example with more than one chart.
        window.onresize = function() {
        drawChart();
        drawChart2();
        }

</script>

</body>
</html>

Another Exercise

Find the JSON data to the right. It is Austin Housing Data by Zipcode found at the city's data portal. It includes Median Income, Median Home Value, and then percentages of units that different people can afford to either own or rent - Service/Retails Workers, Artists, Tech Workers. Make the following charts first on separate pages.

Make a line chart that shows all zipcodes and allows you to chart between median income and median home value with a dropdown.
Make a column chart that shows all zipcodes and allows you to see what percentage of units can be owned by each of the groups - service, artist, tech. User should choose Service, Artist and Tech from the dropdown.
Make a column chart that shows all zipcodes and allows you to see what percentage of units can be rented by each of the groups - service, artist, tech. User should choose Service, Artist and Tech from the dropdown.
Now make one column chart that shows both own and rent on the same chart (each zip code will display two columns instead of one
Combine the 1st and last charts on one page. Make the necessary changes to the script to allow multiple charts to display.

Another Exercise

housinginfo = [ { "measure": "medincome", "z78701": 68152, "z78702": 34734, "z78703": 92606, "z78704": 50248, "z78705": 11917, "z78722": 44917, "z78741": 30183, "z78746": 125327, "z78751": 38624,},
{ "measure": "medhomeval", "z78701": 338300, "z78702": 175400, "z78703": 621900, "z78704": 338200, "z78705": 292500, "z78722": 265100, "z78741": 120200, "z78746": 619900, "z78751": 292200, },
{ "measure": "ownservice", "z78701": 0, "z78702": 0, "z78703": 0, "z78704": 0, "z78705": 1, "z78722": 0, "z78741": 28, "z78746": 0, "z78751": 0,},
{ "measure": "rentservice", "z78701": 7, "z78702": 39, "z78703": 8, "z78704": 11, "z78705": 6, "z78722": 8, "z78741": 11, "z78746": 4, "z78751": 9,},
{ "measure": "ownartist", "z78701": 1, "z78702": 2, "z78703": 0, "z78704": 2, "z78705": 10, "z78722": 1, "z78741": 39, "z78746": 0, "z78751": 2,},
{ "measure": "rentartist", "z78701": 12, "z78702": 51, "z78703": 25, "z78704": 26, "z78705": 23, "z78722": 31, "z78741": 40, "z78746": 8, "z78751": 38,},
{ "measure": "owntech", "z78701": 30, "z78702": 67, "z78703": 13, "z78704": 33, "z78705": 79, "z78722": 37, "z78741": 93, "z78746": 6, "z78751": 42,},
{"measure": "renttech", "z78701": 90, "z78702": 99, "z78703": 92, "z78704": 99, "z78705": 94, "z78722": 97, "z78741": 100, "z78746": 94, "z78751": 97,} ];

Moving On

All these exercises demonstrate practical use of the features we have discussed, this time incorporating the Google Maps library. Work on adding interactive features for charts, graphs and maps on your own sites.