Manual line chart (keen-dataviz.js)

Manually create a line chart visualization with Keen.Dataviz

HTML

<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

// Fetch data from another API or your own data source:
// Imaginary callback ...
var data = {
    "result": [
        {
            "value": 317,
            "timeframe": {
                "start": "2017-04-01T00:00:00.000Z",
                "end": "2017-05-01T00:00:00.000Z"
            }
        },
        {
            "value": 1015,
            "timeframe": {
                "start": "2017-05-01T00:00:00.000Z",
                "end": "2017-06-01T00:00:00.000Z"
            }
        }
    ],
    "totalusers": 5357
}

var chart = new Keen.Dataviz()
    .el(document.getElementById('chart'))
    .chartType("line")
    .colors(["#6ab975"])
    .title("AVG. TIME ON SITE / USER")
    .width(400)
    .prepare();

chart
  .data(data)
  .render();