wetzler/gist:9697727

## gistfile1.html
<!DOCTYPE html>
<html lang='en'>
  <head>

    <script>
      var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();

      // Configure the Keen Client
      Keen.configure({
        projectId: "<your project ID>",
        readKey: "<your read key>"
      });

      var urlParams = {}; // Create object to store URL query params
      (function () {  // Get params and values from the URL
          var match,
              pl     = /\+/g,  // Regex for replacing addition symbol with a space
              search = /([^&=]+)=?([^&]*)/g,
              decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
              query  = window.location.search.substring(1);

          while (match = search.exec(query))
             urlParams[decode(match[1])] = decode(match[2]);
      })();

      // Set a timeframe variable equal to the value provided in the query string
      if (urlParams["timeframe1"] == null || urlParams["timeframe1"] == "") {
        var timeframe = "last_24_hours" // Set a default in case no timeframe query param is provided
      }
      else {
        var timeframe = urlParams["timeframe1"] // Create variable with friendly name for the timeframe value
      }

      Keen.onChartsReady(function(){   // Run Keen IO Queries and Draw Charts

        // Data for the PieChart - Tells What Types of Signups Happened
        var signupsByType = new Keen.Metric("signups", {
          analysisType: "count",
          groupBy: "type",
          timeframe: timeframe,  // use the variable timeframe from the query string
        });

        // Viz Settings for a PieChart
        var signupsPieChart = new Keen.PieChart(signupsByType, {
          height: 250,
          width: 550,
          chartAreaWidth: 550,
          chartAreaLeft: 50,
          title: "Signup Types (" + timeframe + ")",
          font: "Helvetica Neue"
        });

        signupsPieChart.draw(document.getElementById("signup-types"));

        // Data for the PieChart - Tells where visitors were before Signup Page
        var signupViewsCameFrom = new Keen.Metric("pageviews", {
          analysisType: "count",
          groupBy: "referrer.relative",
          filters: [{"property_name":"url.full","operator":"contains","property_value":"keen.io/signup"}], // We are only looking at the signup pageviews for this query
          timeframe: timeframe, // use the variable timeframe from the query string
        });

        // Viz Settings for a PieChart
        var signupViewsCameFromPieChart = new Keen.PieChart(signupViewsCameFrom, {
          height: 250,
          width: 550,
          minimumSlicePercentage: 3,
          chartAreaWidth: 550,
          chartAreaLeft: 50,
          title: "Page Viewed Before Signup Page (" + timeframe + ")",
          font: "Helvetica Neue"
        });

        signupViewsCameFromPieChart.draw(document.getElementById("signup-views-came-from"));

      });

  </script>
  </head>
  <body>

  <div id="signup-types"></div>
  <div id="signup-views-came-from"></div>

  </body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>

	<script>
	var Keen=Keen\|\|{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq\|\|[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq\|\|[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();

	// Configure the Keen Client
	Keen.configure({
	projectId: "<your project ID>",
	readKey: "<your read key>"
	});

	var urlParams = {}; // Create object to store URL query params
	(function () { // Get params and values from the URL
	var match,
	pl = /\+/g, // Regex for replacing addition symbol with a space
	search = /([^&=]+)=?([^&]*)/g,
	decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
	query = window.location.search.substring(1);

	while (match = search.exec(query))
	urlParams[decode(match[1])] = decode(match[2]);
	})();

	// Set a timeframe variable equal to the value provided in the query string
	if (urlParams["timeframe1"] == null \|\| urlParams["timeframe1"] == "") {
	var timeframe = "last_24_hours" // Set a default in case no timeframe query param is provided
	}
	else {
	var timeframe = urlParams["timeframe1"] // Create variable with friendly name for the timeframe value
	}

	Keen.onChartsReady(function(){ // Run Keen IO Queries and Draw Charts

	// Data for the PieChart - Tells What Types of Signups Happened
	var signupsByType = new Keen.Metric("signups", {
	analysisType: "count",
	groupBy: "type",
	timeframe: timeframe, // use the variable timeframe from the query string
	});

	// Viz Settings for a PieChart
	var signupsPieChart = new Keen.PieChart(signupsByType, {
	height: 250,
	width: 550,
	chartAreaWidth: 550,
	chartAreaLeft: 50,
	title: "Signup Types (" + timeframe + ")",
	font: "Helvetica Neue"
	});

	signupsPieChart.draw(document.getElementById("signup-types"));

	// Data for the PieChart - Tells where visitors were before Signup Page
	var signupViewsCameFrom = new Keen.Metric("pageviews", {
	analysisType: "count",
	groupBy: "referrer.relative",
	filters: [{"property_name":"url.full","operator":"contains","property_value":"keen.io/signup"}], // We are only looking at the signup pageviews for this query
	timeframe: timeframe, // use the variable timeframe from the query string
	});

	// Viz Settings for a PieChart
	var signupViewsCameFromPieChart = new Keen.PieChart(signupViewsCameFrom, {
	height: 250,
	width: 550,
	minimumSlicePercentage: 3,
	chartAreaWidth: 550,
	chartAreaLeft: 50,
	title: "Page Viewed Before Signup Page (" + timeframe + ")",
	font: "Helvetica Neue"
	});

	signupViewsCameFromPieChart.draw(document.getElementById("signup-views-came-from"));

	});

	</script>
	</head>
	<body>

	<div id="signup-types"></div>
	<div id="signup-views-came-from"></div>

	</body>
	</html>