Links

Time-based

Time-based Chart example
Time-based charts are very similar to distribution charts, the only differences being that:
  • An additional parameter tells the frontend if the dates should be displayed by Day, Week, Month, or Year,
  • The returned data is an array of objects with date as a Date and value as a Number.
agent.addChart('transactionVolume', async (context, resultBuilder) => {
// [...]
return resultBuilder.timeBased('Month', [
{ date: new Date('2017-02-01'), value: 636 },
{
date: new Date('2017-03-01'),
value: 740,
},
{
date: new Date('2017-04-01'),
value: 648,
},
{
date: new Date('2017-05-01'),
value: 726,
},
// [...]
]);
});
If you want to add several lines to the same chart, you can use the multipleTimeBased method:
agent.addChart('newUsersByProject', async (context, resultBuilder) => {
// [...]
return resultBuilder.multipleTimeBased(
'Month',
[
new Date('2017-02-28'),
new Date('2017-03-28'),
new Date('2017-04-28'),
new Date('2017-05-28'),
],
[
{ label: 'Project 1', values: [636, 740, 648, 726] },
{ label: 'Project 2', values: [100, 200, 300, 400] },
],
);
});