var client = new Keen({
  projectId: "your_project_id",
  readKey: "your_read_key"
});

[client].draw(q)

[dataviz].parseRequest()

[dataviz].parseRawData()


Metric

var metric = new Keen.Query("count", {
  eventCollection: "pageview"
});

A

var m1 = document.getElementById("1-1");
var cfg = {
  colors: ["#f35757"],
  height: 138,
  title: "Total Pageviews"
};
var metric = client.draw(metric, m1, cfg);

var m2 = document.getElementById("1-2");
var req_metric = new Keen.Dataviz()
  .height(138)
  .colors(["#f0ad4e"])
  .el(m2)
  .prepare();

client.run(metric, function(){
  req_metric
    .parseRequest(this)
    .render();
});

var m3 = document.getElementById("1-3");
var req_metric = new Keen.Dataviz()
  .height(138)
  .colors(["#8383c6"])
  .el(m3)
  .prepare();

client.run(metric, function(res){
  req_metric
    .parseRawData(res)
    .render();
});

Categorical

var groupBy = new Keen.Query("count", {
  eventCollection: "pageview",
  groupBy: "page"
});

Pie chart


Interval

var interval = new Keen.Query("count", {
  eventCollection: "pageview",
  timeframe: "this_12_months",
  interval: "monthly"
});

Area chart

A
B
C

Bar chart

A
B
C

Column chart

A
B
C

Line chart (single)

A
B
C

Categorical Interval

var multiline = new Keen.Query("count", {
  eventCollection: "pageview",
  groupBy: "page",
  timeframe: "this_12_months",
  interval: "monthly"
});

Line chart (multi)

A
B
C

Table

A
B
C

Extractions

A
B
C