Gallery

Gallery > Bubble Charts

JS Bubble

Demonstrates how to draw bubble series type.

Download Show C# Code Show VB Code

<%@ 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 bubble series type.
// Set the title.
Chart.Title="Correlation between life expectancy, fertility rate, and population.";
// set JS settings
Chart.JS.Enabled = true;
// Set the chart Type
Chart.DefaultSeries.Type = SeriesType.Bubble;
Chart.MaximumBubbleSize = 100;

Chart.Debug = false;
Chart.LegendBox.Visible = false;

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

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 countries = new Series();
Element e1 = new Element("China");
e1.XValue = 74.99;
e1.YValue = 1.55;
e1.BubbleSize = 1349585838;
e1.CustomAttributes.Add("code", "CHN");
e1.CustomAttributes.Add("name", "China");
countries.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");
countries.AddElements(e1);

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");
countries.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");
countries.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");
countries.AddElements(e1);

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");
countries.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");
countries.AddElements(e1);

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");
countries.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");
countries.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");
countries.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");
countries.AddElements(e1);

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");
countries.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");
countries.AddElements(e1);

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");
countries.AddElements(e1);

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");
countries.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");
countries.AddElements(e1);
sc.Add(countries);
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 bubble series type.
' Set the title.
Chart.Title="Correlation between life expectancy, fertility rate, and population."
' set JS settings
Chart.JS.Enabled = True
' Set the chart Type
Chart.DefaultSeries.Type = SeriesType.Bubble
Chart.MaximumBubbleSize = 100

Chart.Debug = False
Chart.LegendBox.Visible = False

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

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 countries As Series = New Series()
Dim e1 As Element = New Element("China")
e1.XValue = 74.99
e1.YValue = 1.55
e1.BubbleSize = 1349585838
e1.CustomAttributes.Add("code", "CHN")
e1.CustomAttributes.Add("name", "China")
countries.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")
countries.AddElements(e1)

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")
countries.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")
countries.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")
countries.AddElements(e1)

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")
countries.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")
countries.AddElements(e1)

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")
countries.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")
countries.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")
countries.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")
countries.AddElements(e1)

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")
countries.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")
countries.AddElements(e1)

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")
countries.AddElements(e1)

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")
countries.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")
countries.AddElements(e1)
sc.Add(countries)
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>

Sample FilenameJsBubble.aspx
Version10.0
Uses DatabaseNo

JS Charting

Gallery

JS Bubble