JS Mapping Lines
Demonstrates adding line series to maps.Chart.
<%@ 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 adding line series to maps.
Chart.Type = ChartType.Map;//Horizontal;
Chart.Width = 600;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.ChartArea.Padding = 30;
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.Mapping.BaseLayers = "US";
Chart.Title = "Flights From Chicago";
// *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 mSer = new Series();
mSer.DefaultElement.ShowValue = true;
mSer.DefaultElement.SmartLabel.Text = "%dest";
mSer.Name = "Destinations";
mSer.Type = SeriesType.Marker;
mSer.DefaultElement.SmartLabel.Color = Color.FromArgb(100, 100, 100); ;
mSer.DefaultElement.SmartLabel.Font = new Font("Arial", 13, FontStyle.Bold);
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-86.09f, 39.4606f), mSer, "Indianapolis"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-87.97714f, 44.502508f), mSer, "Green Bay"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-87.89679f, 43.050601f), mSer, "Milwaukee"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-83.0604f, 42.347429f), mSer, "Detroit"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-86.47000f, 36.095700f), mSer, "Nashville"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-104.99459f, 39.749107f), mSer, "Denver"));
SC.Add(getLineSeries(new PointF(-88, 41), new PointF(-118.143f, 34.030800f), mSer, "Los Angeles"));
SC.Add(mSer);
return SC;
}
Series getLineSeries(PointF p1,PointF p2,Series markerSer,string destName)
{
Series s = new Series();
s.Type = SeriesType.Line;
s.DefaultElement.Marker.Type = ElementMarkerType.None;
Element el = new Element();
Element el2 = new Element();
Element elm = new Element();
elm.CustomAttributes.Add("dest",destName);
el.XValue = p1.X;
el.YValue = p1.Y;
s.Elements.Add(el);
el2.XValue = p2.X;
el2.YValue = p2.Y;
s.Elements.Add(el2);
elm.XValue = p2.X;
elm.YValue = p2.Y;
markerSer.Elements.Add(elm);
return s;
}
</script>
</head>
<body>
<div align="center">
<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 adding line series to maps.
Chart.Type = ChartType.Map 'Horizontal;
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.ChartArea.Padding = 30
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.Mapping.BaseLayers = "US"
Chart.Title = "Flights From Chicago"
' *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 mSer As Series = New Series()
mSer.DefaultElement.ShowValue = True
mSer.DefaultElement.SmartLabel.Text = "%dest"
mSer.Name = "Destinations"
mSer.Type = SeriesType.Marker
mSer.DefaultElement.SmartLabel.Color = Color.FromArgb(100, 100, 100)
mSer.DefaultElement.SmartLabel.Font = New Font("Arial", 13, FontStyle.Bold)
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-86.09f, 39.4606f), mSer, "Indianapolis"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-87.97714f, 44.502508f), mSer, "Green Bay"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-87.89679f, 43.050601f), mSer, "Milwaukee"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-83.0604f, 42.347429f), mSer, "Detroit"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-86.47000f, 36.095700f), mSer, "Nashville"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-104.99459f, 39.749107f), mSer, "Denver"))
SC.Add(getLineSeries(New PointF(-88, 41), New PointF(-118.143f, 34.030800f), mSer, "Los Angeles"))
SC.Add(mSer)
Return SC
End Function
Function getLineSeries(ByVal p1 As PointF, ByVal p2 As PointF, ByVal markerSer As Series, ByVal destName As String) As Series
Dim s As Series = New Series()
s.Type = SeriesType.Line
s.DefaultElement.Marker.Type = ElementMarkerType.None
Dim el As Element = New Element()
Dim el2 As Element = New Element()
Dim elm As Element = New Element()
elm.CustomAttributes.Add("dest",destName)
el.XValue = p1.X
el.YValue = p1.Y
s.Elements.Add(el)
el2.XValue = p2.X
el2.YValue = p2.Y
s.Elements.Add(el2)
elm.XValue = p2.X
elm.YValue = p2.Y
markerSer.Elements.Add(elm)
Return s
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"></dotnet:Chart></div>
</body>
</html>
Previous