<%@ 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 icon bubble series using a custom SVG icon.
// Set the title.
Chart.Title="Correlation between life expectancy, fertility rate, and population.";
// set JS settings
Chart.JS.Enabled = true;
Chart.JS.Settings.Add("defaultSeries_shape_type", "material/places/child-care");

// Set the chart Type
Chart.DefaultSeries.Type = SeriesType.Bubble;
Chart.MaximumBubbleSize = 200;
Chart.Debug = false;
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.Template = "%icon,%name,{%zSum/1000000}M,{%yAverage:n2},{%xAverage:n2}";
Chart.LegendBox.HeaderEntry.Visible = true;
Chart.LegendBox.HeaderEntry.CustomAttributes["icon"] = "";
Chart.LegendBox.HeaderEntry.Name = "Region";
Chart.LegendBox.HeaderEntry.CustomAttributes["zSum"] = "Population";
Chart.LegendBox.HeaderEntry.CustomAttributes["yAverage"] = "Fertility Rate";
Chart.LegendBox.HeaderEntry.CustomAttributes["xAverage"] = "Life Expectancye";

// Set a default transparency
Chart.DefaultSeries.DefaultElement.Transparency = 2;
Chart.DefaultSeries.DefaultElement.SmartLabel.Text = "%code";
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.Black;

Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%name</b> <br/>Population: <b>{%zValue/1000000} Mil</b><br/>Fertility Rate: <b>{%yValue:n2}</b><br/>Life Expectancy:<b> %xValue</b>";
Chart.DefaultSeries.DefaultElement.ShowValue = true;
// Set the x axis label
Chart.XAxis.Label.Text="Life Expectancy";
Chart.XAxis.FormatString = "n1";
Chart.XAxis.Interval = 2.5;
Chart.XAxis.Minimum = 62.5;
Chart.XAxis.Maximum = 85.5;
// Set the y axis label
Chart.YAxis.Label.Text="Fertility Rate";
Chart.YAxis.Interval = 0.25;
Chart.YAxis.Minimum = 1.25;
Chart.YAxis.Maximum = 3.25;
// Set the directory where the images will be stored.
Chart.TempDirectory="temp";

// Set the chart size.
Chart.Width = 770;
Chart.Height = 600;

// Add the random data.
Chart.SeriesCollection.Add(getData());


}
SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();
Series EasternAsia = new Series("Eastern Asia");
Element e1 = new Element("China");
e1.XValue = 74.99;
e1.YValue = 1.55;
e1.BubbleSize = 1349585838;
e1.ZValue = 1349585838;
e1.CustomAttributes.Add("code", "CHN");
e1.CustomAttributes.Add("name", "China");
EasternAsia.AddElements(e1);

e1 = new Element("Japan");
e1.XValue = 84.19;
e1.YValue = 1.39;
e1.BubbleSize = 127253075;
e1.CustomAttributes.Add("code", "JPN");
e1.CustomAttributes.Add("name", "Japan");
EasternAsia.AddElements(e1);
sc.Add(EasternAsia);

Series SouthCentralAsia = new Series("South-Central Asia");
e1 = new Element("India");
e1.XValue = 67.48;
e1.YValue = 2.55;
e1.BubbleSize = 1220800359;
e1.CustomAttributes.Add("code", "IND");
e1.CustomAttributes.Add("name", "India");
SouthCentralAsia.AddElements(e1);

e1 = new Element();
e1.Name = "Pakistan";
e1.XValue = 66.71;
e1.YValue = 2.96;
e1.BubbleSize = 193238868;
e1.CustomAttributes.Add("code", "PAK");
e1.CustomAttributes.Add("name", "Pakistan");
SouthCentralAsia.AddElements(e1);

e1 = new Element("Bangladesh");
e1.XValue = 70.36;
e1.YValue = 2.5;
e1.BubbleSize = 163654860;
e1.CustomAttributes.Add("code", "BGD");
e1.CustomAttributes.Add("name", "Bangladesh");
SouthCentralAsia.AddElements(e1);
sc.Add(SouthCentralAsia);

