Heatmap

A heatmap (or heat map) is a graphical representation of data where the individual values contained in a matrix are represented as color [Wikipedia].

Pipes query

The heat map pipes query should output events with a “point” property should be a seq with 3 values, corresponding to the x, y and value of each cell, correspondingly.

Figure 1: Heatmap example. A 10x10 matrix with values in each cell ranging from 0 to 1000.

For example, the following Pipes query (with span ts 1 to ts 10) will generate a hea tmap similar to Figure 1, outputting events similar to Figure 2:

=> random(), timestamp() as t every ms
=> @for range(10) |> (t, _ +1, random() * 1000//1):seq() as point

Figure 2: Events containing the values of the cells in the first row, columns one to ten.

Cell settings

With the default cell settings (Figure 3), as long as there is a point for every one x and y values, the heat map will render with no spacing between the cells (see Figure 1). You can change this setting to make cells span over some range. Otherwise, there will be gaps between the cells.

Figure 3: Default settings assume one cell for every integer in each of the X and Y axes.

Should we edit the previous query and multiply every y value for 2 we would have a space between every cell in the y axis, such as in Figure 4

=> random(), timestamp() as t every ms
=> @for range(10) |> (t, (_+1)*2, random() * 1000//1):seq() as point

Figure 4: Heat map with the default cell settings and one cell every 2 y values

Similarly, should we also multiply every x value for 3 we would have a space the size of two cells between every cell in the x axis, such as in Figure 5

=> random(), timestamp() as t every ms
=> @for range(10) |> (t*3, (_+1)*2, random() * 1000//1):seq() as point

Figure 5: Heat map with the default cell settings and one cell every 3 x values and every 2 y values

If the spacing between cells is not desired, one can simply set column width to 3 and the row height to 2, setting depicted in Figure 6. In this case, the chart has one point every 3 X axis values so the column width is set to 3. It has one point every 2 y values so the row height is set to 2. With this setting, there will be no spaces between cells.

Figure 6: Cell settings to match data frequency

Cell value overwrite

Should new values arrive for an existing cell, that cell will show its most recent value

The following query will output a chart similar to the one in Figure 7:

=> random() every seconds
=> @for range(10) |> (random()*10//1, _, (random() * 1000)//1):seq() as point

Figure 7: Chart with cell values being overwritten

Troubleshooting

• Q: Chart shows no axis and no data

• A: Data is not in the right format. Each event should have a “point” property with a seq containing the x,y and value for each cell. Check the Pipes Query section above on how to format the data output for more details.

Figure 8: Troubleshooting - Chart shows no axis and no data

• Q: I have a working query outputting valid points but my chart looks blank

• Q: Chart shows axis but no cells

• A: There is probably too much space between cells making the cell sizes smaller than a pixel. Increase the cell settings width or height to match the data frequency. Read the cell settings above on how to set up the row height and column width to match the data frequency

Figure 9: Troubleshooting - Heat map with data but without any visible cells

• Q: There are gaps between the cells

• A: The cell width or height is too small. Increase the cell settings values to match the data frequency. Read the cell settings above on how to set up the row height and column width to match the data frequency

Figure 10: Troubleshooting - Chart shows spaces between cells

• Q: Cells have irregular size

• Q: Cells show over one another when I hover over them.

• A: Cell settings have width or height settings values greater than the frequency of data. Reduce the cell settings width or height to match the data frequency. Read the cell settings above on how to set up the row height and column width to match the data frequency

Figure 11: Troubleshooting - Heatmap with cells with irregular sizes showing over other cells