source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/demo-apps/geodashboard/default.html @ 605

Last change on this file since 605 was 605, checked in by vmipsl, 12 years ago

images
File size: 11.9 KB
Line 
1<!DOCTYPE html>
2<html>
3    <head>
4    <title>GeoDashboard</title>
5        <!-- jQuery -->
6        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
7        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
8   
9        <!-- Wijmo CSS and script -->
10        <link type="text/css" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui">
11        <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.5.min.css" rel="stylesheet">
12        <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.5.min.js"></script>
13        <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.5.min.js"></script>
14   
15        <!-- KnockoutJS for MVVM-->
16        <script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
17        <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
18   
19        <!-- Esri Map API-->
20        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
21        <!-- geoDashboard CSS and script -->
22        <link type="text/css" href="styles/style.css" rel="stylesheet">
23        <script type="text/javascript" src="scripts/esri-map.js"></script>
24        <script type="text/javascript" src="scripts/view-model.js"></script>
25   
26        <!-- Override Wijmo defaults script -->
27        <script type="text/javascript" src="scripts/wijmo-defaults.js"></script>
28        <script type="text/javascript">
29   
30            // when document loads, create map, ViewModel, and apply bindings
31            dojo.addOnLoad(function () {
32                createMap();
33                vm = new ViewModel();
34                ko.applyBindings(vm);
35
36                $(window).resize(function () {
37                    $(":wijmo-wijbarchart").wijbarchart("redraw");
38                });
39
40            });
41        </script>
42    </head>
43<body>
44
45        <!-- title -->
46        <header class="title-bar ui-helper-clearfix">
47
48        <div class="padder">
49        <h1 class="app-title">
50    <img src="styles/img/wijmo_16.png" />ComponentOne GeoDashboard</h1>
51       
52       
53        <h2 class="app-subtitle float-right teal bold" data-bind="text: selectedLocation">
54                Selected Location
55        </h2>
56        <a class="app-link float-right" onclick="gotoCurrentLocation()"> Go to current location</a>
57        </div>
58       
59    </header>
60       
61    <!-- map -->
62        <div id="map" class="map"> 
63   
64        <!-- crosshairs -->
65        <div class="abs-center" style="width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; border-radius: 50px; border: solid 2px #d015b3;"> </div>
66        <div class="abs-center" style="width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; border-radius: 100px; border: solid 2px #d015b3;"> </div>
67        <div class="abs-center" style="width: 2px; height: 100%; background: #d015b3; top: 0px;"> </div>
68        <div class="abs-center" style="width: 100%; height: 2px; background: #d015b3; left: 0px;"> </div>
69    </div>
70   
71    <!-- info tiles -->
72    <section class="tile-background ui-helper-clearfix"> 
73       
74        <div class="tile-container ui-helper-clearfix">
75       
76            <!-- tapestry tile -->
77            <div class="tile clickable tile-tapestry" onclick="showTiles('tapestry')">
78                <h3 class="tile-caption" data-bind="text: selectedLocation"></h3>
79                <div class="padder">
80                <h4>
81                    The dominant tapestry is <span class="teal bold" data-bind="text: sources.tapestry.values.TAPSEGNAM.value"></span>
82                </h4>
83                </div> 
84            </div>
85           
86            <!-- sex tile -->
87            <div class="tile clickable" data-bind="with: sources.populationBySex" onclick="showTiles('populationBySex')">
88                <h3 class="tile-caption">Population by Sex</h3>
89                <div class="padder">
90                    <h4 class="tile-value">
91                        <span class="bold teal" data-bind="text: Globalize.format(values.TOTPOP_CY.value(), 'n0')"></span> people
92                    </h4>   
93                    <div class="symbol blue float-left"> &#9794;
94                    <h5 data-bind="text: Globalize.format(values.PMALE_CY.value() / 100, 'p1')"> Male</h5>
95                    </div>
96                    <div class="symbol pink float-right"> &#9792;
97                    <h5 data-bind="text: Globalize.format(values.PFEMALE_CY.value() / 100, 'p1')"> Female</h5>
98                    </div>
99                </div>
100            </div>
101           
102            <!-- age tile -->
103            <div class="tile clickable" data-bind="with: sources.age" onclick="showTiles('age')">
104                <h3 class="tile-caption">Median Age</h3>
105                <div class="padder">
106                    <h4 class="tile-value bold teal" data-bind="text: values.MEDAGE_CY.value"></h4>
107                    <table class="data-table">
108                      <tbody data-bind="foreach: shortList">
109                        <tr>
110                            <td class="align-right"><span data-bind="text: name"></span></td>
111                            <td><span class="histogram-bar" data-bind="style: { width: percentMax() * 100 + '%' }">&nbsp;</span></td>
112                        </tr>
113                      </tbody>
114                    </table>
115                </div>
116            </div>
117           
118            <!-- household income tile -->
119            <div class="tile clickable" data-bind="with: sources.householdIncome" onclick="showTiles('householdIncome')">
120                <h3 class="tile-caption">Median Household Income</h3>
121                <div class="padder">
122                    <h4 class="tile-value teal bold" data-bind="text: Globalize.format(values.MEDHINC_CY.value(), 'c0')"> </h4>
123                    <table class="data-table">
124                        <tbody data-bind="foreach: shortList">
125                            <tr>
126                                <td class="align-right"><span data-bind="text: name"></span></td>
127                                <td><span class="histogram-bar" data-bind="style: { width: percentMax() * 100 + '%' }"></span></td>
128                            </tr>
129                        </tbody>
130                    </table>
131                </div>
132            </div>
133         
134            <!-- net worth tile -->
135            <div class="tile clickable" data-bind="with: sources.netWorth" onclick="showTiles('netWorth')">
136                <h3 class="tile-caption">Median Net Worth</h3>
137                <div class="padder">
138                    <h4 class="tile-value bold teal" data-bind="text: Globalize.format(values.MEDNW_CY.value(), 'c0')"> </h4>
139                    <div class="radial-gauge" data-bind="wijradialgauge: { value: values.MEDNW_CY.value, ranges: [{ startWidth: 24, endWidth: 24, startValue: 0, endValue: 300000, startDistance: 0.5, endDistance: 0.5, style: { fill: '#ccc', stroke: 'none', opacity: 0.4}},{ startWidth: 24, endWidth: 24, startValue: 0, endValue: values.MEDNW_CY.value, startDistance: 0.5, endDistance: 0.5, style: { fill: '#15ced0', stroke: 'none'}}] }"> </div>
140                </div>
141            </div>
142           
143            <!-- app info tile -->
144            <div class="tile">
145                <h3 class="tile-caption">About this App</h3>
146                                <div class="padder">
147                <h4><span class="teal bold">HTML5</span> Version</h4>
148                <p> This app uses ComponentOne, <a href="http://wijmo.com">Wijmo</a>, and KnockoutJS. See also the <a href="http://demo.componentone.com/Silverlight/GeoDashboard/">Silverlight version</a>. <a href="http://our.componentone.com/2012/04/30/mvvm-everywhere/">Learn how</a> we built both versions. </p>
149                </div>
150            </div>
151           
152            <!-- home values -->
153            <div class="tile clickable tile-big" data-bind="with: sources.homeValue" onclick="showTiles('homeValue')">
154                <h3 class="tile-caption">Median Home Value</h3>
155                <div class="padder">
156                <h4 class="tile-value">
157                    <span class="teal bold" data-bind="text: values.NAME.value"></span>'s median home value is <span class="teal bold" data-bind="text: Globalize.format(values.MEDVAL_CY.value(), 'c0')"></span> <span data-bind="text: getIndexDescription(values.MEDVAL_I.value())"></span>
158                </h4>
159                <table>
160                    <tr>
161                        <td>Median Home Value Index</td>
162                        <td>
163                        <div class="gauge-frame">
164                            <div class="gauge-track">
165                                <div class="gauge-center"></div>
166                                <div class="float-left" data-bind="style: { width: (getSliderPosition(values.MEDVAL_I.value()) * 230 - 25) + 'px' }">&nbsp;</div>
167                                <div class="float-left gauge-marker" data-bind="text: values.MEDVAL_I.value"></div>
168                            </div>
169                        </div>
170                    </td>
171                    </tr>
172                    <tr>
173                        <td>Median Household Income Index</td>
174                        <td>
175                        <div class="gauge-frame">
176                            <div class="gauge-track">
177                                <div class="gauge-center"></div>
178                                <div class="float-left" data-bind="style: { width: (getSliderPosition(values.MEDHINC_I.value()) * 230 - 25) + 'px' }">&nbsp;</div>
179                                <div class="float-left gauge-marker" data-bind="text: values.MEDHINC_I.value"></div>
180                            </div>
181                        </div>
182                    </td>
183                    </tr>
184                    <tr>
185                        <td>Median Net Worth Index</td>
186                        <td>
187                        <div class="gauge-frame">
188                            <div class="gauge-track">
189                                <div class="gauge-center"></div>
190                                <div class="float-left" data-bind="style: { width: (getSliderPosition(values.MEDNW_I.value()) * 230 - 25) + 'px' }">&nbsp;</div>
191                                <div class="float-left gauge-marker" data-bind="text: values.MEDNW_I.value"></div>
192                            </div>
193                        </div>
194                        </td>
195                    </tr>
196                </table>
197                <table class="data-table">
198                    <tbody data-bind="foreach: shortList">
199                        <tr>
200                            <td class="align-right" data-bind="text: name"></td>
201                            <td class="align-right" data-bind="text: Globalize.format(value(), 'n0') + ' homes'"></td>
202                            <td class="align-right" data-bind="text: Globalize.format(percent(), 'p0') + ' homes'"></td>
203                            <td><span class="histogram-bar" data-bind="style: { width: percentMax() * 100 + '%' }"></span></td>
204                        </tr>
205                    </tbody>
206                </table>
207                </div>
208            </div>
209           
210            <!-- home value histogram -->
211            <div class="tile clickable tile-big" data-bind="with: sources.homeValue" onclick="showTiles('homeValue')">
212                <h3 class="tile-caption"> Home Value Distribution</h3>
213                <div class="padder">
214                <h4 class="tile-value teal bold" data-bind="text: values.NAME.value"></h4>
215                <div class="bar-chart" data-bind="wijbarchart: { seriesList: formatChartSeriesList(list) }" style="width:100%"></div>   
216                </div>
217            </div>
218       
219        </div>
220       
221    </section>
222
223</body>
224</html>
Note: See TracBrowser for help on using the repository browser.