<%@ 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 multiple column stack clusters using additional y axes..
// Set he chart size.
Chart.Width = 840;
Chart.Height = 480;
Chart.Debug = false;
Chart.Type = ChartType.Combo;
Chart.ChartArea.ClearColors();
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Car", "", ColorTranslator.FromHtml("#252360")));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Light Truck", "", ColorTranslator.FromHtml("#ef4136")));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Heavy Truck", "", ColorTranslator.FromHtml("#faae3f")));

Chart.Palette = new Color[3] { ColorTranslator.FromHtml("#252360"),ColorTranslator.FromHtml("#ef4136"),ColorTranslator.FromHtml("#faae3f")};

// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
// Set the title.
Chart.TitleBox.Label.Text ="Car Sales by Region";
Chart.DefaultElement.ToolTip = "%xValue %seriesName<br>%model Sales: <b>%yvalueM</b>";


Chart.YAxis.JsID = "y2018";
Chart.YAxis.Label.Text = "Millions";
Chart.YAxis.Scale = Scale.Stacked;
Chart.YAxis.Line.Visible = false;

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

Axis y2020 = Chart.YAxis.Calculate("");
y2020.JsID = "y2020";
y2020.Scale = Scale.Stacked;
y2020.ClearValues = true;
y2020.Line.Visible = false;
Chart.AxisCollection.Add(y2020);

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

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";

Chart.XAxis.ReverseSeriesPositions= true;

//populate data
Series s1 = new Series();
s1.Name = "2018";
s1.YAxis = Chart.YAxis;
s1.YAxis.JsID = "y2018";
s1.DefaultElement.Color = Chart.Palette[2];
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck");

Element el = new Element();
el.Name = "North America";
el.YValue = 2.8;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 0.3;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =1.4;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "2019";
s1.YAxis = y2019;
s1.DefaultElement.Color = Chart.Palette[2];
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck");

el = new Element();
el.Name = "North America";
el.YValue = 3.3;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 0.8;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =1.7;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "2020";
s1.YAxis = y2020;
s1.DefaultElement.Color = Chart.Palette[2];
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck");

el = new Element();
el.Name = "North America";
el.YValue = 3.6;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 0.9;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =2;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

//Light Truck
s1 = new Series();
s1.Name = "2018";
s1.YAxis = Chart.YAxis;
s1.DefaultElement.Color = Chart.Palette[1];
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck");

el = new Element();
el.Name = "North America";
el.YValue = 4.3;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 2.8;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =5.4;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "2019";
s1.YAxis = y2019;
s1.DefaultElement.Color = Chart.Palette[1];
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck");

el = new Element();
el.Name = "North America";
el.YValue = 4.3;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 2.8;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =5.4;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

s1 = new Series();
s1.Name = "2020";
s1.YAxis = y2020;
s1.DefaultElement.Color = Chart.Palette[1];
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck");

el = new Element();
el.Name = "North America";
el.YValue = 4.4;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 2.4;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =6.6;
s1.Elements.Add(el);

Chart.SeriesCollection.Add(s1);

//Car
s1 = new Series();
s1.Name = "2018";
s1.YAxis = Chart.YAxis;
s1.DefaultElement.Color = Chart.Palette[0];
s1.DefaultElement.LabelTemplate = "%seriesName";
s1.DefaultElement.CustomAttributes.Add("model", "Car");

el = new Element();
el.Name = "North America";
el.YValue =12.9;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 6.1;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =23;
s1.Elements.Add(el);

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

s1 = new Series();
s1.Name = "2019";
s1.YAxis = y2019;
s1.DefaultElement.Color = Chart.Palette[0];
s1.DefaultElement.LabelTemplate = "%seriesName";
s1.DefaultElement.CustomAttributes.Add("model", "Car");

el = new Element();
el.Name = "North America";
el.YValue = 11.3;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 7;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =25.5;
s1.Elements.Add(el);

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

s1 = new Series();
s1.Name = "2020";
s1.YAxis = y2020;
s1.DefaultElement.Color = Chart.Palette[0];
s1.DefaultElement.LabelTemplate = "%seriesName";
s1.DefaultElement.CustomAttributes.Add("model", "Car");

el = new Element();
el.Name = "North America";
el.YValue = 10.4;
s1.Elements.Add(el);

el = new Element();
el.Name = "Europe";
el.YValue = 5.7;
s1.Elements.Add(el);

el = new Element();
el.Name = "Asia";
el.YValue =20.3;
s1.Elements.Add(el);

s1.DefaultElement.SmartLabel.Color = Color.White;
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far;
s1.DefaultElement.ShowValue = true;
Chart.SeriesCollection.Add(s1);
Chart.JS.Settings.Add("series.0.yAxis", "y2018");
Chart.JS.Settings.Add("series.1.yAxis", "y2019");
Chart.JS.Settings.Add("series.2.yAxis", "y2020");
Chart.JS.Settings.Add("series.3.yAxis", "y2018");
Chart.JS.Settings.Add("series.4.yAxis", "y2019");
Chart.JS.Settings.Add("series.5.yAxis", "y2020");
Chart.JS.Settings.Add("series.6.yAxis", "y2018");
Chart.JS.Settings.Add("series.7.yAxis", "y2019");
Chart.JS.Settings.Add("series.8.yAxis", "y2020");
}
</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 multiple column stack clusters using additional y axes..
' Set he chart size.
Chart.Width = 840
Chart.Height = 480
Chart.Debug = False
Chart.Type = ChartType.Combo
Chart.ChartArea.ClearColors()
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Car", "", ColorTranslator.FromHtml("#252360")))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Light Truck", "", ColorTranslator.FromHtml("#ef4136")))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Heavy Truck", "", ColorTranslator.FromHtml("#faae3f")))

