rickhanlonii/keen.io.issue.html

## keen.io.issue.html
<!DOCTYPE html>
<html>
<head>
    <!-- This policy is broken -->
    <meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline'">

    <!-- This policy works -->
    <!--<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval">-->

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"   integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="   crossorigin="anonymous"></script>
    <script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.js" type="text/javascript"></script>
    <script type="text/javascript">

        var projectID = "{project_id}",
            readKey = "{read_key}",
            countQueryData = {
                event_collection: "{collection}",
                group_by: "{key}",
                timeframe: "this_21_days"
            };

        $(function() {
            var client = new Keen({
                projectId: projectID,
                readKey: readKey
            });

            var count = new Keen.Query("count", countQueryData);

            Keen.ready(function() {
                client.draw(count, document.getElementById("keen-chart-referrer"), {
                    title: "Basic Draw"
                });
            });

            Keen.ready(function() {
                var chart = new Keen.Dataviz()
                        .el(document.getElementById("keen-chart-referrer-advanced"))
                        .prepare();

                var req = client.run(count, function (err, res) {
                    if (err) {
                        chart.error(err.message);
                    }
                    else {
                        chart.parseRequest(this)
                             .title("Advanced Draw")
                             .render();
                    }
                });
            });

        });
    </script>
</head>
<body>
    <div id="keen-chart-referrer"></div>
    <div id="keen-chart-referrer-advanced"></div>
</body></html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- This policy is broken -->
	<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline'">

	<!-- This policy works -->
	<!--<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval">-->

	<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
	<script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.js" type="text/javascript"></script>
	<script type="text/javascript">

	var projectID = "{project_id}",
	readKey = "{read_key}",
	countQueryData = {
	event_collection: "{collection}",
	group_by: "{key}",
	timeframe: "this_21_days"
	};

	$(function() {
	var client = new Keen({
	projectId: projectID,
	readKey: readKey
	});

	var count = new Keen.Query("count", countQueryData);

	Keen.ready(function() {
	client.draw(count, document.getElementById("keen-chart-referrer"), {
	title: "Basic Draw"
	});
	});

	Keen.ready(function() {
	var chart = new Keen.Dataviz()
	.el(document.getElementById("keen-chart-referrer-advanced"))
	.prepare();

	var req = client.run(count, function (err, res) {
	if (err) {
	chart.error(err.message);
	}
	else {
	chart.parseRequest(this)
	.title("Advanced Draw")
	.render();
	}
	});
	});

	});
	</script>
	</head>
	<body>
	<div id="keen-chart-referrer"></div>
	<div id="keen-chart-referrer-advanced"></div>
	</body></html>