Gallery

Gallery > Accessibility

JS Accessible Map

Demonstrates accessible map chart using series from one map code and different property filters.

Download Show C# Code Show VB Code

<%@ 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 accessible map chart using series from one map code and different property filters.
// Set tabIndex chart control and adding description
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton=true;
Chart.JS.Buttons.EnablePrintButton = true;
Chart.JS.Settings.Add("description", "Two series from one map code and different property filters");
Chart.JS.Settings.Add("title_tabIndex", "auto");
Chart.JS.Settings.Add("defaultSeries_tabIndex", "auto");
Chart.JS.Settings.Add("defaultPoint_tabIndex", "auto");
Chart.JS.Settings.Add("legend_defaultEntry_tabIndex", "auto");
Chart.JS.Settings.Add("toolbar_items_export_description", "export menu");

Chart.Type = ChartType.Map;
Chart.Width = 540;
Chart.Height = 500;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Americas";
Chart.TitleBox.Label.Font = new Font("Tahoma", 12, FontStyle.Regular);
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.BottomLeft;

// *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();
Series north = new Series();
north.Name = "North America";
north.JsMap = "americas.continent:North America";
SC.Add(north);
Series south = new Series();
south.Name = "South America";
south.JsMap = "americas.continent:South America";

SC.Add(south);

return SC;
}

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server"></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 accessible map chart using series from one map code and different property filters.
' Set tabIndex chart control and adding description
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton=True
Chart.JS.Buttons.EnablePrintButton = True
Chart.JS.Settings.Add("description", "Two series from one map code and different property filters")
Chart.JS.Settings.Add("title_tabIndex", "auto")
Chart.JS.Settings.Add("defaultSeries_tabIndex", "auto")
Chart.JS.Settings.Add("defaultPoint_tabIndex", "auto")
Chart.JS.Settings.Add("legend_defaultEntry_tabIndex", "auto")
Chart.JS.Settings.Add("toolbar_items_export_description", "export menu")

Chart.Type = ChartType.Map
Chart.Width = 540
Chart.Height = 500
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Americas"
Chart.TitleBox.Label.Font = New Font("Tahoma", 12, FontStyle.Regular)
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.BottomLeft

' *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()
Dim north As Series = New Series()
north.Name = "North America"
north.JsMap = "americas.continent:North America"
SC.Add(north)
Dim south As Series = New Series()
south.Name = "South America"
south.JsMap = "americas.continent:South America"

SC.Add(south)

Return SC
End Function

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server"></dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsAccessibleMap.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Accessible Map