{"info":{"_postman_id":"0aa580b0-3a90-4ef4-ac47-8fd6b3673113","name":"Data visualization","description":"

đź“Š Get started here

\n

The Postman Visualizer provides a programmable way to represent responses visually.

\n

This collection contains six sample requests and scripts for rendering Bar graph, Table, Map and visualizing any CSV, JSON or XML data.

\n

đź”– How to use this template

\n

Step 1: Send the requests.

\n

Step 2: Find the visualization in the \"Visualize\" tab in the response near the \"Pretty\" view.

\n

Step 3: You can copy, update and use the test script under the \"Scripts\" tab for your requests.

\n\n\n

đź’ˇRelated templates

\n

API testing basics
Using libraries
API documentation

\n","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","toc":[{"content":"📊 Get started here","slug":"get-started-here"}],"owner":"38456876","collectionId":"0aa580b0-3a90-4ef4-ac47-8fd6b3673113","publishedId":"2sB3Wqug5N","public":true,"customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"FF6C37"},"publishDate":"2025-11-05T15:27:41.000Z"},"item":[{"name":"Visualize bar chart","event":[{"listen":"test","script":{"exec":["// Define a handlebars template which will receive the response data and be used to render the visualization","var template = `","// Create a canvas to draw the chart into","","","// Import Chart.js library which we'll use to define and draw the chart"," ","","`;","","var response = pm.response.json();","","// Pass our template and response data to the Postman visualizer to render it in the \"Visualize\" view","pm.visualizer.set(template, {"," res: response.data.content","} );"],"type":"text/javascript","packages":{}}}],"id":"6c3a8562-6f8b-45f7-bf7f-b6fab7b0dd97","request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n \"message\": \"Go to Visualize tab on the right 👉 located alongside the Pretty, Raw, and Preview options. We have added the visualization code to the Scripts tab in the request.\",\n\t\"content\":\n\t[\n\t 795,\n\t 49,\n\t 231,\n\t 942\n\t\t\n\t]\n}","options":{"raw":{"language":"json"}}},"url":"https://postman-echo.com/post","description":"

This request helps you visualize the response body as a bar chart.

\n

The same bar chart represents (imaginary) population densities for some cities. The data for the bar chart includes random numbers between 0-1000 taken from the response.

\n

To visualize your response as a bar chart, replace the sample request URL with your API. Or you can copy the test script from the “Scripts” tab and reuse it.

\n

You can also tweak the scripts to change to a line or pie chart.

\n","urlObject":{"protocol":"https","path":["post"],"host":["postman-echo","com"],"query":[],"variable":[]}},"response":[],"_postman_id":"6c3a8562-6f8b-45f7-bf7f-b6fab7b0dd97"},{"name":"Visualize table","event":[{"listen":"test","script":{"exec":["// Define a handlebars template which renders the response data in a table","// We define a table and use handlebars `{{#each}}` syntax to map over the response data","// We can include custom CSS to style the table","var template = `",""," ",""," "," "," "," "," "," {{#each response.data.contacts}}"," "," "," "," "," {{/each}}","
NameEmail
{{name}}{{email}}
","`;","","// Pass our template and response data to the Postman visualizer to render it in the \"Visualize\" view","pm.visualizer.set(template, {"," response: JSON.parse(responseBody)","});"],"type":"text/javascript","packages":{}}}],"id":"08ba9bef-9a48-4ccc-9948-9303904313e5","request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n \"message\": \"Go to Visualize tab on the right 👉 located alongside the Pretty, Raw, and Preview options. We have added the visualization code to the Scripts tab in the request.\",\n\t\"contacts\": [\n\t\t{\n\t\t\t\"name\": \"Ernesto Goodwin\",\n\t\t\t\"email\": \"Braxton.Crona@hotmail.com\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"Kay Koepp V\",\n\t\t\t\"email\": \"Angela_Marquardt@yahoo.com\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"Colleen Jerde\",\n\t\t\t\"email\": \"Jude.Kassulke5@hotmail.com\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"Edna Hermiston\",\n\t\t\t\"email\": \"Beth.Labadie@hotmail.com\"\n\t\t}\n\t\t]\n}\n\t\t","options":{"raw":{"language":"json"}}},"url":"https://postman-echo.com/post","description":"

This request visualizes the response body as a table. The data for the table includes randomly generated names and e-mails from postman-echo.

\n

To visualize your response as a table, replace the sample request URL with your API. Or you can copy the test script from the “Scripts” tab and reuse it.

\n","urlObject":{"protocol":"https","path":["post"],"host":["postman-echo","com"],"query":[],"variable":[]}},"response":[],"_postman_id":"08ba9bef-9a48-4ccc-9948-9303904313e5"},{"name":"Visualize map","event":[{"listen":"prerequest","script":{"exec":["const now = new Date()","","","const nDaysDiff = (baseDateStr, nDays) => {"," const baseDate = new Date(baseDateStr)"," const baseDateMilli = baseDate.getTime()"," const offsetMilli = 1000 * 60 * 60 * 24 * nDays "," const offsetDate = new Date(baseDateMilli + offsetMilli)"," const offsetDateStr = offsetDate.toISOString().split(\"T\")[0]"," return offsetDateStr","}","","const startTime = nDaysDiff(now.toString(), -3)","const endTime = now.toISOString().split(\"T\")[0]","","pm.collectionVariables.set('eq-starttime', startTime)","pm.collectionVariables.set('eq-endtime', endTime)"],"type":"text/javascript"}},{"listen":"test","script":{"exec":["var template = `","","","","

","
","
","

Draw mouse to zoom in onto section. Double click to zoom out

","
","","`;","","var response = pm.response.json();","let parsedData = [];","","//data parsing","for (let earthquake of response.features){"," let tempEntry = {};"," tempEntry.lat = earthquake.geometry.coordinates[1];"," tempEntry.long = earthquake.geometry.coordinates[0];"," tempEntry.circleSize = Math.abs(Math.ceil(earthquake.properties.mag));"," tempEntry.color = \"#F09D51\";"," parsedData.push(tempEntry);","}","","pm.visualizer.set(template, {"," data: parsedData,"," title: \"Map of Earthquake Occurrences Over Past Three Days\"","} );","",""],"type":"text/javascript"}}],"id":"2825d0ab-41ed-4dc6-ae3b-6bf1d3e2b82b","request":{"method":"GET","header":[],"url":"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=&endtime=","description":"

This request visualizes the response body as a map.

\n

To visualize your response as a map, replace the sample request URL with your API. Or you can copy the test script from the “Scripts” tab and reuse it.

\n","urlObject":{"protocol":"https","path":["fdsnws","event","1","query"],"host":["earthquake","usgs","gov"],"query":[{"key":"format","value":"geojson"},{"key":"starttime","value":""},{"key":"endtime","value":""}],"variable":[]}},"response":[],"_postman_id":"2825d0ab-41ed-4dc6-ae3b-6bf1d3e2b82b"},{"name":"Visualize any CSV data","event":[{"listen":"test","script":{"exec":["var template = `","","","
","","","","","","`;","","","// Provide the props as per the documentation","// https://github.com/marudhupandiyang/react-csv-to-table","let tableProps = {"," data: pm.response.text(),"," csvDelimiter: ',',"," hasHeader: false","};","","pm.visualizer.set(template, tableProps);"],"type":"text/javascript"}}],"id":"2a809393-df70-4438-afea-f7ac863cfa0f","request":{"method":"GET","header":[],"url":"https://www.sample-videos.com/csv/Sample-Spreadsheet-100-rows.csv","description":"

This request will help you to visualize any CSV.

\n

Change the URL and run the request, then go to the Visualizer tab to see the CSV as a table.

\n

In case your CSV isn't rendering correctly, you might need to tweak the delimters or other properties.

\n","urlObject":{"protocol":"https","path":["csv","Sample-Spreadsheet-100-rows.csv"],"host":["www","sample-videos","com"],"query":[],"variable":[]}},"response":[],"_postman_id":"2a809393-df70-4438-afea-f7ac863cfa0f"},{"name":"Visualize any JSON data","event":[{"listen":"test","script":{"exec":["// GO TO THE END OF THE TEST SCRIPT.","var template = `","","
","","","","`;","","","// In case you only want a specific property, change it here.","//","// Default: You can set the entire JSON response using pm.response.json()","let tableProps = {"," json: pm.response.json()","};","","pm.visualizer.set(template, tableProps);"],"type":"text/javascript","packages":{}}}],"id":"6af78e5c-bf40-45fa-8e4b-3d564214b6c1","request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"{\n \"message\": \"Go to Visualize tab on the right 👉 located alongside the Pretty, Raw, and Preview options. We have added the visualization code to the Scripts tab in the request.\"\n}","options":{"raw":{"language":"json"}}},"url":"https://postman-echo.com/post","description":"

This request will help you to visualize any JSON.

\n

Change the URL and run the request, then go to the Visualizer tab to see the JSON as a table.

\n","urlObject":{"protocol":"https","path":["post"],"host":["postman-echo","com"],"query":[],"variable":[]}},"response":[],"_postman_id":"6af78e5c-bf40-45fa-8e4b-3d564214b6c1"},{"name":"Visualize any XML data","event":[{"listen":"test","script":{"exec":["// GO TO THE END OF THE TEST SCRIPT.","var template = `","","
","","","","`;","","","// In case you only want a specific property, change it here.","//","// For an XML response you can change the following `xmlData` to pm.response.text() instead of pm.response.json().data","let xmlData = pm.response.json().data,"," tableProps = {"," json: xml2Json(xmlData)"," };","","pm.visualizer.set(template, tableProps);"],"type":"text/javascript"}}],"id":"e2b66b67-9214-40a2-8bb2-12d71d3d4adf","request":{"method":"POST","header":[],"body":{"mode":"raw","raw":"\n\n A Song of Ice and Fire\n George R. R. Martin\n English\n Epic fantasy\n","options":{"raw":{"language":"json"}}},"url":"https://postman-echo.com/post","description":"

This request will help you to visualize any XML.

\n

Change the URL and run the request, then go to the Visualizer tab to see the XML as a table.

\n

You can head over to the \"Scripts\" tab, scroll down to the bottom and change the xmlData to pm.response.text() to visualize your entire XML response.

\n","urlObject":{"protocol":"https","path":["post"],"host":["postman-echo","com"],"query":[],"variable":[]}},"response":[],"_postman_id":"e2b66b67-9214-40a2-8bb2-12d71d3d4adf"}],"variable":[{"id":"b763b7b7-89bd-4831-93d8-91e1e6a647a4","key":"eq-starttime","value":""},{"id":"76cf7ebd-c2a6-4c00-be69-55b49b4c891b","key":"eq-endtime","value":""}]}