Skip to content

Instantly share code, notes, and snippets.

@nommuna2

nommuna2/Sample.js

Last active April 26, 2019 21:09
Show Gist options
  • Save nommuna2/105ac6b989fb6ea306ce206f1a4d8d5f to your computer and use it in GitHub Desktop.
Save nommuna2/105ac6b989fb6ea306ce206f1a4d8d5f to your computer and use it in GitHub Desktop.
Download ZIP
(ArcGIS API for JavaScript) Sample of putting a third party chart API in a popup
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Feature Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<link rel="stylesheet" href="indexstylesheet.css">
<script>
const options = {
// tell Dojo where to load other packages
dojoConfig: {
async: true,
packages: [
{
location: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js',
name: 'Chart'
}
]
}
};
</script>
<script src="https://js.arcgis.com/4.7/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script src="index.js"></script>
</html>
Raw
Sample.js
require([
"esri/Map",
"esri/views/MapView",
"esri/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/widgets/Popup",
"esri/tasks/support/Query",
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js",
"dojo/domReady!"
],
function (Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart) {
var featureLayerRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
style: "solid",
color: "white",
}
};
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
definitionExpression: "STATE_NAME = 'California'",
renderer: featureLayerRenderer,
visible: true
});
var map = new Map({
basemap: "dark-gray",
layers: [featureLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117.1825, 34.0556],
zoom: 5
});
// Create a query to get data from the feature layer
var query = new Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
query.where = "1=1";
query.num = 50;
// On view click, query the feature layer and pass the results to setContentInfo function.
view.on("click", function(e){
query.geometry = e.mapPoint;
featureLayer.queryFeatures(query).then(function(results){
if(results.features[0].attributes.STATE_NAME === "California"){
featureLayer.popupTemplate = {
title: "Doughnut Graph Example",
content: setContentInfo(results.features[0].attributes)
});
}
});
});
// Using the data from the feature layer, create a doughnut graph.
function setContentInfo(results){
// Create a new canvas element, this is where the graph will be placed.
var canvas = document.createElement('canvas');
canvas.id = "myChart";
// Create a data object, this will include the data from the feature layer and other information like color or labels.
var data = {
datasets:[{
data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC, results.OTHER, results.WHITE],
backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
}],
labels: [
'Asian',
'Black',
'Hawaiian',
'Hispanic',
'Other',
'White'
]
};
// Create a new Chart and hook it to the canvas and then return the canvas.
var myPieChart = new Chart(canvas,{
type: 'doughnut',
data: data
});
return canvas;
}
});
@nommuna2
Copy link
Author

nommuna2 commented Jul 2, 2018

Sample of using third part chart in JS API

Main points to take away

  • Grab data from query
  • Pass data to popupTemplate through content which calls a custom function
  • Your custom function should return an HTML element. In this example I pass back a canvas element
 function setContentInfo(results){
    // Create a new canvas element, this is where the graph will be placed.
    var canvas = document.createElement('canvas');
    canvas.id = "myChart";
    
    // Create a data object, this will include the data from the feature layer and other information like color or labels.
    var data = {
      datasets:[{
        data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC, results.OTHER, results.WHITE],
        backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
      }],
      labels: [
        'Asian',
        'Black',
        'Hawaiian',
        'Hispanic',
        'Other',
        'White'
      ]
    };

    // Create a new Chart and hook it to the canvas and then return the canvas.
    var myPieChart = new Chart(canvas,{
      type: 'doughnut',
      data: data
  });

// return the HTML element so that that the popup can display it. 
  return canvas;
  }

Documentation of Content from JS API

function - Content may be defined with a JavaScript function that returns any of the above-mentioned elements. This is handy when your popup requires additional processing or functionality than what is provided with the four content types listed above. For example, let’s assume that you would like to display charts using third-party JavaScript libraries or categorize information into separate tabs. In these cases, you can use a function that returns either a string, a reference to an HTML element, a popup element, or a promise. When the feature is clicked, the feature is passed as an argument to the function and provides access to the feature’s graphic and attributes. The function then executes and returns a value to display in the popup template. It is also possible to check a specific feature attribute and determine whether to apply a function based on its value. Out-of-the-box formatting functions can be used to format date, time, and number values. The syntax for using an out-of-the-box formatting function is: {field-name:format-function-name(option-a: value, option-b: value)}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment