(ArcGIS API for JavaScript) Sample of using chart.js with the Esri 4.7 API (Typescript version)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
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"]