Visualize data in Postman Flows

The Display block accepts information from other blocks and creates a visualization of that information. You can select from several visualization types.

This image shows four types of output visualization types: line chart, text, gauge, and boolean. The following tutorials show how to create each of these visualization types. You can also find links to example flows for other visualization types in the Visualization types with example flows section.

For examples of how to use Display blocks in your flows, see the Stock Dashboard and WordPress Sentiment Analysis Flows.

Line chart

The Line Chart visualization type accepts two lists and plots them on x and y axes in a chart. The first list received is the x axis, and the second list is the y axis.

To create an example line chart Display block, do the following:

1. Create a new flow, enter the data below in the Start block, and select JSON from the dropdown list:

   {
   "List 1": [10, 20, 30, 40, 50, 60, 70],
   "List 2": [100, 200, 300, 400]
   }
   

2. Connect a Select block to the Start block and select List 1.

3. Connect another Select block to the Start block and select List 2.

4. Connect both Select blocks to a single Display block.

5. In the Display block's dropdown list, select Line chart and run the flow. A line chart appears with the data on their respective axes.

   

Text

When a Display block receives a string, it automatically selects the Text visualization type and shows the text.

To create an example text Display block, do the following:

1. Create a new flow and add a Send request block with a GET request to postman-echo.com/get.

2. Connect a Select block to the Send request block and enter body.headers.host. This selects a string from the response.

3. Connect a Display block to the Select block and run the flow. The Display block shows the body.headers.host string from the response, which in this example is postman-echo.com.

   

Gauge

The Gauge visualization type shows a value's position in a range using a half-pie chart.

To create an example gauge Display block, do the following:

1. Create a new flow and add a Send request block with a GET request to techcrunch.com/wp-json/wp/v2/posts.

2. Connect an Evaluate block to the Send request block and enter this FQL query: $count(value1.body) to count how many items the response body has.

3. Connect a Display block to the Evaluate block and select Gauge from the dropdown list.

4. Run the flow. The gauge shows the number of items in the response body as the shaded part of the graph.

   To set the minimum and maximum values for the gauge, select the Display block's settings icon .

   

Boolean

When a Display block receives a message that's either true or false, it automatically selects the Boolean visualization type, showing True or False.

To create an example boolea Display block, do the following:

1. Create a new flow and add a Send request block with a GET request to postman-echo.com/get.

2. Connect an Evaluate block to the Send request block and enter this FQL query: value1.http.status = 200 to check if the response has a 200 status code.

3. Connect an Output block to the Evaluate block and run the flow. If the response has a 200 status code, the Display block shows a circle that says True. If not, the circle shows False.

   

Visualization types with example flows

You can select the output formats listed below from the Display block's dropdown menu. Select the Example links to open flows in Postman that show each output format.

• Text - Shows incoming information as lines of text. To adjust the text size, select the Display block, then select Additional Settings > Text size. Text example

• Number - Displays an integer, if the information connected to the input is a number. Number example

• Boolean - Shows a true or false value. If the value connected to the input isn't true/false or 0/1, it always displays true. Boolean example

• Date & Time - If the incoming text or number can be interpreted as a date, it appears in the following format: DD MMM, YYYY HH:MM:SS am/pm. Date & Time example

• JSON - Shows the information connected to the input in JSON format, enabling you to view and select data. JSON example

• Bar Chart - Shows one or more sets of information connected to the input. Bar chart example

• Line Chart - Shows a line for X and Y coordinates connected to the input. Line chart example

• Gauge - Shows a number when the input is a percentage. Gauge example

• Table - Shows the connected input as a table with rows and columns. Table example

• Markdown - Shows the text with all of the Markdown annotations displayed. Markdown example

• HTML - Accepts valid HTML and renders it as formatted HTML. HTML example

• URL - Shows a hyperlink to the URL that's connected to the input. URL example

• Image - Shows an image from a URL that's connected to the input. Image example

• Video - Shows a video from a URL that's connected to the input and enables it to be played. Video example

• YouTube - Shows a YouTube video from a URL that's connected to the input and enables it to be played. YouTube example