Series NorthAmerica = new Series("North America");
e1 = new Element("United States");
e1.XValue = 78.62;
e1.YValue = 2.06;
e1.BubbleSize = 316438601;
e1.CustomAttributes.Add("code", "USA");
e1.CustomAttributes.Add("name", "United States");
NorthAmerica.AddElements(e1);

e1 = new Element();
e1.Name = "Mexico";
e1.XValue = 76.86;
e1.YValue = 2.25;
e1.BubbleSize = 118818228;
e1.CustomAttributes.Add("code", "MEX");
e1.CustomAttributes.Add("name", "Mexico");
NorthAmerica.AddElements(e1);
sc.Add(NorthAmerica);

Series SouthEastAsia = new Series("South-East Asia");
e1 = new Element("Indonesia");
e1.XValue = 71.9;
e1.YValue = 2.2;
e1.BubbleSize = 251160124;
e1.CustomAttributes.Add("code", "IDN");
e1.CustomAttributes.Add("name", "Indonesia");
SouthEastAsia.AddElements(e1);

e1 = new Element();
e1.Name = "Philippines";
e1.XValue = 72.21;
e1.YValue = 3.1;
e1.BubbleSize = 105720644;
e1.CustomAttributes.Add("code", "PHL");
e1.CustomAttributes.Add("name", "Philippines");
SouthEastAsia.AddElements(e1);

e1 = new Element();
e1.Name = "Vietnam";
e1.XValue = 72.65;
e1.YValue = 1.87;
e1.BubbleSize = 92477857;
e1.CustomAttributes.Add("code", "VNM");
e1.CustomAttributes.Add("name", "Vietnam");
SouthEastAsia.AddElements(e1);

e1 = new Element();
e1.Name = "Thailand";
e1.XValue = 74.05;
e1.YValue = 1.66;
e1.BubbleSize = 67497151;
e1.CustomAttributes.Add("code", "THA");
e1.CustomAttributes.Add("name", "Thailand");
SouthEastAsia.AddElements(e1);
sc.Add(SouthEastAsia);

Series NorthernAsia = new Series("Northern Asia");
e1 = new Element("Russia");
e1.XValue = 69.85;
e1.YValue = 1.61;
e1.BubbleSize = 142500482;
e1.CustomAttributes.Add("code", "RUS");
e1.CustomAttributes.Add("name", "Russia");
NorthernAsia.AddElements(e1);

e1 = new Element("Iran");
e1.XValue = 70.62;
e1.YValue = 1.86;
e1.BubbleSize = 79853900;
e1.CustomAttributes.Add("code", "IRN");
e1.CustomAttributes.Add("name", "Iran");
NorthernAsia.AddElements(e1);
sc.Add(NorthernAsia);

Series Africa = new Series("Africa, Middle East");
e1 = new Element("Egypt");
e1.XValue = 73.19;
e1.YValue = 2.9;
e1.BubbleSize = 85294388;
e1.CustomAttributes.Add("code", "EGY");
e1.CustomAttributes.Add("name", "Egypt");
NorthernAsia.AddElements(e1);
sc.Add(Africa);

Series WesternEurope = new Series("Western Europe");
e1 = new Element("Germany");
e1.XValue = 80.32;
e1.YValue = 1.42;
e1.BubbleSize = 81147265;
e1.CustomAttributes.Add("code", "DEU");
e1.CustomAttributes.Add("name", "Germany");
WesternEurope.AddElements(e1);

