Skip to content

Instantly share code, notes, and snippets.

@nommuna2

nommuna2/index.html

Last active Jan 8, 2020
Embed
What would you like to do?
(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;
}
@rhodul

This comment has been minimized.

Copy link

@rhodul rhodul commented Jan 8, 2020

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"]

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