How to plot a timeline/time bars using the Chart widget Object Explorer (workaround)

Question

The Chart widget in OE can be used to display a count of a property of a linked object type over time.

As you might currently hit a bug using the standard point-and-click configuration, I am sharing a workaround here.

Answer 1

The Chart widget in OE can be used to display a count of a property of a linked object type over time.

As you might currently hit a bug using the standard point-and-click configuration, I am sharing a workaround here.

In this example, I'd like to display the number of flights (count of property Flight Id on the Flight object type) departing from a given airport (Airport object type, where the chart will be displayed) per day (date property on the Flight object type).

1. Using the usual Chart point-and-click configuration, select the object relation (here from Airport to Flight) and set up an aggregation on a string property, i.e. not on the date or timestamp property you are actually interested in. In this example, I started by setting up a count of Flight Id by Carrier Name instead of by Date (although I'm actually interested in counting by date).

2. Change the chart to be 'vertical' (default would be 'horizontal').

3. Go into the YML representation of the widget and change the chart to group by your date or timestamp property under 'value'. You will need to pass in the property id here rather than the display name of the property.

4. Also change the parameters under ‘dimensionsConfig’ and 'categoryAxis' to correspond to the parameters expected by an aggregation on a date/timestamp property. See the example code I'm sharing. Ensure you get to a state where the YML editor does not flag any issues.

5. The chart will still display an error in Edit and Preview mode but if you publish the change, it will show you a timeline or bars as you'd expect.

6. You can further fine tune things like axis labelling in the YML at your leisure.

Initial YML: (after grouping by a string property per steps 1-2)

config:
  title: Chart
  icon: chart
  chartConfig:
    type: bar
    chartObjectsConfig:
      linkTypeId:
        linkTypeId: flight-origin-airport-link
        linkDirection: forward
      shouldConsumeFilters: true
    dimensionsConfig:
      category:
        type: __hubble_data_charts_group_by_dimension_v2
        dimension:
          type: forbid
          settingValue:
            aggregation:
              type: exact
              sort:
                type: bucketName
                order: asc
              resultLimit: 15
              explicitOrdering: []
            propertyId: carrier_name
      value:
        type: __hubble_data_charts_multi_metric_dimension_v1
        dimension:
          type: forbid
          settingValue:
            - propertyId: flight_id
              aggregationFunction: value_count
    visualChartConfig:
      orientation: vertical
      grouping: stacked
      legend:
        visible: true
        position: bottom
        inset: false
      colors:
        - {}
      drawLabels: false
      categoryAxis:
        crosshair: false
        label: Category Axis
        showGridlines: false
        showToolbar: false
        format:
          type: string
      valueAxis:
        type: linear
        crosshair: false
        domainStart: auto
        domainEnd: auto
        label: Value Axis
        showGridlines: false
        showToolbar: false
        tickFormat: .2f
      relativeBars: false
      renderAsPercents: []
layout: both
sizing:
  minHeight: 300
  maxHeight: 3000

Final YML (grouping by the date property per steps 2-4)

config:
  title: Chart
  icon: chart
  chartConfig:
    type: bar
    chartObjectsConfig:
      linkTypeId:
        linkTypeId: flight-origin-airport-link
        linkDirection: forward
      shouldConsumeFilters: true
    dimensionsConfig:
      category:
        type: __hubble_data_charts_group_by_dimension_v2
        dimension:
          type: forbid
          settingValue:
            aggregation:
              type: date
              dateInterval: day
            propertyId: new-property3
      value:
        type: __hubble_data_charts_multi_metric_dimension_v1
        dimension:
          type: forbid
          settingValue:
            - propertyId: flight_id
              aggregationFunction: value_count
    visualChartConfig:
      orientation: vertical
      grouping: stacked
      legend:
        visible: true
        position: bottom
        inset: false
      colors:
        - {}
      drawLabels: false
      categoryAxis:
        crosshair: false
        label: Category Axis
        showGridlines: false
        showToolbar: false
        format:
          type: date
          tiers: double
      valueAxis:
        type: linear
        crosshair: false
        domainStart: auto
        domainEnd: auto
        label: Value Axis
        showGridlines: false
        showToolbar: false
        tickFormat: .2f
      relativeBars: false
      renderAsPercents: []
layout: both
sizing:
  minHeight: 300
  maxHeight: 3000