<%@ 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 vertical dumbbell slider chart. Uses firstPoint and lastPoint to manage styling.
Chart.Debug = true;
Chart.TitleBox.Label.Text = "Happiness Index <span style=\"color:#29B6F6\"><b>2016</b></span> vs <span style=\"color:#7E57C2\"><b>2022</b></span>";
Chart.Width = 700;
Chart.Height = 500;
Chart.TempDirectory = "temp";
//Js settings
Chart.JS.Enabled = true;

Chart.DefaultAxis.DefaultTick.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);

Chart.YAxis.DefaultTick.GridLine.Visible = true;
Chart.YAxis.DefaultTick.GridLine.Color = ColorTranslator.FromHtml("#E0E0E0");
Chart.YAxis.DefaultTick.Line.Length = 6;
Chart.YAxis.DefaultTick.Line.Visible = false;
Chart.YAxis.AlternateGridBackground = new Background(Color.Transparent);

Chart.XAxis.FormatString = "c";
Chart.XAxis.DefaultTick.GridLine.Visible = false;
Chart.XAxis.TickLabelAngle = 90;

// Style the series
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.DefaultElement.Marker.Size = 15;
Chart.DefaultSeries.Line.Width = 3;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#E0E0E0"); ;
Chart.DefaultSeries.DefaultElement.ShowValue = true;
Chart.DefaultSeries.DefaultElement.SmartLabel.DynamicDisplay = false;

Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries;

// Disable tooltip for all the elements
Chart.ToolTip = "";

// Style the first and last element of each series.
Chart.DefaultSeries.FirstElement.Color = ColorTranslator.FromHtml("#29B6F6");
Chart.DefaultSeries.FirstElement.Marker.Type = ElementMarkerType.Circle;
Chart.DefaultSeries.FirstElement.SmartLabel.LineAlignment = StringAlignment.Far;
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Center;

Chart.DefaultSeries.LastElement.Color = ColorTranslator.FromHtml("#7E57C2");
Chart.DefaultSeries.LastElement.Marker.Type = ElementMarkerType.Circle;
Chart.DefaultSeries.LastElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultSeries.LastElement.SmartLabel.Alignment = LabelAlignment.Center;

SeriesCollection sc = getData();
foreach (Series s in sc)
{
//Flip label alignments if fisrt element is larger than second.
if (s.Elements[0].YValue > s.Elements[1].YValue)
{
s.FirstElement.SmartLabel.LineAlignment = StringAlignment.Near;
s.LastElement.SmartLabel.LineAlignment = StringAlignment.Far;
}
}
Chart.SeriesCollection.Add(sc);
}

SeriesCollection getData() {
SeriesCollection sc = new SeriesCollection();
Series ser1 = new Series("");
ser1.Name = "China";
Element el1 = new Element();
el1.Name = "China";
el1.YValue = 5.585;
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "China";
el2.YValue = 5.245;
ser1.Elements.Add(el2);
sc.Add(ser1);
Series ser2 = new Series("");
ser2.Name = "India";
Element el3 = new Element();
el3.Name = "India";
el3.YValue = 3.777;
ser2.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "India";
el4.YValue = 4.404;
ser2.Elements.Add(el4);
sc.Add(ser2);
Series ser3 = new Series("");
ser3.Name = "United States";
Element el5 = new Element();
el5.Name = "United States";
el5.YValue = 6.977;
ser3.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "United States";
el6.YValue = 7.104;
ser3.Elements.Add(el6);
sc.Add(ser3);
Series ser4 = new Series("");
ser4.Name = "Indonesia";
Element el7 = new Element();
el7.Name = "Indonesia";
el7.YValue = 5.24;
ser4.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Indonesia";
el8.YValue = 5.314;
ser4.Elements.Add(el8);
sc.Add(ser4);
Series ser5 = new Series("");
ser5.Name = "Pakistan";
Element el9 = new Element();
el9.Name = "Pakistan";
el9.YValue = 4.516;
ser5.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Pakistan";
el10.YValue = 5.132;
ser5.Elements.Add(el10);
sc.Add(ser5);
Series ser6 = new Series("");
ser6.Name = "Brazil";
Element el11 = new Element();
el11.Name = "Brazil";
el11.YValue = 6.293;
ser6.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Brazil";
el12.YValue = 6.952;
ser6.Elements.Add(el12);
sc.Add(ser6);
Series ser7 = new Series("");
ser7.Name = "Nigeria";
Element el13 = new Element();
el13.Name = "Nigeria";
el13.YValue = 4.552;
ser7.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "Nigeria";
el14.YValue = 4.875;
ser7.Elements.Add(el14);
sc.Add(ser7);
Series ser8 = new Series("");
ser8.Name = "Bangladesh";
Element el15 = new Element();
el15.Name = "Bangladesh";
el15.YValue = 5.155;
ser8.Elements.Add(el15);
Element el16 = new Element();
el16.Name = "Bangladesh";
el16.YValue = 4.643;
ser8.Elements.Add(el16);
sc.Add(ser8);
Series ser9 = new Series("");
ser9.Name = "Russia";
Element el17 = new Element();
el17.Name = "Russia";
el17.YValue = 5.459;
ser9.Elements.Add(el17);
Element el18 = new Element();
el18.Name = "Russia";
el18.YValue = 5.856;
ser9.Elements.Add(el18);
sc.Add(ser9);
Series ser10 = new Series("");
ser10.Name = "Mexico";
Element el19 = new Element();
el19.Name = "Mexico";
el19.YValue = 6.128;
ser10.Elements.Add(el19);
Element el20 = new Element();
el20.Name = "Mexico";
el20.YValue = 6.778;
ser10.Elements.Add(el20);
sc.Add(ser10);
return sc;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
</script>
</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 vertical dumbbell slider chart. Uses firstPoint and lastPoint to manage styling.
Chart.Debug = True
Chart.TitleBox.Label.Text = "Happiness Index <span style=""color:#29B6F6""><b>2016</b></span> vs <span style=""color:#7E57C2""><b>2022</b></span>"
Chart.Width = 700
Chart.Height = 500
Chart.TempDirectory = "temp"
'Js settings
Chart.JS.Enabled = True

Chart.DefaultAxis.DefaultTick.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)

