leepettijohn · April 1, 2021 12:27
diff --git a/graph.html b/graph.html
 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
 <script src="/airtable.js"></script> // https://github.com/Airtable/airtable.js/blob/master/build/airtable.browser.js
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

 <script>
    // this variable allows you to pull variables from the URL - https://www.learningjquery.com/2012/06/get-url-parameters-using-jquery
 var getUrlParameter = function getUrlParameter(sParam) {
 	var sPageURL = window.location.search.substring(1),	sURLVariables = sPageURL.split('&'),	sParameterName,	i;
 	for (i = 0; i < sURLVariables.length; i++) {
 		sParameterName = sURLVariables[i].split('=');
 		if (sParameterName[0] === sParam) {
 			return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
 		}
 	}
 	return false;
 };
  // this is the array of objects used in the data portion of the Vega Lite variable (graphSpecs)
 var graphData = [];
  // this puts the data right before the closing <body> tag.  You can also just create a div in the HTML with #graph but I'm
  // using Divi as my WordPress theme so I put this in a code block on a page and then CSS'd out the #page-container so 
  // this would be the only thing on the page and then embedded it in stacker.app
 var graphDiv = document.createElement('div');
  graphDiv.setAttribute('id','graph');
  document.body.appendChild(graphDiv);
  
 jQuery(document).ready(function($) {
 	// namesarray will hold all the data from the API call
 	var apiKey = ""; //get from https://airtable.com/account
 	var baseId = ""; //get from https://airtable.com/api and choose your base to get the BaseID
 	var tableName = ""; //Name of the table in Airtable
 	var filterFieldName = ""; //Name of field in Airtable to get records from
 	var filterRecord = getUrlParameter(""); // URL variable name
 	var xField = ""; //Name of field in Airtable for the X axis
 	var yField = ""; //Name of field in Airtable for the Y axis
 	var viewName = "";  // Name of the view in Airtable to pull from
 	var Airtable = require("airtable");
    // initialize Airtable API
 	var base = new Airtable({
 		apiKey: apiKey
 	}).base(baseId);
  
 	base(tableName).select({
      // uses variables above to filter info
 		filterByFormula: '{'+filterFieldName+'} = "'+filterRecord+'"',
 		view: viewName
 	})
 	.eachPage(
 		function page(records, fetchNextPage) {
 			// This function (`page`) will get called for each page of records.
 			records.forEach(function(record) {
 	        // reset the object each time the records are called
        var xObject = {};
  			xObject[xField] = record.get(xField);
          // I added the end so the percentage field would be 2 decimal places
        xObject[yField] = record.get(yField).toFixed(4) *100;
        graphData.push(xObject);
 			});
       // here's the basic layout I used - https://vega.github.io/vega-lite/usage/embed.html
      var graphSpecs = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        description: 'A simple line and point chart with tooltips.',
        data: {
          values: graphData
        },
        layer: [
          {mark: {"type":'line',"point":true,"tooltip":true},
            encoding: {
              x: {field: xField, type: 'nominal'},
              y: {field: yField, type: 'quantitative'}
            }
          },
            // I added this line to show where 0 on the y plane is indicated in red
          {
            "data": {"values": [{"guide": 0}]},
            "mark": "rule",
            "encoding": {
              "y": {"field": "guide","type": "quantitative"},
              "color": {"value": "red"}
            }
          }
        ]
      };
      vegaEmbed('#graph', graphSpecs);
 		},
 		function done(err) {
 			if (err) {
 				console.error(err);
 				return;
 			}
 		}
 	);
 });
    </script>
	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
	<script src="/airtable.js"></script> // https://github.com/Airtable/airtable.js/blob/master/build/airtable.browser.js
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

	<script>
	// this variable allows you to pull variables from the URL - https://www.learningjquery.com/2012/06/get-url-parameters-using-jquery
	var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = window.location.search.substring(1), sURLVariables = sPageURL.split('&'), sParameterName, i;
	for (i = 0; i < sURLVariables.length; i++) {
	sParameterName = sURLVariables[i].split('=');
	if (sParameterName[0] === sParam) {
	return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
	}
	}
	return false;
	};
	// this is the array of objects used in the data portion of the Vega Lite variable (graphSpecs)
	var graphData = [];
	// this puts the data right before the closing <body> tag. You can also just create a div in the HTML with #graph but I'm
	// using Divi as my WordPress theme so I put this in a code block on a page and then CSS'd out the #page-container so
	// this would be the only thing on the page and then embedded it in stacker.app
	var graphDiv = document.createElement('div');
	graphDiv.setAttribute('id','graph');
	document.body.appendChild(graphDiv);

	jQuery(document).ready(function($) {
	// namesarray will hold all the data from the API call
	var apiKey = ""; //get from https://airtable.com/account
	var baseId = ""; //get from https://airtable.com/api and choose your base to get the BaseID
	var tableName = ""; //Name of the table in Airtable
	var filterFieldName = ""; //Name of field in Airtable to get records from
	var filterRecord = getUrlParameter(""); // URL variable name
	var xField = ""; //Name of field in Airtable for the X axis
	var yField = ""; //Name of field in Airtable for the Y axis
	var viewName = ""; // Name of the view in Airtable to pull from
	var Airtable = require("airtable");
	// initialize Airtable API
	var base = new Airtable({
	apiKey: apiKey
	}).base(baseId);

	base(tableName).select({
	// uses variables above to filter info
	filterByFormula: '{'+filterFieldName+'} = "'+filterRecord+'"',
	view: viewName
	})
	.eachPage(
	function page(records, fetchNextPage) {
	// This function (`page`) will get called for each page of records.
	records.forEach(function(record) {
	// reset the object each time the records are called
	var xObject = {};
	xObject[xField] = record.get(xField);
	// I added the end so the percentage field would be 2 decimal places
	xObject[yField] = record.get(yField).toFixed(4) *100;
	graphData.push(xObject);
	});
	// here's the basic layout I used - https://vega.github.io/vega-lite/usage/embed.html
	var graphSpecs = {
	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
	description: 'A simple line and point chart with tooltips.',
	data: {
	values: graphData
	},
	layer: [
	{mark: {"type":'line',"point":true,"tooltip":true},
	encoding: {
	x: {field: xField, type: 'nominal'},
	y: {field: yField, type: 'quantitative'}
	}
	},
	// I added this line to show where 0 on the y plane is indicated in red
	{
	"data": {"values": [{"guide": 0}]},
	"mark": "rule",
	"encoding": {
	"y": {"field": "guide","type": "quantitative"},
	"color": {"value": "red"}
	}
	}
	]
	};
	vegaEmbed('#graph', graphSpecs);
	},
	function done(err) {
	if (err) {
	console.error(err);
	return;
	}
	}
	);
	});
	</script>