Gallery

Gallery > Pie Charts

JS Pie Styled

Demonstrates a styling variation of pie labels with line caps.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{

// Demonstrates a styling variation of pie labels with line caps.
Chart.Type = ChartType.Pies;
Chart.Size = "600x350";
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;

Chart.TitleBox.Label.Text = "Top Populations vs. Life Expectancy";
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
Chart.PaletteName = Palette.None;

Chart.ZAxis.FormatString = "n1";

Chart.DefaultElement.SmartLabel.Line.DashStyle = DashStyle.Dash;
Chart.DefaultElement.SmartLabel.Line.StartCap = LineCap.Round;
Chart.DefaultElement.SmartLabel.Line.EndCap = LineCap.ArrowAnchor;
Chart.DefaultElement.SmartLabel.Text = "%name";
Chart.DefaultElement.Outline.Width = 1;//set color for each element to match outline color in legend entry
Chart.DefaultElement.ShowValue = true;

Chart.DefaultElement.ToolTip = "%name Population: {%yValue/1000000:n1}M {%percentOfTotal:n1}% Life Expectancy: %zValue Years Fertility Rate: %fertility/Woman";
Chart.LegendBox.ClearColors();
Chart.JS.Settings.Add("legend_defaultEntry_value", "js:'{%yValue/1000000:n1}M'");

// *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
SeriesCollection mySC = getData();

// Add the random data.
Chart.SeriesCollection.Add(mySC);
}

SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Series ser = new Series();
ser.Name = "Top Population Countries";
Element el = new Element("European Union", 509365627);
el.CustomAttributes.Add("fertility", 1.6);
el.ZValue = 79.86;
el.Color = Color.FromArgb(223,75, 100, 154);
ser.Elements.Add(el);

el = new Element("United States", 316438601);
el.CustomAttributes.Add("fertility", 2.06);
el.ZValue = 78.62;
el.Outline.Color = Color.FromArgb(223,136, 226, 216);
ser.Elements.Add(el);

el = new Element("China", 1349585838);
el.CustomAttributes.Add("fertility", 1.55);
el.ZValue = 74.99;
el.Outline.Color = Color.FromArgb(223,105, 131, 128);
ser.Elements.Add(el);

el = new Element("Brazil", 201009622);
el.CustomAttributes.Add("fertility", 1.81);
el.ZValue = 73.02;
el.Outline.Color = Color.FromArgb(223,13, 147, 250);
ser.Elements.Add(el);

el = new Element("Indonesia", 251160124);
el.CustomAttributes.Add("fertility", 2.2);
el.ZValue = 71.9;
el.Outline.Color = Color.FromArgb(223,94, 228, 3);
ser.Elements.Add(el);

el = new Element("Bangladesh", 163654860);
el.CustomAttributes.Add("fertility", 2.5);
el.ZValue = 70.36;
el.Outline.Color = Color.FromArgb(223,64, 136, 178);
ser.Elements.Add(el);

el = new Element("Russia", 142500482);
el.CustomAttributes.Add("fertility", 1.61);
el.ZValue = 69.85;
el.Outline.Color = Color.FromArgb(223,250, 235, 142);
ser.Elements.Add(el);

el = new Element("India", 1220800359);
el.CustomAttributes.Add("fertility", 2.55);
el.ZValue = 67.48;
el.Outline.Color = Color.FromArgb(223,158, 210, 102);
ser.Elements.Add(el);

el = new Element("Pakistan", 193238868);
el.CustomAttributes.Add("fertility", 2.96);
el.ZValue = 66.71;
el.Outline.Color = Color.FromArgb(223,102, 111, 167);
ser.Elements.Add(el);

el = new Element("Nigeria", 174507539);
el.CustomAttributes.Add("fertility", 5.31);
el.ZValue = 52.46;
el.Outline.Color = Color.FromArgb(223,205, 153, 44);
ser.Elements.Add(el);

SC.Add(ser);

return SC;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING 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" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Demonstrates a styling variation of pie labels with line caps.
Chart.Type = ChartType.Pies
Chart.Size = "600x350"
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True

Chart.TitleBox.Label.Text = "Top Populations vs. Life Expectancy"
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
Chart.PaletteName = Palette.None

Chart.ZAxis.FormatString = "n1"

Chart.DefaultElement.SmartLabel.Line.DashStyle = DashStyle.Dash
Chart.DefaultElement.SmartLabel.Line.StartCap = LineCap.Round
Chart.DefaultElement.SmartLabel.Line.EndCap = LineCap.ArrowAnchor
Chart.DefaultElement.SmartLabel.Text = "%name"
Chart.DefaultElement.Outline.Width = 1 'set color for each element to match outline color in legend entry
Chart.DefaultElement.ShowValue = True

Chart.DefaultElement.ToolTip = "%name Population: {%yValue/1000000:n1}M {%percentOfTotal:n1}% Life Expectancy: %zValue Years Fertility Rate: %fertility/Woman"
Chart.LegendBox.ClearColors()
Chart.JS.Settings.Add("legend_defaultEntry_value", "js:'{%yValue/1000000:n1}M'")

' *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
Dim mySC As SeriesCollection = getData()

' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub

Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim ser As Series = New Series()
ser.Name = "Top Population Countries"
Dim el As Element = New Element("European Union", 509365627)
el.CustomAttributes.Add("fertility", 1.6)
el.ZValue = 79.86
el.Color = Color.FromArgb(223,75, 100, 154)
ser.Elements.Add(el)

el = New Element("United States", 316438601)
el.CustomAttributes.Add("fertility", 2.06)
el.ZValue = 78.62
el.Outline.Color = Color.FromArgb(223,136, 226, 216)
ser.Elements.Add(el)

el = New Element("China", 1349585838)
el.CustomAttributes.Add("fertility", 1.55)
el.ZValue = 74.99
el.Outline.Color = Color.FromArgb(223,105, 131, 128)
ser.Elements.Add(el)

el = New Element("Brazil", 201009622)
el.CustomAttributes.Add("fertility", 1.81)
el.ZValue = 73.02
el.Outline.Color = Color.FromArgb(223,13, 147, 250)
ser.Elements.Add(el)

el = New Element("Indonesia", 251160124)
el.CustomAttributes.Add("fertility", 2.2)
el.ZValue = 71.9
el.Outline.Color = Color.FromArgb(223,94, 228, 3)
ser.Elements.Add(el)

el = New Element("Bangladesh", 163654860)
el.CustomAttributes.Add("fertility", 2.5)
el.ZValue = 70.36
el.Outline.Color = Color.FromArgb(223,64, 136, 178)
ser.Elements.Add(el)

el = New Element("Russia", 142500482)
el.CustomAttributes.Add("fertility", 1.61)
el.ZValue = 69.85
el.Outline.Color = Color.FromArgb(223,250, 235, 142)
ser.Elements.Add(el)

el = New Element("India", 1220800359)
el.CustomAttributes.Add("fertility", 2.55)
el.ZValue = 67.48
el.Outline.Color = Color.FromArgb(223,158, 210, 102)
ser.Elements.Add(el)

el = New Element("Pakistan", 193238868)
el.CustomAttributes.Add("fertility", 2.96)
el.ZValue = 66.71
el.Outline.Color = Color.FromArgb(223,102, 111, 167)
ser.Elements.Add(el)

el = New Element("Nigeria", 174507539)
el.CustomAttributes.Add("fertility", 5.31)
el.ZValue = 52.46
el.Outline.Color = Color.FromArgb(223,205, 153, 44)
ser.Elements.Add(el)

SC.Add(ser)

Return SC
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsPieStyled.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Pie Styled