<%@ 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)
{
// This sample demonstrates overlapping column clusters using an additional x axis.
// Set he chart size.
Chart.Width = 740;
Chart.Height = 400;
Chart.Debug = false;
Chart.Type = ChartType.Combo;
Chart.Palette = new Color[2] { ColorTranslator.FromHtml("#cb0303"), ColorTranslator.FromHtml("#818181")};
Chart.ChartArea.ClearColors();
Chart.DefaultElement.ToolTip = "";//disable tooltip, later set tooltip for 2 series

Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft;
Background lgBackground = new Background();
lgBackground.Color = Color.Empty;
lgBackground.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal;
lgBackground.HatchColor = ColorTranslator.FromHtml("#222222");
LegendEntry le = new LegendEntry();
le.Name = "Deliveries";
le.Background = lgBackground;
Chart.LegendBox.ExtraEntries.Add(le);

// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
// Set the title.
Chart.TitleBox.Label.Text ="Tesla 2020 Vehicle Production & Deliveries";

Chart.YAxis.ClearValues = true;

Chart.XAxis.JsID = "x1";
Chart.XAxis.Scale = Scale.Stacked;
Chart.XAxis.Line.Visible = false;

Axis x2 = Chart.XAxis.Calculate("");
x2.JsID = "x2";
x2.Scale = Scale.Stacked;
x2.ClearValues = true;
Chart.AxisCollection.Add(x2);

Chart.XAxis.DefaultTick.Line.Visible = false;

// Enable JSCharting
Chart.JS.Enabled = true;

//populate data
Series s1 = new Series();
s1.Name = "Model 3/Y Produced";
s1.DefaultElement.Color = Chart.Palette[1];
SmartLabel sl = new SmartLabel();
sl.PieLabelMode = PieLabelMode.Outside;
sl.Color = ColorTranslator.FromHtml("#222222");
sl.Alignment = LabelAlignment.Top;
s1.DefaultElement.SmartLabel = sl;
s1.DefaultElement.ShowValue = true;
s1.DefaultElement.ToolTip = "%xValue <b>%seriesName</b><br>Production: <b>%yValue</b><br>Deliveries: <b>%deliveries ({%deliveries/%yValue:p1})</b>";


Element el = new Element();
el.Name = "Q1 2020";
el.YValue = 87282;
el.CustomAttributes.Add("deliveries", 76266);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q2 2020";
el.YValue = 75946;
el.CustomAttributes.Add("deliveries", 80277);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q3 2020";
el.YValue = 128044;
el.CustomAttributes.Add("deliveries", 124318);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q4 2020";
el.YValue = 163660;
el.CustomAttributes.Add("deliveries", 161701);
s1.Elements.Add(el);
Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "Model S/X Produced";
SmartLabel sl2 = new SmartLabel();
sl2.PieLabelMode = PieLabelMode.Outside;
sl2.Color = ColorTranslator.FromHtml("#222222");
sl2.Alignment = LabelAlignment.Top;
s1.DefaultElement.SmartLabel =sl2;
s1.DefaultElement.ShowValue = true;
s1.DefaultElement.Color = Chart.Palette[0];
s1.DefaultElement.ToolTip = "%xValue <b>%seriesName</b><br>Production: <b>%yValue</b><br>Deliveries: <b>%deliveries ({%deliveries/%yValue:p1})</b>";


el = new Element();
el.Name = "Q1 2020";
el.YValue = 15390;
el.CustomAttributes.Add("deliveries", 12230);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q2 2020";
el.YValue = 6326;
el.CustomAttributes.Add("deliveries", 10614);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q3 2020";
el.YValue = 16992;
el.CustomAttributes.Add("deliveries", 15275);
s1.Elements.Add(el);

el = new Element();
el.Name = "Q4 2020";
el.YValue = 16097;
el.CustomAttributes.Add("deliveries", 18966);
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "Model 3/Y";
s1.LegendEntry.Visible = false;


s1.DefaultElement.ShowValue = true;
s1.DefaultElement.Color = Color.Empty;
s1.DefaultElement.HatchColor =ColorTranslator.FromHtml("#222222");
s1.DefaultElement.Outline.Color = ColorTranslator.FromHtml("#222222");
s1.DefaultElement.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal;

el = new Element();
el.Name = "Q1 2020";
el.YValue = 76266;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q2 2020";
el.YValue = 80277;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q3 2020";
el.YValue = 124318;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q4 2020";
el.YValue = 161701;
s1.Elements.Add(el);

s1.DefaultElement.SmartLabel.Color = Color.Black;
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far;
s1.DefaultElement.ShowValue = true;
Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "Model S/X";
s1.LegendEntry.Visible = false;
s1.DefaultElement.Color = Color.Empty;
s1.DefaultElement.HatchColor =ColorTranslator.FromHtml("#222222");
s1.DefaultElement.Outline.Color=ColorTranslator.FromHtml("#222222");
s1.DefaultElement.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal;
s1.DefaultElement.SmartLabel.Color = Color.Black;
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far;
s1.DefaultElement.ShowValue = true;

el = new Element();
el.Name = "Q1 2020";
el.YValue = 12230;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q2 2020";
el.YValue = 10614;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q3 2020";
el.YValue =15275;
s1.Elements.Add(el);

el = new Element();
el.Name = "Q4 2020";
el.YValue =18966;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);
Chart.JS.Settings.Add("series.2.mouseTracking_enabled", "false");
Chart.JS.Settings.Add("series.3.mouseTracking_enabled", "false");
Chart.JS.Settings.Add("series.2.xAxis", "x2");
Chart.JS.Settings.Add("series.3.xAxis", "x2");

}
</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)
' This sample demonstrates overlapping column clusters using an additional x axis.
' Set he chart size.
Chart.Width = 740
Chart.Height = 400
Chart.Debug = False
Chart.Type = ChartType.Combo
Chart.Palette = New Color(1) { ColorTranslator.FromHtml("#cb0303"), ColorTranslator.FromHtml("#818181")}
Chart.ChartArea.ClearColors()
Chart.DefaultElement.ToolTip = "" 'disable tooltip, later set tooltip for 2 series

Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft
Dim lgBackground As Background = New Background()
lgBackground.Color = Color.Empty
lgBackground.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal
lgBackground.HatchColor = ColorTranslator.FromHtml("#222222")
Dim le As LegendEntry = New LegendEntry()
le.Name = "Deliveries"
le.Background = lgBackground
Chart.LegendBox.ExtraEntries.Add(le)

' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
' Set the title.
Chart.TitleBox.Label.Text ="Tesla 2020 Vehicle Production & Deliveries"

Chart.YAxis.ClearValues = True

Chart.XAxis.JsID = "x1"
Chart.XAxis.Scale = Scale.Stacked
Chart.XAxis.Line.Visible = False

Dim x2 As Axis = Chart.XAxis.Calculate("")
x2.JsID = "x2"
x2.Scale = Scale.Stacked
x2.ClearValues = True
Chart.AxisCollection.Add(x2)

Chart.XAxis.DefaultTick.Line.Visible = False

' Enable JSCharting
Chart.JS.Enabled = True

'populate data
Dim s1 As Series = New Series()
s1.Name = "Model 3/Y Produced"
s1.DefaultElement.Color = Chart.Palette(1)
Dim sl As SmartLabel = New SmartLabel()
sl.PieLabelMode = PieLabelMode.Outside
sl.Color = ColorTranslator.FromHtml("#222222")
sl.Alignment = LabelAlignment.Top
s1.DefaultElement.SmartLabel = sl
s1.DefaultElement.ShowValue = True
s1.DefaultElement.ToolTip = "%xValue <b>%seriesName</b><br>Production: <b>%yValue</b><br>Deliveries: <b>%deliveries ({%deliveries/%yValue:p1})</b>"