Chart.Palette = New Color(2) { ColorTranslator.FromHtml("#252360"),ColorTranslator.FromHtml("#ef4136"),ColorTranslator.FromHtml("#faae3f")}

' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
' Set the title.
Chart.TitleBox.Label.Text ="Car Sales by Region"
Chart.DefaultElement.ToolTip = "%xValue %seriesName<br>%model Sales: <b>%yvalueM</b>"


Chart.YAxis.JsID = "y2018"
Chart.YAxis.Label.Text = "Millions"
Chart.YAxis.Scale = Scale.Stacked
Chart.YAxis.Line.Visible = False

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

Dim y2020 As Axis = Chart.YAxis.Calculate("")
y2020.JsID = "y2020"
y2020.Scale = Scale.Stacked
y2020.ClearValues = True
y2020.Line.Visible = False
Chart.AxisCollection.Add(y2020)

Chart.XAxis.DefaultTick.Line.Visible = False

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"

Chart.XAxis.ReverseSeriesPositions= True

'populate data
Dim s1 As Series = New Series()
s1.Name = "2018"
s1.YAxis = Chart.YAxis
s1.YAxis.JsID = "y2018"
s1.DefaultElement.Color = Chart.Palette(2)
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck")

Dim el As Element = New Element()
el.Name = "North America"
el.YValue = 2.8
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 0.3
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =1.4
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "2019"
s1.YAxis = y2019
s1.DefaultElement.Color = Chart.Palette(2)
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck")

el = New Element()
el.Name = "North America"
el.YValue = 3.3
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 0.8
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =1.7
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "2020"
s1.YAxis = y2020
s1.DefaultElement.Color = Chart.Palette(2)
s1.DefaultElement.CustomAttributes.Add("model", "Heavy Truck")

el = New Element()
el.Name = "North America"
el.YValue = 3.6
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 0.9
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =2
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

'Light Truck
s1 = New Series()
s1.Name = "2018"
s1.YAxis = Chart.YAxis
s1.DefaultElement.Color = Chart.Palette(1)
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck")

el = New Element()
el.Name = "North America"
el.YValue = 4.3
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 2.8
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =5.4
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "2019"
s1.YAxis = y2019
s1.DefaultElement.Color = Chart.Palette(1)
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck")

el = New Element()
el.Name = "North America"
el.YValue = 4.3
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 2.8
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =5.4
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

s1 = New Series()
s1.Name = "2020"
s1.YAxis = y2020
s1.DefaultElement.Color = Chart.Palette(1)
s1.DefaultElement.CustomAttributes.Add("model", "Light Truck")

el = New Element()
el.Name = "North America"
el.YValue = 4.4
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 2.4
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =6.6
s1.Elements.Add(el)

Chart.SeriesCollection.Add(s1)

'Car
s1 = New Series()
s1.Name = "2018"
s1.YAxis = Chart.YAxis
s1.DefaultElement.Color = Chart.Palette(0)
s1.DefaultElement.LabelTemplate = "%seriesName"
s1.DefaultElement.CustomAttributes.Add("model", "Car")

el = New Element()
el.Name = "North America"
el.YValue =12.9
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 6.1
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =23
s1.Elements.Add(el)

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

s1 = New Series()
s1.Name = "2019"
s1.YAxis = y2019
s1.DefaultElement.Color = Chart.Palette(0)
s1.DefaultElement.LabelTemplate = "%seriesName"
s1.DefaultElement.CustomAttributes.Add("model", "Car")

el = New Element()
el.Name = "North America"
el.YValue = 11.3
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 7
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =25.5
s1.Elements.Add(el)

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

s1 = New Series()
s1.Name = "2020"
s1.YAxis = y2020
s1.DefaultElement.Color = Chart.Palette(0)
s1.DefaultElement.LabelTemplate = "%seriesName"
s1.DefaultElement.CustomAttributes.Add("model", "Car")

el = New Element()
el.Name = "North America"
el.YValue = 10.4
s1.Elements.Add(el)

el = New Element()
el.Name = "Europe"
el.YValue = 5.7
s1.Elements.Add(el)

el = New Element()
el.Name = "Asia"
el.YValue =20.3
s1.Elements.Add(el)

s1.DefaultElement.SmartLabel.Color = Color.White
s1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far
s1.DefaultElement.ShowValue = True
Chart.SeriesCollection.Add(s1)
Chart.JS.Settings.Add("series.0.yAxis", "y2018")
Chart.JS.Settings.Add("series.1.yAxis", "y2019")
Chart.JS.Settings.Add("series.2.yAxis", "y2020")
Chart.JS.Settings.Add("series.3.yAxis", "y2018")
Chart.JS.Settings.Add("series.4.yAxis", "y2019")
Chart.JS.Settings.Add("series.5.yAxis", "y2020")
Chart.JS.Settings.Add("series.6.yAxis", "y2018")
Chart.JS.Settings.Add("series.7.yAxis", "y2019")
Chart.JS.Settings.Add("series.8.yAxis", "y2020")
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>