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