Area chart example (keen-dataviz.js)

HTML

<script src="https://cdn.jsdelivr.net/npm/keen-analysis@3"></script>
<script src="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.css">
<div id='chart'></div>

CSS

#chart{
  height: 300px;
}

JavaScript

const client = new KeenAnalysis({
  projectId: '53eab6e12481962467000000',
  readKey: 'd1b97982ce67ad4b411af30e53dd75be6cf610213c35f3bd3dd2ef62eaeac14632164890413e2cc2df2e489da88e87430af43628b0c9e0b2870d0a70580d5f5fe8d9ba2a6d56f9448a3b6f62a5e6cdd1be435c227253fbe3fab27beb0d14f91b710d9a6e657ecf47775281abc17ec455'
});

const chart = new KeenDataviz({
  container: '#chart',
  type: 'area',
  title: 'User actions per month'
});

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