skinnyandbald
5/13/2014 - 8:58 PM

index.html

preview.png
content_copyfile_download
  • Rendered
  • Source
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <title>Gist for Keen IO JS Library</title>
  <script src="http://d26b395fwzu5fz.cloudfront.net/3.0.0/keen.min.js"></script>
  <script>

    var client = new Keen({
      projectId: "5368fa5436bf5a5623000000",
      readKey: "3f324dcb5636316d6865ab0ebbbbc725224c7f8f3e8899c7733439965d6d4a2c7f13bf7765458790bd50ec76b4361687f51cf626314585dc246bb51aeb455c0a1dd6ce77a993d9c953c5fc554d1d3530ca5d17bdc6d1333ef3d8146a990c79435bb2c7d936f259a22647a75407921056"
    });

    Keen.ready(function() {

      // Create a new query
      var pageviews_timeline = new Keen.Query("count", {
        eventCollection: "pageviews",
        interval: "hourly",
        timeframe: {
          start: "2014-05-04T00:00:00.000Z",
          end: "2014-05-05T00:00:00.000Z"
        }
      });

      var pageviews_total = new Keen.Query("count", {
        eventCollection: "pageviews",
        timeframe: {
          start: "2014-05-04T00:00:00.000Z",
          end: "2014-05-05T00:00:00.000Z"
        }
      })

      // Calculate and visualize deltas
      client.run(pageviews_timeline, function(response){
        var chart, deltas = [];

        // Loop over each record and build a modified value
        Keen.utils.each(response.result, function(record, index){
          var copy = JSON.parse(JSON.stringify(record)), // ugly, but effective
              decimals = 0,
              infinites = 100, // Value to swap in for "Infinity" (0 -> N increase)
              previous = (index > 0) ? response.result[index-1].value : record.value,
              delta = (record.value/previous - 1) * 100,
              formatted = parseFloat(delta.toFixed(decimals));
          deltas.push(copy);
          deltas[index].value = (isFinite(formatted)) ? formatted : infinites;
        });

        // Build a chart with the new data set
        chart = new Keen.Visualization({ result: deltas }, document.getElementById("chart1"), {
          chartType: "columnchart",
          title: "Delta in pageviews over 24 hours",
          height: 250,
          width: "auto",
          chartOptions: {
            legend: { position: "none" },
            bar: {
              groupWidth: "90%"
            },
            chartArea: {
              left: "5%",
              width: "80%"
            },
            isStacked: true
          }
        });
      });

      // Cumulative Increment
      client.run(pageviews_timeline, function(response){
        var chart, total = 0;

        // Loop over each record and modify the value
        Keen.utils.each(response.result, function(record, index){
          record.value = total += record.value;
        });

        // Build a chart with the modified data set
        chart = new Keen.Visualization(response, document.getElementById("chart2"), {
          chartType: "columnchart",
          title: "Cumulative pageviews over 24 hours",
          height: 250,
          width: "auto",
          chartOptions: {
            legend: { position: "none" },
            bar: {
              groupWidth: "90%"
            },
            chartArea: {
              left: "5%",
              width: "80%"
            }
          }
        });

      });

      // Percentage of total
      client.run([pageviews_timeline, pageviews_total], function(response){
        var decimals = 2,
            series = response[0],
            total = response[1];

        // Loop over each record and modify the value
        Keen.utils.each(series.result, function(record, index){
          var diff = record.value/total.result * 100;
          record.value = parseFloat(diff.toFixed(decimals));
        });

        // Build a chart with the modified data set
        chart = new Keen.Visualization(series, document.getElementById("chart3"), {
          chartType: "areachart",
          title: "Interval count as percentage of total",
          height: 250,
          width: "auto",
          chartOptions: {
            legend: { position: "none" },
            chartArea: {
              left: "5%",
              width: "80%"
            },
            isStacked: true
          }
        });
      });

    });
  </script>
</head>
<body>
  <div id="chart1"></div>
  <div id="chart2"></div>
  <div id="chart3"></div>
</body>
</html>