Select to view content in your preferred language

Pie Chart Field Name

390
2
Jump to solution
09-13-2023 08:53 AM
JohnMax
New Contributor III

I created a pie chart in a popup using two field values (Field 18 and Field25).  When I hover on the pie chart it shows those field names which are meaningless.  I want to replace those field names with an alias or description of the field.  How can I do this?  My code is below.  Thanks.

Chart.png

 

 

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Multiple popup elements | Sample | ArcGIS Maps SDK for JavaScript 4.27
</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></script>

<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>

<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (
Map,
MapView,
FeatureLayer
) => {
// setup the map
const map = new Map({
basemap: "hybrid"
});

const view = new MapView({
container: "mapDiv",
map: map,
center: [-113.58332, 37.10819],
zoom: 17,
// Since there are many elements, it is best to dock the popup so
// the elements display better rather than have to scroll through them all.
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false
}
}
});

const featureLayer = new FeatureLayer({
url: "https://agisprodvm.washco.utah.gov/arcgis/rest/services/Assessor/MapServer/14",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "",

// Set content elements in the order to display.
// The first element displayed here is the fieldInfos.
content: [
{
// You can set a media element within the popup as well. This
// can be either an image or a chart. You specify this within
// the mediaInfos. The following creates a pie chart in addition
// to two separate images. The chart is also set up to work with
// related tables. Similar to text elements, media can only be set within the content.
type: "media", // MediaContentElement
mediaInfos: [
{
title: "<b>Count by type</b>",
type: "pie-chart",
caption: "",
value: {
fields: ["Field18", "Field25"],
normalizeField: null,
}
},
]
}
]
},
outFields: ["*"]
});
map.add(featureLayer);

});
</script>
</head>

<body>
<div id="mapDiv"></div>
</body>
</html>

 

 

0 Kudos
1 Solution

Accepted Solutions
LaurenBoyd
Esri Contributor

Hi @JohnMax -

If you'd like to have a different label for the fields in your chart, you'll have to set the FieldInfos with the fields specified from the chart on the popupTemplate level: https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#fieldInfos

I updated your code to add the fieldInfos with labels so that the chart displays something different: https://codepen.io/laurenb14/pen/zYyzRqR?editors=1000 

Hope this helps!

Lauren

View solution in original post

0 Kudos
2 Replies
LaurenBoyd
Esri Contributor

Hi @JohnMax -

If you'd like to have a different label for the fields in your chart, you'll have to set the FieldInfos with the fields specified from the chart on the popupTemplate level: https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#fieldInfos

I updated your code to add the fieldInfos with labels so that the chart displays something different: https://codepen.io/laurenb14/pen/zYyzRqR?editors=1000 

Hope this helps!

Lauren
0 Kudos
JohnMax
New Contributor III

Thank you so much!

0 Kudos