在 Cube.js 折线图上绘制多条线

Question

Imagine a simple line graph plotting a person count (y-axis) against a custom time value (x-axis), as such:

Suppose you have another dimension, say specific groupings of people, how do you draw a separate line on this graph for each group?

Answer 1

You have to use the PivotConfig here an example I used in Angular (EDIT) Here is the Query

Query = {
  measures: ['Admissions.count'],
  timeDimensions: [
    {
      dimension: 'Admissions.createdDate',
      granularity: 'week',
      dateRange: 'This quarter',
    },
  ],
  dimensions: ['Admissions.status'],
  order: {
    'Admissions.createdDate': 'asc',
  },
}

(END EDIT)

PivotConfig = {
  x: ['Admissions.createdDate.day'],
  y: ['Admissions.status', 'measures'],
  fillMissingDates: true,
  joinDateRange: false,
}

Code to extract data from resultset:

let chartData = resultSet.series(this.PivotConfig).map(item => {
        return {
          label: item.title.split(',')[0], //title contains "ADMIS, COUNT"
          data: item.series.map(({ value }) => value),
        }
      })

Result Object (not the one in the chart):

[{
  "label": "ADMIS",
  "data": [2,1,0,0,0,0,0]
},{
  "label": "SORTIE",
  "data": [2,1,0,0,0,0,0]
}]

Here is what the output looks like!

Answer 2

The chart renderer in the Developer Playground is meant to be quite simplistic; I'd recommend creating a dashboard app or using one of our frontend integrations in an existing project to gain complete control over chart rendering.