JourneyChart

Version: 9.0

The JourneyChart control displays an extended ColumnChart chart. The JourneyChart control adds the following features to the ColumnChart control:

  • Users can select the time range (“duration”) of the data the control displays in the chart.

  • Users can page back and forth. The control checks if there is data available for date ranges before or after the one that it currently shows. If so, the control shows back and forward buttons as appropriate.

  • You can specify that users can “drill up” and “drill down” through time ranges.

  • You can specify that users can open a Details Panel for the segments of the chart.

Duration and units

The Duration and Unit concepts are important for understanding how the JourneyChart control works. The Duration is the time range of the data that the control displays. A Unit is the time range of a single segment of the chart.

You create Durations by creating Duration configuration items. You put the items you create in a folder under the PageSettings item, and you specify this folder in the DurationItems property of the JourneyChart control.

You create a Duration item by creating an item based on the JourneyDuration template. The item has these fields:

Field

Description

Duration

Specify the time range of the data that the control displays. The possible values are Day, Week, Month, Quarter, and Year.

Unit

Specify the time range of single segment of the chart. The possible values are Hour, Day, Week, Month, Quarter, and Year.

UnitStep

Specify how many units the control displays at a time (in a “page”).

CanDrillUp

If true, the control displays the Drill-Up button, and users can drill up.

CanDrillDown

If true, the control shows the Drill-Down button, and users can drill down.

SPEAK has a number of Duration items that are already configured:

  • There are Duration items for Hour, Day, Week, Month, Quarter, and Year.

  • The Year item has the CanDrillUp field set to“False”.

  • The Hour item has the CanDrillDown field set to “False”.

  • All other settings of the CanDrillUp and CanDrillDown fields are “True”.

You specify the Duration and Unit fields like this:

Duration item

Duration

Unit

Hour

None

Hour

Day

Day

Hour

Week

Week

Day

Month

Month

Day

Quarter

Quarter

Week

Year

Year

Month

Drilling up and down

Drilling down means that the control changes the duration to the current unit. For example, if the current duration is Week and the current unit is Day, the control drills down by setting the duration to Day and refreshing the data that it displays.

The control always displays a drill-down button, but it only enables this button in these conditions:

  • The CanDrillDown field of the current Duration item is true

  • The user has selected a segment

Drilling up means that the control changes the duration to the duration that is one magnitude higher. For example, if the current duration is Week, the control drills up by setting the duration to Month and refreshing the data it displays.

The control always displays a drill-up button, but it only enables it when there is a duration of a higher magnitude.

Note

The sequence of durations can be different when users drill up and when they drill down. This happens, for example, when you use the preconfigured Duration items. If a user drills down while the duration is Month, the duration will change to Day. When the user drills up while the duration is Day, the duration will change to Week.

Details panel

You can specify that SPEAK displays a Details panel when users click a segment in the JourneyChart control.

Set the SegmentSelectedAction property of the JourneyChart control to ShowDetails.

Add a control, for example, a ListControl, to the DetailsPanel placeholder

You have to populate the control you have put in the DetailsPanel placeholder yourself. You can do this in page code. The following statement checks that the user has selected a segment and that the SegmentSelectedAction is ShowDetails:

RequestResponse
if (selectedSegment && selectedSegment.action === "ShowDetails") {
// Log to the console the data object for selected segment
console.log(selectedSegment.dataObject);
}

Properties

Name

Description

Default

Appearance

ShowAxis

If true, the control displays axes.

True

ShowLegend

If true, the control displays a legend for the chart.

True

ShowValues

If true, the control displays the values of the data points inside the graph itself.

False

SingleChartHeight

Specify the height in pixels of the chart.

If the chart is part of a sequence of charts, the control gives each individual chart this height.

400

SingleChartWidth

If you specify 100% the chart takes up the available width. If you specify a number, the control gives the chart this width in pixels.

If the chart is part of a sequence of charts, 100% means each chart has the entire available width, and the chart sequence becomes a vertical sequence.

If the chart is part of a sequence of charts, and you specify an integer, the control gives each chart this width in pixels, and the sequence of charts wraps horizontally.

100%

StackSeries

If true, the control stacks the individual series in a multiseries chart.

False

Tooltip

Specify the text that you want displayed when the user hovers the mouse over the chart.

None

VisibleCategoriesRange

If it is a multiseries chart and this number is > 0, the control displays this number of categories along the horizontal axis. If the data contains more categories, users have to scroll horizontally.

If this number is 0, the control displays all categories.

0

Behaviors

DurationItems

Specify a folder with Duration items The control has a Duration for each Duration item in the folder.

IsDurationButtonsPanelVisible

If true, the control displays a panel with a button for each Duration. The control uses the Display Name of a Duration item as a label for the button for that Duration item.

SegmentSelectedAction

Specify what happens when users click a segment in the chart:

  • NoAction: nothing happens

  • DrillDown: the control drills down to the next duration level. See drilling up and down.

  • ShowDetails: the control shows a Details panel for the segment.

SelectedDurationItemId

Specify the Duration item that is selected by the control when the page it is in opens.

Data

Data

Bind the control to the data it uses, for example: Binding.ChartDataProvider.Data}

DataMapping

CategoryChartField

Point to a ChartField item. The control uses this field as the X (horizontal) axis of the chart.

CategoryFilter

Specify one or more values like this: {value1,value2}. The control uses each of these values to filter the data column the CategoryChartField property points to.

SeriesChartField

Point to a ChartField item. The control uses this field as the definition of the series it displays.

SeriesFilter

Specify one or more values like this: {value1,value2}. The control uses each of these values as a facet of the data column the SeriesChartField property points to.

If you do not enter anything, the control creates a facet for each distinct value in the data column.

ValueChartFields

Point to a ChartField item. The control uses this field as the Y (vertical) axis of the chart.

Configuration

You can create a configuration item for a JourneyChart control by creating an item based on the JourneyFCChart Parameters template.

The configuration item has these specific fields:

  • SegmentSelectedAction

  • DurationItems

  • SelectedDurationItemId

  • IsDurationButtonsPanelVisible

It inherits these fields:

  • ShowAxis

  • ValueChartFields

  • SingleChartWidth

  • CategoryChartField

  • ShowLegend

  • Data

  • ShowValues

  • CategoryFilter

  • SingleChartHeight

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id

  • VisibleCategoriesRange

  • SeriesChartField

  • SeriesFilter

  • StackSeries

Do you have some feedback for us?

If you have suggestions for improving this article,