janpaul123/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>lesson-learner-analytics</title>
  <script type="text/javascript">
    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)})();
  </script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style>
    #chart > div {
      background: steelblue;
      color: white;
      font: 12px sans-serif;
      padding: 3px 5px;
    }

    #chart > div > span {
      float: right;
    }
  </style>
</head>
<body>
  <div>
    <label>Keen.io projectId: <input id="projectId" value="52fac36936bf5a5944000002"></input></label><br>
    <label>Keen.io readKey: <input id="readKey"></input></label><br>
    <label>Versal lessonId: <input id="lessonId" value="l1"></input></label><br>
    <button id="generate">Generate chart</button>
  </div>

  <div id="chart"></div>

  <script>
    document.getElementById('generate').addEventListener('click', function() {
      Keen.configure({
        projectId: document.getElementById('projectId').value,
        readKey: document.getElementById('readKey').value
      });

      Keen.onChartsReady(function() {
        var metric = new Keen.Metric("progress", {
          analysisType: "sum",
          targetProperty: "progress",
          groupBy: "gadgetId",
          filters: [{
            "property_name": "progress",
            "operator": "eq",
            "property_value": 1
          }, {
            "property_name": "lessonId",
            "operator": "eq",
            "property_value": document.getElementById('lessonId').value
          }]
        });

        metric.getResponse(function(response){
          var scale = d3.scale.linear()
            .domain([0, d3.max(response.result, function(d) { return d.result; })])
            .range([0, 420]);

          var bar = d3.select('#chart')
            .selectAll("div").data(response.result);

          bar.exit().remove();

          bar.enter().append('div')
              .style('width', function(d) { return scale(d.result) + 'px'; })
              .text(function(d) { return d.gadgetId; })
            .append('span')
              .text(function(d) { return d.result; });
        });
      });
    });

    window.parent.postMessage({event: 'setHeight', data: {pixels: '1000'}}, '*');
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>lesson-learner-analytics</title>
	<script type="text/javascript">
	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)})();
	</script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style>
	#chart > div {
	background: steelblue;
	color: white;
	font: 12px sans-serif;
	padding: 3px 5px;
	}

	#chart > div > span {
	float: right;
	}
	</style>
	</head>
	<body>
	<div>
	<label>Keen.io projectId: <input id="projectId" value="52fac36936bf5a5944000002"></input></label><br>
	<label>Keen.io readKey: <input id="readKey"></input></label><br>
	<label>Versal lessonId: <input id="lessonId" value="l1"></input></label><br>
	<button id="generate">Generate chart</button>
	</div>

	<div id="chart"></div>

	<script>
	document.getElementById('generate').addEventListener('click', function() {
	Keen.configure({
	projectId: document.getElementById('projectId').value,
	readKey: document.getElementById('readKey').value
	});

	Keen.onChartsReady(function() {
	var metric = new Keen.Metric("progress", {
	analysisType: "sum",
	targetProperty: "progress",
	groupBy: "gadgetId",
	filters: [{
	"property_name": "progress",
	"operator": "eq",
	"property_value": 1
	}, {
	"property_name": "lessonId",
	"operator": "eq",
	"property_value": document.getElementById('lessonId').value
	}]
	});

	metric.getResponse(function(response){
	var scale = d3.scale.linear()
	.domain([0, d3.max(response.result, function(d) { return d.result; })])
	.range([0, 420]);

	var bar = d3.select('#chart')
	.selectAll("div").data(response.result);

	bar.exit().remove();

	bar.enter().append('div')
	.style('width', function(d) { return scale(d.result) + 'px'; })
	.text(function(d) { return d.gadgetId; })
	.append('span')
	.text(function(d) { return d.result; });
	});
	});
	});

	window.parent.postMessage({event: 'setHeight', data: {pixels: '1000'}}, '*');
	</script>
	</body>
	</html>