postman-response-graph-visualization

graph-response-graph-visualization.js

//========For this response:
/*
{
    "trackingId": "11111111-22222222-3333-4444-555555555555",
    "status": "Ok",
    "payload": {
        "percentile": 6666666.77777777,
        "history": [
            {
                "ts": "2021-10-08 00:00:00",
                "avg": 15304877.243670886
            },
            {
                "ts": "2021-10-08 00:05:00",
                "avg": 15839814.35745614
            },
            {
                "ts": "2021-10-08 00:10:00",
                "avg": 14950817.630872482
            },
            {
                "ts": "2021-10-08 00:15:00",
                "avg": 14058462.18763797
            }
        ]
    }
}
*/

//========Create graph in postman test script:
// add a template string of the front-end view we want to render
let template = `
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <canvas id="myChart"></canvas>
    <script>
        pm.getData( function (error, data) {
            var ctx = document.getElementById('myChart').getContext('2d');
            const percentile = data.response.payload.percentile;
            const len = data.response.payload.history.length;
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',
                // The data for our dataset
                data: {
                    labels: data.response.payload.history.map((item) => item.ts),
                    datasets: [{
                        label: 'Traffic',
                        backgroundColor: 'rgb(255, 99, 132)',
                        borderColor: 'rgb(255, 99, 132)',
                        data: data.response.payload.history.map((item) => item.avg)
                    },
                    {
                        label: 'Percentile: ' + percentile,
                        backgroundColor: 'rgb(255, 255, 132)',
                        borderColor: 'rgb(255, 255, 132)',
                        data: new Int32Array(len).map(item => percentile),
                    }]
                },
            
                // Configuration options go here
                options: {
                    scales: {
                        x: {
                          type: 'time',
                          ticks: {
                            source: 'auto',
                            autoSkip: true,
                          }
                        }
                    }
                }
            });
        });
    </script>
`;

// Set visualizer
pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()
});