Two charts in one visualization?

I have managed to do multiple tables in one visualization. But I cannot figure out how to do two pie charts. I followed instructions on https://github.com/chartjs/Chart.js/issues/496 but am not successful. Anyone succeeded?

Here is my code:


_ = require('lodash');
const res = pm.response.json();
// Access the response data JSON as a JavaScript object
// const res = pm.response.json();
var obj = JSON.parse(responseBody)
var portfolios = obj.report.portfolios


console.log(_.flatMap(portfolios, ({ groups })  =>  _.map(Object.values( groups ), 'groupName'))),

console.log(_.flatMap(portfolios, ({ groups }) => _.map(Object.values(groups), 'total.bookMarketValue' )))

console.log(_.flatMap(portfolios, ({ groups })  =>  _.flatMap(groups, ({ data }) => _.map(Object.values(data), 'symbol'))))

console.log(_.flatMap(portfolios, ({ groups })  =>  _.flatMap(groups, ({ data }) => _.map(Object.values(data), 'bookMarketValue'))))


// -----------------------------
// - Structure data for charts -
// -----------------------------



/// EDIT THIS OBJECT TO BIND YOUR DATA
var vizData = {
    
    // Labels take an array of strings
    labels:  _.flatMap(portfolios, ({ groups })  =>  _.map(Object.values( groups ), 'groupName')),
    
    // Data takes an array of numbers
    data: _.flatMap(portfolios, ({ groups }) => _.map(Object.values(groups), 'total.bookMarketValue' )),
    
    // Labels take an array of strings
    labels1:  _.flatMap(portfolios, ({ groups })  =>  _.flatMap(groups, ({ data }) => _.map(Object.values(data), 'symbol'))),
    

    data1: _.flatMap(portfolios, ({ groups })  =>  _.flatMap(groups, ({ data }) => _.map(Object.values(data), 'bookMarketValue')))
   
};


// ------------
// - Template -
// ------------

// Configure the template
var template = `
<style>
.image {
width: 170px;
margin: auto;
padding: 15px 25px;
}

</style>
<div class="image">
  <img src="https://summaft.com/wp-content/uploads/2019/05/Primary-Logo-Full-Color-White-Text.png" alt="SummaFT" width="170px" >
</div>

<canvas id="pieChart" height="125"</canvas>
<canvas id="barChart" height="125"</canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 

<script>
    // Get DOM element to render the chart in

var ctx = document.getElementById("pieChart").getContext("2d");
var ctx1 = document.getElementById("barChart").getContext("2d");

    // Configure Chart JS here.
    // You can customize the options passed to this constructor to
    // make the chart look and behave the way you want
    var pieChart = new Chart(ctx, {
        type: "pie",
        data: {
            labels: [], // We will update this later in pm.getData()
            datasets: [{
                data: [], // We will update this later in pm.getData()
                
                // Change these colours to customize the chart
                backgroundColor: ["#4562AD", "#4EBB85", "#458FCC", "#D8263D", "#ffa600"],
            }]
        },

        options: {
           
            legend: { display: true },
            title: {
                display: true,
                text: 'By Region',
                fontColor: 'white'
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Items'
                    }
                }],
                yAxes: [{
                    display: false,
                    scaleLabel: {
                        display: true,
                        labelString: 'Market Value',
                    }
                }]
            }
        }

    });


    // Access the data passed to pm.visualizer.set() from the JavaScript
    // code of the Visualizer template
    pm.getData(function (err, value) {
        pieChart.data.datasets[0].data = value.data;
        pieChart.data.labels = value.labels;
        pieChart.update();
    });

// Get DOM element to render the chart in

    // Configure Chart JS here.
    // You can customize the options passed to this constructor to
    // make the chart look and behave the way you want
    var barChart = new Chart(ctx1, {
        type: "bar",
        data: {
            labels: [], // We will update this later in pm.getData()
            datasets: [{
                data: [], // We will update this later in pm.getData()
                
                // Change these colours to customize the chart
                backgroundColor: ["#4562AD", "#4EBB85", "#458FCC", "#D8263D", "#ffa600"],
            }]
        },

        options: {
           
            legend: { display: true },
            title: {
                display: true,
                text: 'Market Value',
                fontColor: 'white'
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Items'
                    }
                }],
                yAxes: [{
                    display: false,
                    scaleLabel: {
                        display: true,
                        labelString: 'Market Value',
                    }
                }]
            }
        }

    });


    // Access the data passed to pm.visualizer.set() from the JavaScript
    // code of the Visualizer template
    pm.getData(function (err, value) {
        barChart.data.datasets[0].data = value.data1;
        barChart.data.labels = value.labels1;
        barChart.update();
    });
  </script>`;


pm.visualizer.set(template, vizData);






Never mind - solved.

2 Likes