How to change the legend values - keen-io

Question

Generally I am having a hard time understanding how to construct the data item that i feed into the parseRawData. But here I am having a much simpler problem...I am unable to change the chart legend. I created this visualization:
var appRetentionAndroidFunnelQry = new Keen.Query("funnel", {
steps: [
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Create"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "android"
}
],
timeframe: {
"start": periodRefStart.toISOString(),
"end": periodRefEnd.toISOString()
}
},
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Update"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "android"
}
],
timeframe: {
"start": period1Start.toISOString(),
"end": period1End.toISOString()
}
},
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Update"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "android"
}
],
timeframe: {
"start": period2Start.toISOString(),
"end": period2End.toISOString()
}
}
]
});
var appRetentionIosFunnelQry = new Keen.Query("funnel", {
steps: [
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Create"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "ios"
}
],
timeframe: {
"start": periodRefStart.toISOString(),
"end": periodRefEnd.toISOString()
}
},
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Update"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "ios"
}
],
timeframe: {
"start": period1Start.toISOString(),
"end": period1End.toISOString()
}
},
{
event_collection: "devices",
actor_property: "activationCode",
filters: [
{
"property_name": "action",
"operator": "eq",
"property_value": "Update"
},
{
"property_name": "platform",
"operator": "eq",
"property_value": "ios"
}
],
timeframe: {
"start": period2Start.toISOString(),
"end": period2End.toISOString()
}
}
]
});
var steps = [
periodRefStart.toISOString().slice(0, 10) + ' - ' + periodRefEnd.toISOString().slice(0, 10),
period1Start.toISOString().slice(0, 10) + ' - ' + period1End.toISOString().slice(0, 10),
period2Start.toISOString().slice(0, 10) + ' - ' + period2End.toISOString().slice(0, 10)
];
var combinedFunnel = new Keen.Dataviz()
.el(document.getElementById('app-retention-chart'))
.chartType('columnchart')
.chartOptions({
orientation: 'horizontal'
})
.height(250)
.prepare(); // start spinner
client.run([appRetentionAndroidFunnelQry, appRetentionIosFunnelQry], function (err, response) {
var output = {
result: [],
steps: []
};
// Combine results
Keen.utils.each(response[0].result, function (stepResult, i) {
output.result.push([
steps[i],
response[0].result[i],
response[1].result[i]
]);
});
// Draw custom data object
combinedFunnel
.parseRawData(output)
.render();
});
The output looks like this:
How can I please change the legend and the column labels to say Android and iOS instead of 1 and 2? Also...any help in better understanding how the data parser works will be appreciated. I tried reading the parseRawData.js source code but it seems it is beyond my not-so-great JavaScript ability.
Regards,
Khaled

Answer 1

In the very last piece of your code, you can choose what the labels are:
// Draw custom data object
combinedFunnel
.parseRawData(output)
.labels(["Android", "iOS"])
.render();
I got this from: https://github.com/keen/keen-js/blob/master/docs/visualization.md#funnels

Answer 2

Ok, so I played around with this a bit, and to get what you want, you're going to have to completely over ride the dataset that gets passed to the Dataviz component.
Here is an example jsfiddle that shows you the format for the data to get what you're looking for:
http://jsfiddle.net/hex337/16av86as/2/
The key component is this:
.call(function () {
this.dataset.output([
["index", "iOS", "Android"],
["r1", 1000, 900],
["r2", 750, 700]
]);
})
Instead of hard coding the numbers, you'll want to use the results from the queries that you run, but this should give you the "iOS" and "Android" legend keys, and you can set the "r1" and "r2" to be the steps in your funnel.
I hope this solves the problem!

Answer 3

You can use the .labelMapping() function. Especially when using grouping for the data the order of labels in the data can change, so .labelMapping() is safer than just setting labels with .labels().
chart.data(res).labelMapping({
'741224f021ca7f': 'Sensor A',
'a1a9e6253e16af': 'Sensor B'
}).render();