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 2 or more charts on same page? · Issue #496 · chartjs/Chart.js · GitHub 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="upload://bGbv88UsMtznHUgd2WT7PzCvhl.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);
