Click the map to view data for that location.
Location:
<div style="position: relative" data-bind="let: {widget: chartMonthly}"> <!-- ko if: widget.isReady --> <div class="body chart" id="monthlychart"> <div data-bind="chart: widget.updateChart.bind(widget), chartOptions: widget.chartOptions()"></div> </div> <div class="chartloading" data-bind="visible: widget.isProcessing"><img class="loading" src="image/loading_horiz.gif" /></div> <!-- /ko --> </div> <div style="position: relative" data-bind="let: {widget: chartHourly}"> <!-- ko if: widget.isReady --> <div class="body chart" id="hourlychart" style="padding-right: 5px;"> <div data-bind="chart: widget.updateChart.bind(widget), chartOptions: widget.chartOptions()"></div> </div> <div class="chartloading" data-bind="visible: widget.isProcessing"><img class="loading" src="image/loading_horiz.gif" /></div> <!-- /ko --> </div>
<!-- ko template: { name: 'datatable', data: tableDataMonthly } --><!-- /ko --> <!-- ko template: { name: 'datatable', data: tableDataHourly } --><!-- /ko -->
<!-- ko if: isReady --> <div class="body tableDiv" style="position: relative"> <button class="contextmenubutton" type="button" data-bind="contextMenu: [{ text: 'View expanded table', onclick: function() { $root.mapapp.expandTable($data) } }]" title="Table context menu"></button> <h1 data-bind="text: tableTitle"></h1> <h3 data-bind="text: tableSubtitle"></h3> <table class="datatable" data-bind="table: tableOptions"></table> <div class="chartloading" data-bind="visible: isProcessing"><img class="loading" src="image/loading_horiz.gif" /></div> </div> <!-- /ko -->
<div data-bind="stealElement: 'legendDiv'"></div>
<div> <label for="variableSelect" style="font-weight: bold;">Variable:</label> <select id="variableSelect" data-bind="options: data.variables, optionsText: 'name', optionsCaption: '- None -', value: data.selectedVariable"></select> </div> <div> <label style="font-weight: bold;">Month:</label> <span class="optiongroup" style="display: inline-block;"> <button type="button" data-bind="repeat: data.availableMonths" data-repeat-bind=" text: code, attr.title: name, css.selected: data.selectedMonth() === $data, click: data.selectedMonth"></button> </span> </div> <div> <label style="font-weight: bold;">Hour:</label> <span class="optiongroup" style="display: inline-block;"> <button type="button" title="Average for all hours" data-bind=" css.selected: data.selectedHour() === undefined, click: function() { data.selectedHour(undefined) }">All</button><!-- --><button type="button" data-bind="repeat: data.availableHours" data-repeat-bind=" text: code, attr.title: name, css.selected: data.selectedHour() === $data, click: data.selectedHour"></button> </span> </div> <div> <label style="font-weight: bold;">Units:</label> <span class="optiongroup" style="display: inline-block;"> <button type="button" title="Base units (metric)" data-bind=" css.selected: data.whichUnits() == 'base', click: function() { data.whichUnits('base') }">metric</button><!-- --><button type="button" title="Alternate (expanded or US)" data-bind=" css.selected: data.whichUnits() == 'alt', click: function() { data.whichUnits('alt') }">other</button> </span> </div>
<div id="basemapGallery"></div>
