Add a dynamic chart (Esri Cedar)
Plot feature attributes on a dynamic chart that updates as users pan and zoom. This demo relies on Esri Cedar to render an interactive scatter plot.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
<meta charset="utf-8" />
<title>Add a dynamic chart (Esri Cedar)</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.0.1/dist/esri-leaflet-vector.js" crossorigin=""></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<!-- Load Cedar files from CDN -->
<!-- load the amCharts base library -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<!-- for scatter and bubble charts -->
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<!-- load the arcgis-rest-js scripts -->
<script src="https://unpkg.com/@esri/arcgis-rest-request"></script>
<!-- optionally load an amcharts theme; cedar provides a calcite theme -->
<!-- load cedar -->
<script src="https://unpkg.com/@esri/cedar/dist/bundled/cedar.js"></script>
<style>
.chart-container {
height: 245px;
width: 245px;
}
#info-pane {
position: absolute;
top: 10px;
right: 10px;
z-index: 400;
background: white;
}
.amcharts-chart-div > a {
display: none !important;
}
#chart {
height: 100%;
}
</style>
<div id="map"></div>
<div id="info-pane" class="leaflet-bar chart-container">
<div id="chart"></div>
</div>
<script>
const apiKey = "YOUR_API_KEY";
var map = L.map("map").setView([45.526, -122.667], 13);
L.esri.Vector.vectorBasemapLayer("ArcGIS:Community", {
apikey: apiKey
}).addTo(map);
//Features from this layer will appear in the Cedar scatterplot
const treesFeatureLayer = L.esri.featureLayer({
url: "https://www.portlandmaps.com/arcgis/rest/services/Public/Parks_Misc/MapServer/21/"
});
treesFeatureLayer.addTo(map);
let chart; //Define a chart
treesFeatureLayer.once("load", function () {
const datasets = [getDataset(treesFeatureLayer)];
//Designate a one or more series to show the data on the chart
const series = [
{
value: { field: "HEIGHT", label: "tree height" },
category: { field: "DIAMETER", label: "tree diameter" }
}
];
//Optionally override any of the cart type's default styles
const overrides = {
hideXScrollbar: true,
hideYScrollbar: true
};
//Create a cedar chart using the known 'scatter' type (scatter plot)
const elementId = "chart";
chart = new cedar.Chart(elementId, { type: "scatter" }).datasets(datasets).series(series).overrides(overrides);
// render the chart
chart.show();
});
//Show in the scatter plot only the features in the map's current extent
map.on("zoom move", function () {
var datasets = [getDataset(treesFeatureLayer)];
chart.datasets(datasets);
chart.show();
});
// Helper function, used by both createChart() and updateChart(),
// to get the data from the leaflet map (current extent) and return it
// in the proper format for Cedar to use.
function getDataset(layer) {
const scatterPlotDataArray = [];
layer.eachActiveFeature(function (e) {
scatterPlotDataArray.push({
attributes: {
HEIGHT: e.feature.properties.HEIGHT,
DIAMETER: e.feature.properties.DIAMETER
},
geometry: {
x: e.feature.geometry.coordinates[0],
y: e.feature.geometry.coordinates[1]
}
});
});
return {
data: {
features: scatterPlotDataArray
}
};
}
</script>
</body>
</html>