JS Population Pyramid Areas
Demonstrates how to draw a layered population pyramid using area lines.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates how to draw a layered population pyramid using area lines.
// Set he chart size.
Chart.Width = 650;
Chart.Height = 440;
// Set the title.
Chart.TitleBox.Label.Text = "World Population by Age Group";
Chart.Debug = false;
Chart.Type = ChartType.ComboHorizontal;
Chart.ChartArea.ClearColors();
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.ClearColors();
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#e0ecf4"), ColorTranslator.FromHtml("#bfd3e6"), ColorTranslator.FromHtml("#9ebcda"), ColorTranslator.FromHtml("#8c96c6"), ColorTranslator.FromHtml("#8c6bb1"), ColorTranslator.FromHtml("#88419d"), ColorTranslator.FromHtml("#810f7c") };
Chart.XAxis.DefaultTick.Label.Text = "{Math.abs(%value):a2}";
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultSeries.Type = SeriesType.AreaSpline;
Chart.DefaultElement.Marker.Visible = false;
Chart.DefaultElement.FocusGlow.Width = 0;
Chart.DefaultSeries.Line.Width = 0;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.YAxis.Crosshair = new AxisTick();
Chart.DefaultElement.ToolTip = "%icon <b>%seriesName</b><br>Men: {Math.abs(%yStart)}<br>Women: %yValue";
Chart.JS.Settings.Add("xAxis.crosshair_onTop", "true");
Chart.YAxis.Label.Text = "Age";
Chart.XAxis.ReverseSeries = true;
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Annotation an = new Annotation("Men");
an.DynamicSize = false;
an.Size = new Size(50, 20);
an.Position = new Point(200, 413);
an.DynamicSize = false;
an.Label.Font = new Font("Tahoma", 11);
an.Background.Color = Color.White;
an.Line.Color = Color.Transparent;
Chart.Annotations.Add(an);
an = new Annotation("Women");
an.DynamicSize = false;
an.Size = new Size(50, 30);
an.Position = new Point(465, 413);
an.DynamicSize = false;
an.Label.Font = new Font("Tahoma", 11);
an.Background.Color = Color.White;
an.Line.Color = Color.Transparent;
Chart.Annotations.Add(an);
Chart.MarginBottom = 20;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/world-population-by-age-group.csv";
de.DataFields = "yvaluestart=men,yAxis=women,xAxis=age_group,splitBy=year";//cvs must have header
SeriesCollection sc = de.GetSeries();
for (int i = 0; i < sc.Count; i++)
{
for (int j = 0; j < sc[i].Elements.Count; j++)
{
sc[i].Elements[j].YValueStart = -(sc[i].Elements[j].YValueStart);
}
}
Chart.SeriesCollection.Add(sc);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to draw a layered population pyramid using area lines.
' Set he chart size.
Chart.Width = 650
Chart.Height = 440
' Set the title.
Chart.TitleBox.Label.Text = "World Population by Age Group"
Chart.Debug = False
Chart.Type = ChartType.ComboHorizontal
Chart.ChartArea.ClearColors()
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.ClearColors()
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.Palette = New Color() { ColorTranslator.FromHtml("#e0ecf4"), ColorTranslator.FromHtml("#bfd3e6"), ColorTranslator.FromHtml("#9ebcda"), ColorTranslator.FromHtml("#8c96c6"), ColorTranslator.FromHtml("#8c6bb1"), ColorTranslator.FromHtml("#88419d"), ColorTranslator.FromHtml("#810f7c") }
Chart.XAxis.DefaultTick.Label.Text = "{Math.abs(%value):a2}"
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultSeries.Type = SeriesType.AreaSpline
Chart.DefaultElement.Marker.Visible = False
Chart.DefaultElement.FocusGlow.Width = 0
Chart.DefaultSeries.Line.Width = 0
' Enable JSCharting
Chart.JS.Enabled = True
Chart.YAxis.Crosshair = New AxisTick()
Chart.DefaultElement.ToolTip = "%icon <b>%seriesName</b><br>Men: {Math.abs(%yStart)}<br>Women: %yValue"
Chart.JS.Settings.Add("xAxis.crosshair_onTop", "true")
Chart.YAxis.Label.Text = "Age"
Chart.XAxis.ReverseSeries = True
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Dim an As Annotation = New Annotation("Men")
an.DynamicSize = False
an.Size = New Size(50, 20)
an.Position = New Point(200, 413)
an.DynamicSize = False
an.Label.Font = New Font("Tahoma", 11)
an.Background.Color = Color.White
an.Line.Color = Color.Transparent
Chart.Annotations.Add(an)
an = New Annotation("Women")
an.DynamicSize = False
an.Size = New Size(50, 30)
an.Position = New Point(465, 413)
an.DynamicSize = False
an.Label.Font = New Font("Tahoma", 11)
an.Background.Color = Color.White
an.Line.Color = Color.Transparent
Chart.Annotations.Add(an)
Chart.MarginBottom = 20
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/world-population-by-age-group.csv"
de.DataFields = "yvaluestart=men,yAxis=women,xAxis=age_group,splitBy=year" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
For i As Integer = 0 To sc.Count - 1
For j As Integer = 0 To sc(i).Elements.Count - 1
sc(i).Elements(j).YValueStart = -(sc(i).Elements(j).YValueStart)
Next j
Next i
Chart.SeriesCollection.Add(sc)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous