Gallery

Gallery > Bubble Charts

JS Bubble Timeline

A bubble timeline chart of box office proceeds.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample demonstrates a bubble timeline chart of box office proceeds.
Chart.Type = ChartType.Bubble;
Chart.DefaultElement.Marker.Visible = true;
Chart.DefaultElement.Marker.Size = 2;
Chart.Width = 800;
Chart.Height = 160;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Marvel Cinematic Universe, Movies by Worldwide Box Office";
Chart.TitleBox.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.TitleBox.ClearColors();
Chart.LegendBox.Visible = false;

Chart.DefaultAxis.Line.Width = 0;
Chart.YAxis.ClearValues = true;
Chart.XAxis.TimeInterval = TimeInterval.Year;

Chart.DefaultElement.FocusGlow.Width = 4;
Chart.DefaultElement.FocusGlow.Color = ColorTranslator.FromHtml("#29B6F6");
Chart.DefaultElement.HoverAction = HoverAction.HighlightElement;
Chart.XAxis.Crosshair = new AxisTick();
Chart.ToolTipTemplate = "%points";
Chart.DefaultElement.ToolTip = "%name (<b>{%xValue:date d}</b>)<br>Worldwide Box Office: <b>{%zValue:c0}</b><br>Budget: <b>{%budget:c0}</b>";
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Settings.Add("defaultSeries.defaultPoint.states_mute_opacity", "0.5");

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/marvel-cinematic-universe.csv";
de.DataFields = "xdatetime=release_date,yvalue=y,zvalue=worldwide_box_office,name,budget";//cvs must have header
SeriesCollection sc = de.GetSeries();
sc[0].DefaultElement.Transparency = 30;
sc[0].DefaultElement.Color = ColorTranslator.FromHtml("#FF5722");// Color.FromArgb(20, ColorTranslator.FromHtml("#FF5722"));
Chart.SeriesCollection.Add(sc[0]);

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 800px; margin: 0px auto;" />
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates a bubble timeline chart of box office proceeds.
Chart.Type = ChartType.Bubble
Chart.DefaultElement.Marker.Visible = True
Chart.DefaultElement.Marker.Size = 2
Chart.Width = 800
Chart.Height = 160
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "Marvel Cinematic Universe, Movies by Worldwide Box Office"
Chart.TitleBox.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.TitleBox.ClearColors()
Chart.LegendBox.Visible = False

Chart.DefaultAxis.Line.Width = 0
Chart.YAxis.ClearValues = True
Chart.XAxis.TimeInterval = TimeInterval.Year

Chart.DefaultElement.FocusGlow.Width = 4
Chart.DefaultElement.FocusGlow.Color = ColorTranslator.FromHtml("#29B6F6")
Chart.DefaultElement.HoverAction = HoverAction.HighlightElement
Chart.XAxis.Crosshair = New AxisTick()
Chart.ToolTipTemplate = "%points"
Chart.DefaultElement.ToolTip = "%name (<b>{%xValue:date d}</b>)<br>Worldwide Box Office: <b>{%zValue:c0}</b><br>Budget: <b>{%budget:c0}</b>"
'JS settings
Chart.JS.Enabled = True
Chart.JS.Settings.Add("defaultSeries.defaultPoint.states_mute_opacity", "0.5")

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/marvel-cinematic-universe.csv"
de.DataFields = "xdatetime=release_date,yvalue=y,zvalue=worldwide_box_office,name,budget" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
sc(0).DefaultElement.Transparency = 30
sc(0).DefaultElement.Color = ColorTranslator.FromHtml("#FF5722") ' Color.FromArgb(20, ColorTranslator.FromHtml("#FF5722"));
Chart.SeriesCollection.Add(sc(0))

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 800px; margin: 0px auto;" />
</body>
</html>

Sample FilenameJsBubbleTimeline.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Bubble Timeline