For my case, I needed to filter the table result, in a similar way to the "Show related records" options.
To do this I manually imported highcharts:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Then used the request "id" param, which would come from my list view/edit link to filter on my portfolio field using liquid and fetchxml:
{% assign portfolioId = request.params['id'] | escape %}
{% fetchxml portfolioData %}
<fetch mapping="logical" distinct="true" aggregate="true">
<entity name="portfoliodata">
<attribute name="assetclass" alias="assetclass" groupby="true"/>
<attribute name="value" alias="weight" aggregate="sum" />
<filter>
<condition attribute="portfolio" operator="eq" value="{{ portfolioId }}" />
</filter>
</entity>
</fetch>
{% endfetchxml %}
With the data in place I could build my dashboard within my power pages page by adding the following to the html/javascript code.
<div data-component-theme="portalThemeColor7" class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
<div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; color:#000000;">
<table id="tblPortfolioData" style="margin-right: 50px">
<tr>
<th max-width="50px">Asset Class</th>
<th style="text-align: right">Weight</th>
</tr>
</table>
</div>
<div class="col-md-6 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px;">
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
var values = [
{% for item in portfolioData.results.entities %}
{
name: '{{ item.assetclass }}',
y: {{ item.weight }}
},
{% endfor %}
]
var table = document.getElementById('tblPortfolioData');
$.each(values, function (key, val) {
var row = table.insertRow();
var cellAssetClass = row.insertCell(0);
cellAssetClass.innerHTML = val.name;
var cellWeight = row.insertCell(1);
cellWeight.innerHTML = (val.y * 100.0).toFixed(2) + '%';
cellWeight.style.textAlign = 'right';
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: null
},
tooltip: {
pointFormat: '{point.percentage:.1f}%'
},
series: [{
name: 'Weight',
colorByPoint: true,
data: values
}]
});
</script>
</div>
</div>
</div>
It not quite as simple as a no-code based solution, but at least now I have good control over chart formatting, etc.
