Navigator component

Overview

The NavigatorComponent is part of the Dashboards plugins. It utilizes the navigator of Highcharts Stock  to provide an overview of the values of a table column. Users can set a range in the Navigator, which can be synchronized as extremes with other Dashboard components for data inspection.

Example

A typical use case for the synchronization of extremes can be seen in the climate demo . In the demo, the navigator component shows the timeline of the selected climate indicator for the active city.

Dashboard.board('container', {
  components: [
    {
      renderTo: 'time-range-selector'
      type: 'Navigator',
      connector: {
        id: 'Range Selection'
      },
      columnAssignment: {
        'TXC': 'y'
      },
      sync: {
        extremes: true
      }
    },
    // ...
  ],
  // ...
});

Components synchronization

The Navigator component can be synced with other components in Dashboards. Two synchronization types are predefined for the Navigator component: crossfilter and extremes. You can find more information about it in the sync article .

Crossfilter sync is specific to the NavigatorComponent. You can learn more about this below.

Crossfilter

Alternatively, the NavigatorComponent can synchronize extremes in a shared crossfilter. The crossfilter is managed by a RangeModifier, which sources the connector’s data table. All components must share the same connector and table to make the crossfilter work.

For crossfilter sync, the affectNavigators option must be enabled, which causes, in addition to changing the content of the table, the content of other crossfilters. See the demo here .

Read more about components synchronization here .

Crossfilter Example

In the crossfilter demo  you see the setup to limit the amount of data points. You have to define column ranges with the help of the Navigator component and a shared DataConnector.

Dashboard.board('container', {
  components: [
    {
      renderTo: 'Top-left'
      type: 'Navigator',
      connector: {
        id: 'Economy'
      },
      columnAssignment: {
        'Agriculture': 'y'
      },
      sync: {
        crossfilter: true
      }
    },
    {
      renderTo: 'Top-left'
      type: 'Navigator',
      connector: {
        id: 'Economy'
      },
      columnAssignment: {
        'Industry': 'y'
      },
      sync: {
        crossfilter: true
      }
    },
    // ...
  ],
  // ...
});