(ArcGIS API for JavaScript) Sample of using chart.js with the Esri 4.7 API (Typescript version)
<html> | |
<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>ArcGIS JSAPI 4.6 TypeScript Demo</title> | |
<style> | |
html, | |
body, | |
#viewDiv { | |
padding: 0; | |
margin: 0; | |
height: 100%; | |
width: 100%; | |
} | |
</style> | |
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> | |
<script> | |
var locationPath = location.pathname.replace(/\/[^\/]+$/, ""); | |
window.dojoConfig = { | |
packages: [{ | |
name: "app", | |
location: locationPath + "/app" | |
},{ | |
name: "chart.js", | |
location: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js" | |
}] | |
}; | |
</script> | |
<script src="https://js.arcgis.com/4.6"></script> | |
</head> | |
<body> | |
<div id="viewDiv"></div> | |
<script> | |
require(["app/main"]); | |
</script> | |
</body> | |
</html> |
import EsriMap = require("esri/Map"); | |
import MapView = require("esri/views/MapView"); | |
import FeatureLayer = require("esri/layers/FeatureLayer"); | |
import PopupTemplate = require("esri/PopupTemplate"); | |
import Popup = require("esri/widgets/Popup"); | |
import Query = require("esri/tasks/support/Query"); | |
import Chart = require("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"); | |
const featureLayerRenderer: any = { | |
type: "simple", | |
symbol: { | |
type: "simple-fill", | |
style: "solid", | |
color: "white", | |
} | |
}; | |
const featureLayer: FeatureLayer = new FeatureLayer({ | |
url: "https://services.arcgis.com/Wl7Y1m92PbjtJs5n/ArcGIS/rest/services/Californiaaa/FeatureServer/10", | |
definitionExpression: "STATE_NAME = 'California'", | |
renderer: featureLayerRenderer, | |
visible: true | |
}); | |
const map: EsriMap = new EsriMap({ | |
basemap: "dark-gray", | |
layers: [featureLayer] | |
}); | |
const view: MapView = new MapView({ | |
map: map, | |
container: "viewDiv", | |
center: [-118.244, 34.052], | |
zoom: 7, | |
popup: { | |
dockEnabled: true, | |
visible: false, | |
dockOptions: { | |
breakpoint: false, | |
buttonEnabled: false, | |
position: "auto" | |
} | |
} | |
}); | |
// Create a query to get data from the feature layer | |
let query: 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", (e) => { | |
query.geometry = e.mapPoint; | |
featureLayer.queryFeatures(query).then((results) => { | |
if(results.features[0].attributes.STATE_NAME === "California"){ | |
view.popup.visible = true; | |
view.popup.open({ | |
title: "Doughnut Graph Example", | |
content: setContentInfo(results.features[0].attributes) | |
}); | |
} | |
}); | |
}); | |
// Using the data from the feature layer, create a doughnut graph. | |
function setContentInfo(results: any): any { | |
// Create a new canvas element, this is where the graph will be placed. | |
let canvas: any = 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. | |
let data: any = { | |
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. | |
let myPieChart: Chart = new Chart(canvas,{ | |
type: 'doughnut', | |
data: data | |
}); | |
return canvas; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
I have tried this even with @ts-ignore, but still I'm getting [TS2307] Build:Cannot find module 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js'.
Although, id does compile properly:
define(["require", "exports", "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"]