dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
139 lines (124 loc) • 4.97 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chart: Map&Legend</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "../../../../dijit/themes/tundra/tundra.css";
@import "../resources/Map.css";
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:true,gfxRenderer:'svg,canvas,vml,silverlight'" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var isTouchDevice = dojo.isIos || (navigator.userAgent.toLowerCase().indexOf("android") > -1)
|| (navigator.userAgent.toLowerCase().indexOf("blackberry") > -1);
</script>
<script type="text/javascript">
dojo.require("dojox.geo.charting.Map");
dojo.require("dojox.geo.charting.widget.Legend");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.RadioButton");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.requireIf(isTouchDevice,"dojox.geo.charting.TouchInteractionSupport");
dojo.requireIf(!isTouchDevice,"dojox.geo.charting.MouseInteractionSupport");
dojo.require("dojox.geo.charting.KeyboardInteractionSupport");
dojo.addOnLoad(function(){
//create new map
var map = new dojox.geo.charting.Map("USStates", "../resources/data/USStates.json");
//add outside map marker file
map.setMarkerData("../resources/markers/USStates.json");
// install mouse/touch navigation
if (!isTouchDevice) {
var mouseInteraction = new dojox.geo.charting.MouseInteractionSupport(map,{enablePan:true,enableZoom:true});
mouseInteraction.connect();
} else {
var touchInteraction = new dojox.geo.charting.TouchInteractionSupport(map,{});
touchInteraction.connect();
}
// install keyboard navigation
var keyboardInteraction = new dojox.geo.charting.KeyboardInteractionSupport(map, {enableZoom: true});
keyboardInteraction.connect();
//set data store to map
var dataStore = new dojo.data.ItemFileWriteStore({
url: "datastore/dataStore.json"
});
map.setDataStore(dataStore, "product A");
//add series to map
map.addSeries([{
name: "Low sales state(0~$3.0M)",
min: "0.0",
max: "3.0",
color: "#FFCE52"
}, {
name: "Normal sales state($3.0M~$6.0M)",
min: "3.0",
max: "6.0",
color: "#63A584"
}, {
name: "High sales state($6.0M~$10.0M)",
min: "6.0",
max: "9.0",
color: "#CE6342"
}]);
//declare associated legend
var legend = new dojox.geo.charting.widget.Legend({
map: map
});
//map marker customization
map.onFeatureOver = function(feature){
feature.markerText = map.mapObj.marker.markerData[feature.id] + ": $" + feature.value.toFixed(3) + "M";
};
dojo.connect(window,"onresize",this,function() {map.resize();});
changeProduct = function(radioButton) {
//console.log("change product called " + productName);
if (radioButton.checked) {
map.setDataBindingAttribute(radioButton.value);
}
};
function changeStoreValues() {
for (prop in map.mapObj.features) {
dataStore.fetchItemByIdentity({
identity: prop,
onItem: function(item) {
dataStore.setValue(item,"product A",Math.random() * 10);
//dataStore.setValue(item,"product B",Math.random() * 10);
//dataStore.setValue(item,"product C",Math.random() * 10);
},
onError: function(err) { console.info(err.message);}
});
}
}
// simulate product value changes
//setInterval(changeStoreValues,1000);
});
</script>
</head>
<body class="tundra" >
<h1>Map with series, data, legend</h1>
<p>Keyboard Tips: Use <b>TAB</b> to focus the map, then use <b>up/down/left/right</b> to go around the map, zoom in by <b>SPACE</b> and zoom out by <b>ESC</b>.</p>
<div id="USStates" style="width:900px;height:500px;border:1px solid;">
</div>
<table id="productChoice" cellspacing="10" style="border: 1px">
<tr>
<td><label>Show product :</label></td>
<td><input type="radio" dojoType="dijit.form.RadioButton" name="product" id="radioA" checked
onchange="changeProduct(this)"
value="product A" />
<label for="radioA">A</label>
</td>
<td><input type="radio" dojoType="dijit.form.RadioButton" name="product" id="radioB"
onchange="changeProduct(this)"
value="product B" />
<label for="radioB">B</label>
</td>
<td><input type="radio" dojoType="dijit.form.RadioButton" name="product" id="radioC"
onchange="changeProduct(this)"
value="product C" />
<label for="radioC">C</label>
</td>
</tr>
</table>
</body>
</html>