Line chart example (keen-dataviz.js)

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/keen-analysis-1.2.2.js"></script>
<link rel="stylesheet" href="https://d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.1.3.css">
<script src="https://d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.1.3.js"></script>
<div id="chart"></div>

JavaScript

var client = new Keen({
  projectId: "53eab6e12481962467000000",
  readKey: "d1b97982ce67ad4b411af30e53dd75be6cf610213c35f3bd3dd2ef62eaeac14632164890413e2cc2df2e489da88e87430af43628b0c9e0b2870d0a70580d5f5fe8d9ba2a6d56f9448a3b6f62a5e6cdd1be435c227253fbe3fab27beb0d14f91b710d9a6e657ecf47775281abc17ec455"
});

var chart = new Keen.Dataviz()
  .el('#chart')
  .type("line")
  .height(300)
  .prepare();

// Use keen-analysis.js to run a query
// and pass the result into your chart:
client
  .query('count', {
    event_collection: 'user_action',
    timeframe: {
      start: "2014-02-02T00:00:00.000-00:00",
      end: "2014-04-01T00:00:00.000-00:00"
    },
    interval: "weekly"
  })
  .then(function(res) {
    // Handle the result
    chart
      .data(res)
      .render();
  })
  .catch(function(err) {
    // Handle the error
    chart
      .message(err.message);
  });