<%@ 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 dumbbell slider chart with multiple axes. Uses firstPoint and lastPoint to manage styling.
Chart.Debug = true;
Chart.Type = ChartType.ComboHorizontal;
Chart.TitleBox.Label.Text = "How Do Electric Cars React To Winter?";
Chart.Width = 600;
Chart.Height = 700;
Chart.TempDirectory = "temp";
//Js settings
Chart.JS.Enabled = true;
Chart.LegendBox.Visible = false;

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

Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Left;
Chart.YAxis.DefaultTick.GridLine.Visible = true;
Chart.YAxis.DefaultTick.GridLine.Color = ColorTranslator.FromHtml("#E0E0E0");
Chart.YAxis.CenterTickMarks = true;
Chart.YAxis.DefaultTick.Line.Length = 0;
Chart.YAxis.DefaultTick.Label.MaxWidth = 100;

// The main x axis is on top and will only show the element axis ticks.
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
// No gridLines for the first series element ticks.
Chart.XAxis.DefaultTick.GridLine.Visible = false;
Chart.XAxis.DefaultTick.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
// Dont highlight the first series on top axis tick hover.
Chart.XAxis.DefaultTick.HoverAction = HoverAction.None;
Chart.XAxis.ClearValues = true;

// This bottom axis will show values.
Axis axisReplica = Chart.XAxis.Calculate("");
axisReplica.Label.Text = "% of EPA range";
axisReplica.Orientation = dotnetCHARTING.Orientation.Bottom;
axisReplica.DefaultTick.GridLine.Color = Color.LightGray;
axisReplica.DefaultTick.Label.Text = "%value%";
Chart.AxisCollection.Add(axisReplica);

// Style the series
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.DefaultElement.Marker.Size = 15;
Chart.DefaultSeries.Line.Width = 10;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#E0E0E0"); ;
Chart.DefaultSeries.DefaultElement.ShowValue = true;

Chart.DefaultElement.LabelTemplate = "%value%";

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.Center;
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Bottom;

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

SeriesCollection sc = getData();

// Add axis ticks (top axis) to first and last elements of the first series.
sc[0].FirstElement.XAxisTick.Label.Text = "Freezing (20-30�F)";
sc[0].FirstElement.XAxisTick.Label.Color = ColorTranslator.FromHtml("#29B6F6");

sc[0].LastElement.XAxisTick.Label.Text = "Warm (70�F)";
sc[0].LastElement.XAxisTick.Label.Color = ColorTranslator.FromHtml("#FF9800");

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.Alignment = LabelAlignment.Top;
s.LastElement.SmartLabel.Alignment = LabelAlignment.Bottom;
}
}

Chart.SeriesCollection.Add(sc);
}