Chart.YAxis.DefaultTick.GridLine.Visible = True
Chart.YAxis.DefaultTick.GridLine.Color = ColorTranslator.FromHtml("#E0E0E0")
Chart.YAxis.DefaultTick.Line.Length = 6
Chart.YAxis.DefaultTick.Line.Visible = False
Chart.YAxis.AlternateGridBackground = New Background(Color.Transparent)

Chart.XAxis.FormatString = "c"
Chart.XAxis.DefaultTick.GridLine.Visible = False
Chart.XAxis.TickLabelAngle = 90

' Style the series
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.DefaultElement.Marker.Size = 15
Chart.DefaultSeries.Line.Width = 3
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#E0E0E0")

Chart.DefaultSeries.DefaultElement.ShowValue = True
Chart.DefaultSeries.DefaultElement.SmartLabel.DynamicDisplay = False

Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries

' Disable tooltip for all the elements
Chart.ToolTip = ""

' Style the first and last element of each series.
Chart.DefaultSeries.FirstElement.Color = ColorTranslator.FromHtml("#29B6F6")
Chart.DefaultSeries.FirstElement.Marker.Type = ElementMarkerType.Circle
Chart.DefaultSeries.FirstElement.SmartLabel.LineAlignment = StringAlignment.Far
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Center

Chart.DefaultSeries.LastElement.Color = ColorTranslator.FromHtml("#7E57C2")
Chart.DefaultSeries.LastElement.Marker.Type = ElementMarkerType.Circle
Chart.DefaultSeries.LastElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultSeries.LastElement.SmartLabel.Alignment = LabelAlignment.Center

Dim sc As SeriesCollection = getData()
For Each s As Series In sc
'Flip label alignments if fisrt element is larger than second.
If s.Elements(0).YValue > s.Elements(1).YValue Then
s.FirstElement.SmartLabel.LineAlignment = StringAlignment.Near
s.LastElement.SmartLabel.LineAlignment = StringAlignment.Far
End If
Next s
Chart.SeriesCollection.Add(sc)
End Sub

Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim ser1 As Series = New Series("")
ser1.Name = "China"
Dim el1 As Element = New Element()
el1.Name = "China"
el1.YValue = 5.585
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "China"
el2.YValue = 5.245
ser1.Elements.Add(el2)
sc.Add(ser1)
Dim ser2 As Series = New Series("")
ser2.Name = "India"
Dim el3 As Element = New Element()
el3.Name = "India"
el3.YValue = 3.777
ser2.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "India"
el4.YValue = 4.404
ser2.Elements.Add(el4)
sc.Add(ser2)
Dim ser3 As Series = New Series("")
ser3.Name = "United States"
Dim el5 As Element = New Element()
el5.Name = "United States"
el5.YValue = 6.977
ser3.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "United States"
el6.YValue = 7.104
ser3.Elements.Add(el6)
sc.Add(ser3)
Dim ser4 As Series = New Series("")
ser4.Name = "Indonesia"
Dim el7 As Element = New Element()
el7.Name = "Indonesia"
el7.YValue = 5.24
ser4.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Indonesia"
el8.YValue = 5.314
ser4.Elements.Add(el8)
sc.Add(ser4)
Dim ser5 As Series = New Series("")
ser5.Name = "Pakistan"
Dim el9 As Element = New Element()
el9.Name = "Pakistan"
el9.YValue = 4.516
ser5.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Pakistan"
el10.YValue = 5.132
ser5.Elements.Add(el10)
sc.Add(ser5)
Dim ser6 As Series = New Series("")
ser6.Name = "Brazil"
Dim el11 As Element = New Element()
el11.Name = "Brazil"
el11.YValue = 6.293
ser6.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Brazil"
el12.YValue = 6.952
ser6.Elements.Add(el12)
sc.Add(ser6)
Dim ser7 As Series = New Series("")
ser7.Name = "Nigeria"
Dim el13 As Element = New Element()
el13.Name = "Nigeria"
el13.YValue = 4.552
ser7.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "Nigeria"
el14.YValue = 4.875
ser7.Elements.Add(el14)
sc.Add(ser7)
Dim ser8 As Series = New Series("")
ser8.Name = "Bangladesh"
Dim el15 As Element = New Element()
el15.Name = "Bangladesh"
el15.YValue = 5.155
ser8.Elements.Add(el15)
Dim el16 As Element = New Element()
el16.Name = "Bangladesh"
el16.YValue = 4.643
ser8.Elements.Add(el16)
sc.Add(ser8)
Dim ser9 As Series = New Series("")
ser9.Name = "Russia"
Dim el17 As Element = New Element()
el17.Name = "Russia"
el17.YValue = 5.459
ser9.Elements.Add(el17)
Dim el18 As Element = New Element()
el18.Name = "Russia"
el18.YValue = 5.856
ser9.Elements.Add(el18)
sc.Add(ser9)
Dim ser10 As Series = New Series("")
ser10.Name = "Mexico"
Dim el19 As Element = New Element()
el19.Name = "Mexico"
el19.YValue = 6.128
ser10.Elements.Add(el19)
Dim el20 As Element = New Element()
el20.Name = "Mexico"
el20.YValue = 6.778
ser10.Elements.Add(el20)
sc.Add(ser10)
Return sc
End Function

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