leepettijohn/graph.html

## 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/vega@5.19.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></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/vega@5.19.1"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></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>