-
Notifications
You must be signed in to change notification settings - Fork 0
/
400scitymeasures.html
192 lines (159 loc) · 6.24 KB
/
400scitymeasures.html
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="The Ontario Ministry of Transportation iCorridor service provides better understanding of historical, real-time, and forecast information in transportation and land use planning.As the public accessible website, iCorridor supports Ontario's Open Government initiative which makes government information more transparent to the general public. It includes project based land use planning boundaries and detailed demographic data, travel behaviour information (mode shares, highway traffic, and commercial vehicle characteristics), information on road and highway (travel speed and performance indices).">
<meta name="author" content="Systems Analysis and Forecasting Office, Ontario Ministry of Transportation">
<meta name="keywords" content="Congestion, Transportation, GPS, land use, Truck, Car, Survey, Commercial, Passenger, Forecast, Planning, Highway, Provincial, iCorridor, Corridor,GGH, Greater Golden Horseshoe, GO, Transit, AADT, AADTT, Traffic Volume, Delay, Travel Time, Collision, LHRS, Milepost, Greenbelt, GTHA, Transportation Planning, Transportation Forecasting">
<title>MTO iCorridor | Ontario.ca</title>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/kelly.js"></script>
<script src="https://js.arcgis.com/4.17/"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 10pt;
}
#chartdiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body id="page-top">
<div id="chartdiv"></div>
</body>
<script>
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
require(["esri/layers/FeatureLayer"],function(FeatureLayer){
var dataLayer = new FeatureLayer({
url: "https://services.arcgis.com/6iGx1Dq91oKtcE7x/arcgis/rest/services/Matrix_Performance_of_Highways_by_Years2021/FeatureServer",
outFields: ["*"],
visible: false
});
var query = dataLayer.createQuery();
query.where = "1=1";
<!-- query.orderByFields = ["Row_Labels ASC"]; -->
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Apply chart themes
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.maskBullets = false;
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "year";
yAxis.dataFields.category = "hwy-city";
xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40;
xAxis.renderer.opposite = true;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "year";
series.dataFields.categoryY = "hwy-city";
series.dataFields.value = "value";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 3000;
series.columns.template.width = am4core.percent(100);
series.columns.template.height = am4core.percent(100);
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
columnTemplate.stroke = am4core.color("#ffffff");
columnTemplate.tooltipText = "{year}, {hwy-city}: {value.workingValue.formatNumber('#.')}";
columnTemplate.column.adapter.add("fill", function(fill, target) {
if (target.dataItem) {
if (target.dataItem.value >= 90) {
return am4core.color("#0f0")
}
else if (target.dataItem.value >= 75 && target.dataItem.value<90) {
return am4core.color("#ff0")
}
else {
return am4core.color("#f00");
}
}
return fill;
});
var legend = new am4charts.Legend();
legend.parent = chart.chartContainer;
legend.data = [{
"name": ">= 90km/hr",
"fill": am4core.color("#0f0")
}, {
"name": ">=75km/hr",
"fill": am4core.color("#ff0")
}, {
"name": "<75km/hr",
"fill": am4core.color("#f00")
}];
//var timeseries_set=[];
dataLayer.queryFeatures(query).then(function(results){
var returnsets=results.features;
let timeseries_set=[];
<!-- console.log(returnsets) -->
for (i=0; i<returnsets.length; i++){
a=returnsets[i];
//console.log(Object.keys(a.attributes));
keys=Object.keys(a.attributes)
for (j=0;j<keys.length; j++){
if (keys[j].slice(0,1)=='F'){
keyfield=keys[j];
key_year=keyfield.slice(1, 5);
timeseries_set.push({
"hwy-city":a.attributes.HWY_CDNAME,
"year":key_year,
"value":a.attributes[keyfield]
});
}
}
//timeseries_set.push({
//"hwy-city":a.attributes.HWY_CDNAME,
//"year":a.attributes.Congestion_Score,
//"value":a.attributes
//});
}
chart.data=timeseries_set;
//addresults(returnsets);
});
// Set cell size in pixels
var cellSize = 3;
chart.events.on("datavalidated", function(ev) {
// Get objects of interest
var chart = ev.target;
var categoryAxis = chart.yAxes.getIndex(0);
// Calculate how we need to adjust chart height
var adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;
// get current chart height
var targetHeight = chart.pixelHeight + adjustHeight;
// Set it on chart's container
chart.svgContainer.htmlElement.style.height = targetHeight + "px";
});
});
</script>
</html>