e1 = new Element("France");
e1.XValue = 81.56;
e1.YValue = 2.08;
e1.BubbleSize = 65951611;
e1.CustomAttributes.Add("code", "FRA");
e1.CustomAttributes.Add("name", "France");
WesternEurope.AddElements(e1);
sc.Add(WesternEurope);
return 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 icon bubble series using a custom SVG icon.
' Set the title.
Chart.Title="Correlation between life expectancy, fertility rate, and population."
' set JS settings
Chart.JS.Enabled = True
Chart.JS.Settings.Add("defaultSeries_shape_type", "material/places/child-care")

' Set the chart Type
Chart.DefaultSeries.Type = SeriesType.Bubble
Chart.MaximumBubbleSize = 200
Chart.Debug = False
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.Template = "%icon,%name,{%zSum/1000000}M,{%yAverage:n2},{%xAverage:n2}"
Chart.LegendBox.HeaderEntry.Visible = True
Chart.LegendBox.HeaderEntry.CustomAttributes("icon") = ""
Chart.LegendBox.HeaderEntry.Name = "Region"
Chart.LegendBox.HeaderEntry.CustomAttributes("zSum") = "Population"
Chart.LegendBox.HeaderEntry.CustomAttributes("yAverage") = "Fertility Rate"
Chart.LegendBox.HeaderEntry.CustomAttributes("xAverage") = "Life Expectancye"

' Set a default transparency
Chart.DefaultSeries.DefaultElement.Transparency = 2
Chart.DefaultSeries.DefaultElement.SmartLabel.Text = "%code"
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.Black

Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%name</b> <br/>Population: <b>{%zValue/1000000} Mil</b><br/>Fertility Rate: <b>{%yValue:n2}</b><br/>Life Expectancy:<b> %xValue</b>"
Chart.DefaultSeries.DefaultElement.ShowValue = True
' Set the x axis label
Chart.XAxis.Label.Text="Life Expectancy"
Chart.XAxis.FormatString = "n1"
Chart.XAxis.Interval = 2.5
Chart.XAxis.Minimum = 62.5
Chart.XAxis.Maximum = 85.5
' Set the y axis label
Chart.YAxis.Label.Text="Fertility Rate"
Chart.YAxis.Interval = 0.25
Chart.YAxis.Minimum = 1.25
Chart.YAxis.Maximum = 3.25
' Set the directory where the images will be stored.
Chart.TempDirectory="temp"

' Set the chart size.
Chart.Width = 770
Chart.Height = 600

' Add the random data.
Chart.SeriesCollection.Add(getData())


End Sub
Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim EasternAsia As Series = New Series("Eastern Asia")
Dim e1 As Element = New Element("China")
e1.XValue = 74.99
e1.YValue = 1.55
e1.BubbleSize = 1349585838
e1.ZValue = 1349585838
e1.CustomAttributes.Add("code", "CHN")
e1.CustomAttributes.Add("name", "China")
EasternAsia.AddElements(e1)

e1 = New Element("Japan")
e1.XValue = 84.19
e1.YValue = 1.39
e1.BubbleSize = 127253075
e1.CustomAttributes.Add("code", "JPN")
e1.CustomAttributes.Add("name", "Japan")
EasternAsia.AddElements(e1)
sc.Add(EasternAsia)

Dim SouthCentralAsia As Series = New Series("South-Central Asia")
e1 = New Element("India")
e1.XValue = 67.48
e1.YValue = 2.55
e1.BubbleSize = 1220800359
e1.CustomAttributes.Add("code", "IND")
e1.CustomAttributes.Add("name", "India")
SouthCentralAsia.AddElements(e1)

e1 = New Element()
e1.Name = "Pakistan"
e1.XValue = 66.71
e1.YValue = 2.96
e1.BubbleSize = 193238868
e1.CustomAttributes.Add("code", "PAK")
e1.CustomAttributes.Add("name", "Pakistan")
SouthCentralAsia.AddElements(e1)

e1 = New Element("Bangladesh")
e1.XValue = 70.36
e1.YValue = 2.5
e1.BubbleSize = 163654860
e1.CustomAttributes.Add("code", "BGD")
e1.CustomAttributes.Add("name", "Bangladesh")
SouthCentralAsia.AddElements(e1)
sc.Add(SouthCentralAsia)

