Create multiple line charts

This example shows you how to create a multiple-line chart.

Example of expected JSON Format

{
labels: ['W48-2020', 'W49-2020', ...],
values: [
{ key: 'orders', values: ['2', '3', ...] },
{ key: 'new_users', values: ['0', '0', ...] },
...
]
}

The JSON is composed of

  • labels for the X-Axis

  • values for the Y-Axis. values is an array, each item is a line of the chart. A line is a key/values object with key for the line's name.

How to build the expected JSON for multiple-line chart

The following example uses a raw SQL query but it could be replaced by a Sequelize / Mongoose query.

const _ = require('lodash');
const moment = require('moment');
const express = require('express');
const router = express.Router();
const Liana = require('forest-express-sequelize');
const models = require('../models');
router.post('/stats/multilines', (request, response, next) => {
/* Here the query with the 2 lines: orders & new_users */
const query = `
select 'orders' as "key", week_day, nb from week_orders
union
select 'new_users' as "key", week_day, nb from week_new_users
order by week_day, "key"
`;
return models.sequelize
.query(query)
.then((results) => {
const records = results[0];
/* Expected Result:
labels (X-axis),
[values] (Y-axis): one array per line */
let resultsFormated = { labels: [], values: [] };
/* Get the X-axis labels => Week numbers */
const weeks = _.uniq(records.map((r) => r.week_day ));
resultsFormated.labels = weeks.map((m) => moment(m).format('[W]w-YYYY'));
/* Get the Y-axis values */
var keys = _.uniq(records.map((r) => r.key));
/* Build one array per key / line */
keys.forEach((key) => {
var current = _.filter(records, { key });
const values = current.map((c) => c.nb);
resultsFormated.values.push({
key: key,
values: values
});
});
/* Use Liana.StatSerializer to Jsonify the result */
var json = new Liana.StatSerializer({ value: resultsFormated }).perform();
response.send(json);
});
});