How to plot neighborhood demographics in a pie chart

A pie chart of multiple attributes of a neighborhood.

How to plot neighborhood demographics in a pie chart:

1. Select Current Situation in the ribbon bar.
2. Add a Text Template panel by hovering over panels and selecting Add Text Template.
3. Select the Template tab and verify that the template is applied on Neighborhoods
4. Select the General tab and click on the enlarge button to edit the text content of the panel.
5. Click on the Insert TQL Plotly Graph link
6. In the Overlay Selection Panel, simply click Select without selecting an Overlay.
7. Next, under script, write the following line:

   let trace = {values:[], labels:[], type:'pie', sort:false}

8. Provide label names by adjusting the label array to

   labels: [ '0-15' , '15-25', '25-45', '45-65' , '65+']

9. Finally, place the trace object in the data array:

   var data = [trace];

10. Close the text editor panel
11. Click on the apply template button in the Template Text Detail panel.
12. Click on the Calculation cloud icon in the ribbon bar to calculate the contents.
13. Once calculated, unfold the template panel in the Panel Overview panel and select any of the child panels.
14. In the Panel Detail Panel, click on the open panel to inspect its content.

Template panel content

<div id='myDiv' style='position: absolute; top: 0; bottom: 0; left: 0; right: 0'/>
<script>
let trace = {
    values: [
 $ATTRIBUTE_PERCENTAGE_PERSONEN0_TOT15_JAAR,
 $ATTRIBUTE_PERCENTAGE_PERSONEN15_TOT25_JAAR,
 $ATTRIBUTE_PERCENTAGE_PERSONEN25_TOT45_JAAR,
 $ATTRIBUTE_PERCENTAGE_PERSONEN45_TOT65_JAAR,
 $ATTRIBUTE_PERCENTAGE_PERSONEN65_JAAR_EN_OUDER
],
    labels: [ '0-15' , '15-25', '25-45', '45-65' , '65+'],
    type: 'pie',
    sort: false

};

var data = [trace];
var layout = { title: {text: '$NAME'} };
Plotly.newPlot('myDiv', data, layout);
</script>

Notes

• The panel instances are automatically placed in the 3D Visualization and can be opened by click on their respective pop-ups.

See also

• Template Text Panel