Dim NorthAmerica As Series = New Series("North America")
e1 = New Element("United States")
e1.XValue = 78.62
e1.YValue = 2.06
e1.BubbleSize = 316438601
e1.CustomAttributes.Add("code", "USA")
e1.CustomAttributes.Add("name", "United States")
NorthAmerica.AddElements(e1)

e1 = New Element()
e1.Name = "Mexico"
e1.XValue = 76.86
e1.YValue = 2.25
e1.BubbleSize = 118818228
e1.CustomAttributes.Add("code", "MEX")
e1.CustomAttributes.Add("name", "Mexico")
NorthAmerica.AddElements(e1)
sc.Add(NorthAmerica)

Dim SouthEastAsia As Series = New Series("South-East Asia")
e1 = New Element("Indonesia")
e1.XValue = 71.9
e1.YValue = 2.2
e1.BubbleSize = 251160124
e1.CustomAttributes.Add("code", "IDN")
e1.CustomAttributes.Add("name", "Indonesia")
SouthEastAsia.AddElements(e1)

e1 = New Element()
e1.Name = "Philippines"
e1.XValue = 72.21
e1.YValue = 3.1
e1.BubbleSize = 105720644
e1.CustomAttributes.Add("code", "PHL")
e1.CustomAttributes.Add("name", "Philippines")
SouthEastAsia.AddElements(e1)

e1 = New Element()
e1.Name = "Vietnam"
e1.XValue = 72.65
e1.YValue = 1.87
e1.BubbleSize = 92477857
e1.CustomAttributes.Add("code", "VNM")
e1.CustomAttributes.Add("name", "Vietnam")
SouthEastAsia.AddElements(e1)

e1 = New Element()
e1.Name = "Thailand"
e1.XValue = 74.05
e1.YValue = 1.66
e1.BubbleSize = 67497151
e1.CustomAttributes.Add("code", "THA")
e1.CustomAttributes.Add("name", "Thailand")
SouthEastAsia.AddElements(e1)
sc.Add(SouthEastAsia)

Dim NorthernAsia As Series = New Series("Northern Asia")
e1 = New Element("Russia")
e1.XValue = 69.85
e1.YValue = 1.61
e1.BubbleSize = 142500482
e1.CustomAttributes.Add("code", "RUS")
e1.CustomAttributes.Add("name", "Russia")
NorthernAsia.AddElements(e1)

e1 = New Element("Iran")
e1.XValue = 70.62
e1.YValue = 1.86
e1.BubbleSize = 79853900
e1.CustomAttributes.Add("code", "IRN")
e1.CustomAttributes.Add("name", "Iran")
NorthernAsia.AddElements(e1)
sc.Add(NorthernAsia)

Dim Africa As Series = New Series("Africa, Middle East")
e1 = New Element("Egypt")
e1.XValue = 73.19
e1.YValue = 2.9
e1.BubbleSize = 85294388
e1.CustomAttributes.Add("code", "EGY")
e1.CustomAttributes.Add("name", "Egypt")
NorthernAsia.AddElements(e1)
sc.Add(Africa)

Dim WesternEurope As Series = New Series("Western Europe")
e1 = New Element("Germany")
e1.XValue = 80.32
e1.YValue = 1.42
e1.BubbleSize = 81147265
e1.CustomAttributes.Add("code", "DEU")
e1.CustomAttributes.Add("name", "Germany")
WesternEurope.AddElements(e1)

e1 = New Element("France")
e1.XValue = 81.56
e1.YValue = 2.08
e1.BubbleSize = 65951611
e1.CustomAttributes.Add("code", "FRA")
e1.CustomAttributes.Add("name", "France")
WesternEurope.AddElements(e1)
sc.Add(WesternEurope)
Return sc
End Function
</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>