Dim el As Element = New Element()
el.Name = "Q1 2020"
el.YValue = 87282
el.CustomAttributes.Add("deliveries", 76266)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q2 2020"
el.YValue = 75946
el.CustomAttributes.Add("deliveries", 80277)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q3 2020"
el.YValue = 128044
el.CustomAttributes.Add("deliveries", 124318)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q4 2020"
el.YValue = 163660
el.CustomAttributes.Add("deliveries", 161701)
s1.Elements.Add(el)
Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "Model S/X Produced"
Dim sl2 As SmartLabel = New SmartLabel()
sl2.PieLabelMode = PieLabelMode.Outside
sl2.Color = ColorTranslator.FromHtml("#222222")
sl2.Alignment = LabelAlignment.Top
s1.DefaultElement.SmartLabel =sl2
s1.DefaultElement.ShowValue = True
s1.DefaultElement.Color = Chart.Palette(0)
s1.DefaultElement.ToolTip = "%xValue <b>%seriesName</b><br>Production: <b>%yValue</b><br>Deliveries: <b>%deliveries ({%deliveries/%yValue:p1})</b>"


el = New Element()
el.Name = "Q1 2020"
el.YValue = 15390
el.CustomAttributes.Add("deliveries", 12230)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q2 2020"
el.YValue = 6326
el.CustomAttributes.Add("deliveries", 10614)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q3 2020"
el.YValue = 16992
el.CustomAttributes.Add("deliveries", 15275)
s1.Elements.Add(el)

el = New Element()
el.Name = "Q4 2020"
el.YValue = 16097
el.CustomAttributes.Add("deliveries", 18966)
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "Model 3/Y"
s1.LegendEntry.Visible = False


s1.DefaultElement.ShowValue = True
s1.DefaultElement.Color = Color.Empty
s1.DefaultElement.HatchColor =ColorTranslator.FromHtml("#222222")
s1.DefaultElement.Outline.Color = ColorTranslator.FromHtml("#222222")
s1.DefaultElement.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal

el = New Element()
el.Name = "Q1 2020"
el.YValue = 76266
s1.Elements.Add(el)

el = New Element()
el.Name = "Q2 2020"
el.YValue = 80277
s1.Elements.Add(el)

el = New Element()
el.Name = "Q3 2020"
el.YValue = 124318
s1.Elements.Add(el)

el = New Element()
el.Name = "Q4 2020"
el.YValue = 161701
s1.Elements.Add(el)

s1.DefaultElement.SmartLabel.Color = Color.Black
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far
s1.DefaultElement.ShowValue = True
Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "Model S/X"
s1.LegendEntry.Visible = False
s1.DefaultElement.Color = Color.Empty
s1.DefaultElement.HatchColor =ColorTranslator.FromHtml("#222222")
s1.DefaultElement.Outline.Color=ColorTranslator.FromHtml("#222222")
s1.DefaultElement.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal
s1.DefaultElement.SmartLabel.Color = Color.Black
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far
s1.DefaultElement.ShowValue = True

el = New Element()
el.Name = "Q1 2020"
el.YValue = 12230
s1.Elements.Add(el)

el = New Element()
el.Name = "Q2 2020"
el.YValue = 10614
s1.Elements.Add(el)

el = New Element()
el.Name = "Q3 2020"
el.YValue =15275
s1.Elements.Add(el)

el = New Element()
el.Name = "Q4 2020"
el.YValue =18966
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)
Chart.JS.Settings.Add("series.2.mouseTracking_enabled", "false")
Chart.JS.Settings.Add("series.3.mouseTracking_enabled", "false")
Chart.JS.Settings.Add("series.2.xAxis", "x2")
Chart.JS.Settings.Add("series.3.xAxis", "x2")

End Sub
</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>