Gallery
JS Mapping Zoom To
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates zooming the chart using map codes.
Chart.Type = ChartType.Map;
Chart.Width = 600;
Chart.Height = 450;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
//Necessary to refer to this chart in JS.
Chart.JS.ControlID = "chart";
Chart.JS.Mapping.BaseLayers = "Americas,US,CA,MX";
Chart.JS.Mapping.BaseLayersSeries.DefaultElement.Color = Color.FromArgb(152, 217, 139);
}
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<input type="text" id="tb" value="US.region:Midwest"> <input type="button" id="zoomToBtn" value="Zoom" onclick="doZoom()">
<input type="button" value="Zoom Out" onclick="chart.zoom(1)">
<div style="width: 640px">Examples: 'US', 'MX', 'US.IL', 'CA.BC', 'US.region:Midwest',</div>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"></dotnet:Chart></div>
<script type="text/javascript">
var $tb = $("#tb");
function doZoom() {
var val = $tb.val();
var obj;
chart.zoom(val)
}
$tb.keyup(function (event) {
(event.keyCode == 13) && $("#zoomToBtn").click();
});
function tbWarning() {
clearTimeout(tbwId);
$tb.addClass('warned');
tbwId = setTimeout(function () { $tb.removeClass('warned'); }, 2500);
}
</script>
</body>
</html>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates zooming the chart using map codes.
Chart.Type = ChartType.Map
Chart.Width = 600
Chart.Height = 450
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
'Necessary to refer to this chart in JS.
Chart.JS.ControlID = "chart"
Chart.JS.Mapping.BaseLayers = "Americas,US,CA,MX"
Chart.JS.Mapping.BaseLayersSeries.DefaultElement.Color = Color.FromArgb(152, 217, 139)
End Sub
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<input type="text" id="tb" value="US.region:Midwest"> <input type="button" id="zoomToBtn" value="Zoom" onclick="doZoom()">
<input type="button" value="Zoom Out" onclick="chart.zoom(1)">
<div style="width: 640px">Examples: 'US', 'MX', 'US.IL', 'CA.BC', 'US.region:Midwest',</div>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"></dotnet:Chart></div>
<script type="text/javascript">
var $tb = $("#tb");
function doZoom() {
var val = $tb.val();
var obj;
chart.zoom(val)
}
$tb.keyup(function (event) {
(event.keyCode == 13) && $("#zoomToBtn").click();
});
function tbWarning() {
clearTimeout(tbwId);
$tb.addClass('warned');
tbwId = setTimeout(function () { $tb.removeClass('warned'); }, 2500);
}
</script>
</body>
</html>
- Sample FilenameJsMappingZoomTo.aspx
- Version8.3
- Uses DatabaseNo