SeriesCollection getData() {
SeriesCollection sc = new SeriesCollection();
Series ser1 = new Series("");
ser1.Name = "Chevy Bolt";
Element el1 = new Element();
el1.Name = "Chevy Bolt";
el1.YValue = 66;
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Chevy Bolt";
el2.YValue = 98;
ser1.Elements.Add(el2);
sc.Add(ser1);
Series ser2 = new Series("");
ser2.Name = "Chevy Volt";
Element el3 = new Element();
el3.Name = "Chevy Volt";
el3.YValue = 69;
ser2.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Chevy Volt";
el4.YValue = 100;
ser2.Elements.Add(el4);
sc.Add(ser2);
Series ser3 = new Series("");
ser3.Name = "Mustang Mach-E Premium";
Element el5 = new Element();
el5.Name = "Mustang Mach-E Premium";
el5.YValue = 68;
ser3.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Mustang Mach-E Premium";
el6.YValue = 94;
ser3.Elements.Add(el6);
sc.Add(ser3);
Series ser4 = new Series("");
ser4.Name = "BMW i3";
Element el7 = new Element();
el7.Name = "BMW i3";
el7.YValue = 74;
ser4.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "BMW i3";
el8.YValue = 98;
ser4.Elements.Add(el8);
sc.Add(ser4);
Series ser5 = new Series("");
ser5.Name = "VW e-Golf";
Element el9 = new Element();
el9.Name = "VW e-Golf";
el9.YValue = 88;
ser5.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "VW e-Golf";
el10.YValue = 111;
ser5.Elements.Add(el10);
sc.Add(ser5);
Series ser6 = new Series("");
ser6.Name = "Hyundai KONA";
Element el11 = new Element();
el11.Name = "Hyundai KONA";
el11.YValue = 93;
ser6.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Hyundai KONA";
el12.YValue = 112;
ser6.Elements.Add(el12);
sc.Add(ser6);
Series ser7 = new Series("");
ser7.Name = "Nissan Leaf";
Element el13 = new Element();
el13.Name = "Nissan Leaf";
el13.YValue = 91;
ser7.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "Nissan Leaf";
el14.YValue = 105;
ser7.Elements.Add(el14);
sc.Add(ser7);
Series ser8 = new Series("");
ser8.Name = "Audi e-tron";
Element el15 = new Element();
el15.Name = "Audi e-tron";
el15.YValue = 93;
ser8.Elements.Add(el15);
Element el16 = new Element();
el16.Name = "Audi e-tron";
el16.YValue = 101;
ser8.Elements.Add(el16);
sc.Add(ser8);
Series ser9 = new Series("");
ser9.Name = "Tesla Model S";
Element el17 = new Element();
el17.Name = "Tesla Model S";
el17.YValue = 94;
ser9.Elements.Add(el17);
Element el18 = new Element();
el18.Name = "Tesla Model S";
el18.YValue = 98;
ser9.Elements.Add(el18);
sc.Add(ser9);
Series ser10 = new Series("");
ser10.Name = "Jaguar I-PACE";
Element el19 = new Element();
el19.Name = "Jaguar I-PACE";
el19.YValue = 97;
ser10.Elements.Add(el19);
Element el20 = new Element();
el20.Name = "Jaguar I-PACE";
el20.YValue = 100;
ser10.Elements.Add(el20);
sc.Add(ser10);
Series ser11 = new Series("");
ser11.Name = "Tesla Model 3";
Element el21 = new Element();
el21.Name = "Tesla Model 3";
el21.YValue = 95;
ser11.Elements.Add(el21);
Element el22 = new Element();
el22.Name = "Tesla Model 3";
el22.YValue = 96;
ser11.Elements.Add(el22);
sc.Add(ser11);
Series ser12 = new Series("");
ser12.Name = "Tesla Model X";
Element el23 = new Element();
el23.Name = "Tesla Model X";
el23.YValue = 93;
ser12.Elements.Add(el23);
Element el24 = new Element();
el24.Name = "Tesla Model X";
el24.YValue = 93;
ser12.Elements.Add(el24);
sc.Add(ser12);
Series ser13 = new Series("");
ser13.Name = "Tesla Model Y";
Element el25 = new Element();
el25.Name = "Tesla Model Y";
el25.YValue = 98;
ser13.Elements.Add(el25);
Element el26 = new Element();
el26.Name = "Tesla Model Y";
el26.YValue = 97;
ser13.Elements.Add(el26);
sc.Add(ser13);
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 dumbbell slider chart with multiple axes. Uses firstPoint and lastPoint to manage styling.
Chart.Debug = True
Chart.Type = ChartType.ComboHorizontal
Chart.TitleBox.Label.Text = "How Do Electric Cars React To Winter?"
Chart.Width = 600
Chart.Height = 700
Chart.TempDirectory = "temp"
'Js settings
Chart.JS.Enabled = True
Chart.LegendBox.Visible = False

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

Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Left
Chart.YAxis.DefaultTick.GridLine.Visible = True
Chart.YAxis.DefaultTick.GridLine.Color = ColorTranslator.FromHtml("#E0E0E0")
Chart.YAxis.CenterTickMarks = True
Chart.YAxis.DefaultTick.Line.Length = 0
Chart.YAxis.DefaultTick.Label.MaxWidth = 100

' The main x axis is on top and will only show the element axis ticks.
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top
' No gridLines for the first series element ticks.
Chart.XAxis.DefaultTick.GridLine.Visible = False
Chart.XAxis.DefaultTick.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
' Dont highlight the first series on top axis tick hover.
Chart.XAxis.DefaultTick.HoverAction = HoverAction.None
Chart.XAxis.ClearValues = True

' This bottom axis will show values.
Dim axisReplica As Axis = Chart.XAxis.Calculate("")
axisReplica.Label.Text = "% of EPA range"
axisReplica.Orientation = dotnetCHARTING.Orientation.Bottom
axisReplica.DefaultTick.GridLine.Color = Color.LightGray
axisReplica.DefaultTick.Label.Text = "%value%"
Chart.AxisCollection.Add(axisReplica)

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

Chart.DefaultSeries.DefaultElement.ShowValue = True

Chart.DefaultElement.LabelTemplate = "%value%"

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.Center
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Bottom

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

Dim sc As SeriesCollection = getData()

' Add axis ticks (top axis) to first and last elements of the first series.
sc(0).FirstElement.XAxisTick.Label.Text = "Freezing (20-30�F)"
sc(0).FirstElement.XAxisTick.Label.Color = ColorTranslator.FromHtml("#29B6F6")

sc(0).LastElement.XAxisTick.Label.Text = "Warm (70�F)"
sc(0).LastElement.XAxisTick.Label.Color = ColorTranslator.FromHtml("#FF9800")

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.Alignment = LabelAlignment.Top
s.LastElement.SmartLabel.Alignment = LabelAlignment.Bottom
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 = "Chevy Bolt"
Dim el1 As Element = New Element()
el1.Name = "Chevy Bolt"
el1.YValue = 66
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Chevy Bolt"
el2.YValue = 98
ser1.Elements.Add(el2)
sc.Add(ser1)
Dim ser2 As Series = New Series("")
ser2.Name = "Chevy Volt"
Dim el3 As Element = New Element()
el3.Name = "Chevy Volt"
el3.YValue = 69
ser2.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Chevy Volt"
el4.YValue = 100
ser2.Elements.Add(el4)
sc.Add(ser2)
Dim ser3 As Series = New Series("")
ser3.Name = "Mustang Mach-E Premium"
Dim el5 As Element = New Element()
el5.Name = "Mustang Mach-E Premium"
el5.YValue = 68
ser3.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Mustang Mach-E Premium"
el6.YValue = 94
ser3.Elements.Add(el6)
sc.Add(ser3)
Dim ser4 As Series = New Series("")
ser4.Name = "BMW i3"
Dim el7 As Element = New Element()
el7.Name = "BMW i3"
el7.YValue = 74
ser4.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "BMW i3"
el8.YValue = 98
ser4.Elements.Add(el8)
sc.Add(ser4)
Dim ser5 As Series = New Series("")
ser5.Name = "VW e-Golf"
Dim el9 As Element = New Element()
el9.Name = "VW e-Golf"
el9.YValue = 88
ser5.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "VW e-Golf"
el10.YValue = 111
ser5.Elements.Add(el10)
sc.Add(ser5)
Dim ser6 As Series = New Series("")
ser6.Name = "Hyundai KONA"
Dim el11 As Element = New Element()
el11.Name = "Hyundai KONA"
el11.YValue = 93
ser6.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Hyundai KONA"
el12.YValue = 112
ser6.Elements.Add(el12)
sc.Add(ser6)
Dim ser7 As Series = New Series("")
ser7.Name = "Nissan Leaf"
Dim el13 As Element = New Element()
el13.Name = "Nissan Leaf"
el13.YValue = 91
ser7.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "Nissan Leaf"
el14.YValue = 105
ser7.Elements.Add(el14)
sc.Add(ser7)
Dim ser8 As Series = New Series("")
ser8.Name = "Audi e-tron"
Dim el15 As Element = New Element()
el15.Name = "Audi e-tron"
el15.YValue = 93
ser8.Elements.Add(el15)
Dim el16 As Element = New Element()
el16.Name = "Audi e-tron"
el16.YValue = 101
ser8.Elements.Add(el16)
sc.Add(ser8)
Dim ser9 As Series = New Series("")
ser9.Name = "Tesla Model S"
Dim el17 As Element = New Element()
el17.Name = "Tesla Model S"
el17.YValue = 94
ser9.Elements.Add(el17)
Dim el18 As Element = New Element()
el18.Name = "Tesla Model S"
el18.YValue = 98
ser9.Elements.Add(el18)
sc.Add(ser9)
Dim ser10 As Series = New Series("")
ser10.Name = "Jaguar I-PACE"
Dim el19 As Element = New Element()
el19.Name = "Jaguar I-PACE"
el19.YValue = 97
ser10.Elements.Add(el19)
Dim el20 As Element = New Element()
el20.Name = "Jaguar I-PACE"
el20.YValue = 100
ser10.Elements.Add(el20)
sc.Add(ser10)
Dim ser11 As Series = New Series("")
ser11.Name = "Tesla Model 3"
Dim el21 As Element = New Element()
el21.Name = "Tesla Model 3"
el21.YValue = 95
ser11.Elements.Add(el21)
Dim el22 As Element = New Element()
el22.Name = "Tesla Model 3"
el22.YValue = 96
ser11.Elements.Add(el22)
sc.Add(ser11)
Dim ser12 As Series = New Series("")
ser12.Name = "Tesla Model X"
Dim el23 As Element = New Element()
el23.Name = "Tesla Model X"
el23.YValue = 93
ser12.Elements.Add(el23)
Dim el24 As Element = New Element()
el24.Name = "Tesla Model X"
el24.YValue = 93
ser12.Elements.Add(el24)
sc.Add(ser12)
Dim ser13 As Series = New Series("")
ser13.Name = "Tesla Model Y"
Dim el25 As Element = New Element()
el25.Name = "Tesla Model Y"
el25.YValue = 98
ser13.Elements.Add(el25)
Dim el26 As Element = New Element()
el26.Name = "Tesla Model Y"
el26.YValue = 97
ser13.Elements.Add(el26)
sc.Add(ser13)
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>