JSON Expression Language for Highcharts

Supported Arithmetic Expressions

You can use these arithmetic expressions with the JSON expression language:

Supported Array Operations

• map - Applies a mapping function to each element of an array and returns a new array with the transformed values.

  For example, ["map", [1, 2, 3], ["*", ["item"], 2]] maps each element of the array [1, 2, 3] by multiplying it by 2.

• filter – Filters an array based on a given condition and returns a new array containing only the elements that satisfy the condition.

  For example, ["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]] filters the array [1, 2, 3, 4, 5] to include only the even numbers.

• reduce – Reduces an array to a single value by applying a reducer function to each element and accumulating the result.

  For example, ["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0] reduces the array [1, 2, 3, 4, 5] to the sum of its elements.

• get – Retrieves a value from an object or an array by specifying a key or index.

  For example, ["get", ["item"], "name"] retrieves the value of the "name" property from the current item.

• unique – Returns only unique items inside an array.

  For example, ["unique", [1, 2, 2]] returns [1, 2].

Custom Expressions

You can use custom expressions to enhance the functionality of Highcharts visuals.

getColumn

Use the getColumn expression to return values from specified column indices. For example, this table shows a list of locations and their printer throughput:

Location name	Printer throughput
Location A	100
Location B	50
Location C	75

This getColumn query generates an array that shows all location names alongside their printer throughput:

{
	location name: ["getColumn", 0], 
	printer throughput: ["getColumn", 1]
}

Output:

{
	location name: ["Location A", "Location B", "Location C"],
	printer throughput: [100, 50, 75]
}

You can also pass multiple columns at once to generate an array of arrays, as shown in this example:

{
	values: ["getColumn", 0, 1]
}

Output:

{
	values: [["Location A", 100], ["Location B", 50], ["Location C", 75]]
}

Similar to getColumn, these expressions can be used to return column values from field wells or themes:

• getColumnFromGroupBy returns columns from the Group by field. The second argument is the index of the column to return. For example, ["getColumnFromGroupBy", 0] returns the values of the first field as an array. You can pass multiple indices to get an array of arrays where each element corresponds to the field in the Group by field well.
• getColumnFromValue returns columns from the Value field well. You can pass multiple indices to get an array of arrays where each element corresponds to the field in the Value field well.
• getColorTheme returns the current color palette of a theme, as shown in this example:

  {
  "color": ["getColorTheme"]
  }

formatValue

Use the formatValue expression to apply formatting to your values. For example, this expression formats the x-axis label with the format value that is specified in the first field from the field wells:

"xAxis": {
		"categories": ["getColumn", 0],
		"labels": {
		"formatter": ["formatValue", "value", 0]
		}
	}