Gallery
PreviousJS Mapping Data Index
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates all the available maps.
Chart.Type = ChartType.Map;
Chart.Width = 600;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "chart";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
</script>
<select id="Countries" onchange="selectCountry()">
</select>
<select id="Provinces" onchange="selectProvince()">
</select>
<select id="Regions" onchange="selectRegion()">
</select>
<input id="zoomBtn" type="button" value=" 200%" onclick="toggleZoom()" />
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
<script type="text/javascript">
var mapDataIndex;
var $Countries;
var $Provinces;
var $Regions;
var paletteIndex = 0;
var palette = JSC.getPalette(0);
$.getScript('../../images/MapFiles/mapDataIndex.js')
.done(function (script, textStatus) {
var countryOptions = [];
mapDataIndex = JSC.bundle.mapDataIndex;
$Countries = $('#Countries');
$Provinces = $('#Provinces');
$Regions = $('#Regions');
populateCountries();
selectCountry();
function populateCountries() {
for (var cID in mapDataIndex) {
countryOptions.push('<option value="' + cID + '">' + mapDataIndex[cID].name + ' (' + cID + ')</option>');
}
countryOptions.sort();
$Countries.find('option').remove().end().append(countryOptions.join(''));
}
})
.fail(function (jqxhr, settings, exception) {
console.log("Cannot find the images/MapFiles/mapDataIndex.js file. : " + exception);
});
function updateChart(id) {
var ser = {
map: id,
name: mapDataIndex[id].name,
palette: JSC.colorToPalette(palette[paletteIndex++ % palette.length], {
saturation: .3,
hue: .05,
lightness: .5
}, 10, 4)
}
if (chart) { chart.series.splice(0, 1, [ser]); } else {
delete chartConfig.series;
chartConfig.series = [ser];
chart = JSC.chart('chartDiv', chartConfig);
}
}
function selectCountry() {
var countryId = $Countries.val();
updateChart(countryId);
populateProvinces(countryId);
function populateProvinces(id) {
$Provinces.find('option').remove().end().append('<option value="ALL">Select a province</option>');
$Regions.find('option').remove().end().append('<option value="ALL">Select a region</option>');
var data = mapDataIndex[id].provinces;
//Make an array of province options to sort
var tmpProvArr = [];
for (var pID in data) {
tmpProvArr.push('<option value="' + pID + '">' + data[pID].name + '</option>')
}
tmpProvArr.sort();
$Provinces.append(tmpProvArr.join(''));
if (data = mapDataIndex[id].regions) {
data.sort();
for (var i = 0, iLen = data.length; i < iLen; i++) {
var obj = data[i];
$Regions.append('<option value="' + obj + '">' + obj + '</option>');
}
chart.options({ defaultPoint_tooltip: '%mapCode<br/>%name<br/>%region' })
} else {
$Regions.find('option').remove().end().append('<option value="ALL">Regions not available</option>');
chart.options({ defaultPoint_tooltip: '%mapCode<br/>%name' })
}
}
}
function selectProvince() {
//Reset region dropdown
$Regions.val('ALL');
var provPoint, provinceVal = $Provinces.val();
if (provinceVal === "ALL") { chart.zoom(1); updateZoomState(0); }
else if (provPoint = chart.series().points(provinceVal)) { provPoint.zoomTo(); }
}
function selectRegion() {
var regionProvs, regionsVal = $Regions.val();
//Reset province dropdown
$Provinces.val('ALL');
updateZoomState(0);
if (regionsVal === "ALL") { chart.zoom(1); }
else { chart.zoom('region:' + regionsVal) }
}
var zoomState = 0;
function toggleZoom() {
//Reset province dropdown
$Provinces.val('ALL');
if (zoomState === 0) { updateZoomState(1); chart.zoom(2); } else { updateZoomState(0); chart.zoom(1); }
}
function updateZoomState(state) {
if (state === 0) {
$('#zoomBtn').val('200%');
zoomState = 0;
} else if (state === 1) {
$('#zoomBtn').val('100%');
zoomState = 1;
}
}
</script>
</body>
</html>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates all the available maps.
Chart.Type = ChartType.Map
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "chart"
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
</script>
<select id="Countries" onchange="selectCountry()">
</select>
<select id="Provinces" onchange="selectProvince()">
</select>
<select id="Regions" onchange="selectRegion()">
</select>
<input id="zoomBtn" type="button" value=" 200%" onclick="toggleZoom()" />
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
<script type="text/javascript">
var mapDataIndex;
var $Countries;
var $Provinces;
var $Regions;
var paletteIndex = 0;
var palette = JSC.getPalette(0);
$.getScript('../../images/MapFiles/mapDataIndex.js')
.done(function (script, textStatus) {
var countryOptions = [];
mapDataIndex = JSC.bundle.mapDataIndex;
$Countries = $('#Countries');
$Provinces = $('#Provinces');
$Regions = $('#Regions');
populateCountries();
selectCountry();
function populateCountries() {
for (var cID in mapDataIndex) {
countryOptions.push('<option value="' + cID + '">' + mapDataIndex[cID].name + ' (' + cID + ')</option>');
}
countryOptions.sort();
$Countries.find('option').remove().end().append(countryOptions.join(''));
}
})
.fail(function (jqxhr, settings, exception) {
console.log("Cannot find the images/MapFiles/mapDataIndex.js file. : " + exception);
});
function updateChart(id) {
var ser = {
map: id,
name: mapDataIndex[id].name,
palette: JSC.colorToPalette(palette[paletteIndex++ % palette.length], {
saturation: .3,
hue: .05,
lightness: .5
}, 10, 4)
}
if (chart) { chart.series.splice(0, 1, [ser]); } else {
delete chartConfig.series;
chartConfig.series = [ser];
chart = JSC.chart('chartDiv', chartConfig);
}
}
function selectCountry() {
var countryId = $Countries.val();
updateChart(countryId);
populateProvinces(countryId);
function populateProvinces(id) {
$Provinces.find('option').remove().end().append('<option value="ALL">Select a province</option>');
$Regions.find('option').remove().end().append('<option value="ALL">Select a region</option>');
var data = mapDataIndex[id].provinces;
//Make an array of province options to sort
var tmpProvArr = [];
for (var pID in data) {
tmpProvArr.push('<option value="' + pID + '">' + data[pID].name + '</option>')
}
tmpProvArr.sort();
$Provinces.append(tmpProvArr.join(''));
if (data = mapDataIndex[id].regions) {
data.sort();
for (var i = 0, iLen = data.length; i < iLen; i++) {
var obj = data[i];
$Regions.append('<option value="' + obj + '">' + obj + '</option>');
}
chart.options({ defaultPoint_tooltip: '%mapCode<br/>%name<br/>%region' })
} else {
$Regions.find('option').remove().end().append('<option value="ALL">Regions not available</option>');
chart.options({ defaultPoint_tooltip: '%mapCode<br/>%name' })
}
}
}
function selectProvince() {
//Reset region dropdown
$Regions.val('ALL');
var provPoint, provinceVal = $Provinces.val();
if (provinceVal === "ALL") { chart.zoom(1); updateZoomState(0); }
else if (provPoint = chart.series().points(provinceVal)) { provPoint.zoomTo(); }
}
function selectRegion() {
var regionProvs, regionsVal = $Regions.val();
//Reset province dropdown
$Provinces.val('ALL');
updateZoomState(0);
if (regionsVal === "ALL") { chart.zoom(1); }
else { chart.zoom('region:' + regionsVal) }
}
var zoomState = 0;
function toggleZoom() {
//Reset province dropdown
$Provinces.val('ALL');
if (zoomState === 0) { updateZoomState(1); chart.zoom(2); } else { updateZoomState(0); chart.zoom(1); }
}
function updateZoomState(state) {
if (state === 0) {
$('#zoomBtn').val('200%');
zoomState = 0;
} else if (state === 1) {
$('#zoomBtn').val('100%');
zoomState = 1;
}
}
</script>
</body>
</html>
- Sample FilenameJsMappingDataIndex.aspx
- Version8.3
- Uses DatabaseNo