Gallery
JS Mapping Momentary Zoom
<%@ 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 momentary zoom functionality with JS.
Chart.Type = ChartType.Map;//Horizontal;
Chart.Width = 500;
Chart.Height = 550;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.ControlID = "chart";
Chart.TitleBox.Label.Text = "Click legend entries to zoom momentarily";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.JS.Enabled = true;
Chart.JS.Settings.Add("defaultSeries.events.legendEntryClick", "js:leClick");
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
Chart.SeriesCollection.Add(getMapData());
}
SeriesCollection getMapData()
{
SeriesCollection SC = new SeriesCollection();
SC.Add(getSeries("CA"));
SC.Add(getSeries("US"));
SC.Add(getSeries("MX"));
SC.Add(getSeries("GT"));
SC.Add(getSeries("HN"));
return SC;
}
Series getSeries(string code)
{
Series s = new Series();
s.JsMap = code;
return s;
}
</script>
</head>
<body>
<div align="center">
<script type="text/javascript">
var zotId, zoomOutDelay = 2000;
function leClick(e) {
this.zoomTo();
startZoomOut();
return false;
}
function startZoomOut() {
clearTimeout(zotId)
zotId = setTimeout(function () { chart.zoom(1); }, zoomOutDelay);
}
</script>
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</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 momentary zoom functionality with JS.
Chart.Type = ChartType.Map 'Horizontal;
Chart.Width = 500
Chart.Height = 550
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.ControlID = "chart"
Chart.TitleBox.Label.Text = "Click legend entries to zoom momentarily"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.JS.Enabled = True
Chart.JS.Settings.Add("defaultSeries.events.legendEntryClick", "js:leClick")
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Chart.SeriesCollection.Add(getMapData())
End Sub
Function getMapData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
SC.Add(getSeries("CA"))
SC.Add(getSeries("US"))
SC.Add(getSeries("MX"))
SC.Add(getSeries("GT"))
SC.Add(getSeries("HN"))
Return SC
End Function
Function getSeries(ByVal code As String) As Series
Dim s As Series = New Series()
s.JsMap = code
Return s
End Function
</script>
</head>
<body>
<div align="center">
<script type="text/javascript">
var zotId, zoomOutDelay = 2000;
function leClick(e) {
this.zoomTo();
startZoomOut();
return false;
}
function startZoomOut() {
clearTimeout(zotId)
zotId = setTimeout(function () { chart.zoom(1); }, zoomOutDelay);
}
</script>
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
- Sample FilenameJsMappingMomentaryZoom.aspx
- Version8.3
- Uses DatabaseNo