Gallery
JS ClusteredStackedColumnsCSV
<%@ 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 from CSV data.
// 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.TopRight;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Mac", "", ColorTranslator.FromHtml("#263238")));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("iPad", "", ColorTranslator.FromHtml("#B0BEC5")));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("iPhone", "", ColorTranslator.FromHtml("#0088ca")));
Chart.DefaultElement.Outline.Width = 0;
Chart.Palette = new Color[3] { ColorTranslator.FromHtml("#263238"), ColorTranslator.FromHtml("#B0BEC5"), ColorTranslator.FromHtml("#0088ca") };
// Enable JSCharting
Chart.JS.Enabled = true;
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
// Set the title.
Chart.TitleBox.Label.Text = "Apple Sales by Product";
Chart.DefaultElement.ToolTip = "%xValue %seriesName<br>%name Sales: <b>%yvalueM</b>";
Chart.XAxis.Interval = 1;
Chart.XAxis.Minimum = 2016;
Chart.XAxis.Maximum = 2020;
//Set Axis
Chart.YAxis.Maximum = 120;
Chart.YAxis.JsID = "yQ1";
Chart.YAxis.Label.Text = "Millions";
Chart.YAxis.Scale = Scale.Stacked;
Chart.YAxis.Line.Visible = false;
Axis yQ2 = Chart.YAxis.Calculate("");
yQ2.JsID = "yQ2";
yQ2.Scale = Scale.Stacked;
yQ2.ClearValues = true;
yQ2.Line.Visible = false;
Chart.AxisCollection.Add(yQ2);
Axis yQ3 = Chart.YAxis.Calculate("");
yQ3.JsID = "yQ3";
yQ3.Scale = Scale.Stacked;
yQ3.ClearValues = true;
yQ3.Line.Visible = false;
Chart.AxisCollection.Add(yQ3);
Axis yQ4 = Chart.YAxis.Calculate("");
yQ4.JsID = "yQ4";
yQ4.Scale = Scale.Stacked;
yQ4.ClearValues = true;
yQ4.Line.Visible = false;
Chart.AxisCollection.Add(yQ4);
//Get iPhone data
DataEngine deiPhone = new DataEngine();
deiPhone.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
deiPhone.Data = "./../../data/resources/appleProductsSales3.csv";
deiPhone.DataFields = "xAxis=year,yAxis=iPhone,splitBy=quarter";//,yAxis=iPhone,yAxis=iPhone,splitBy=year,name=quarter";
SeriesCollection sc = deiPhone.GetSeries();
int s = 0;
for (s = 0; s < sc.Count; s++)
{
switch (sc[s].Name)
{
case "Q1":
sc[s].YAxis = Chart.YAxis;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q2":
sc[s].YAxis = yQ2;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q3":
sc[s].YAxis = yQ3;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q4":
sc[s].YAxis = yQ4;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
}
for (int el = 0; el < sc[s].Elements.Count; el++)
{
sc[s].Elements[el].Name = "iPhone";
sc[s].DefaultElement.Color = ColorTranslator.FromHtml("#0088ca");
sc[s].DefaultElement.SmartLabel.Color = Color.White;
sc[s].DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far;
sc[s].DefaultElement.ShowValue = true;
sc[s].DefaultElement.LabelTemplate = "%seriesName";
}
}
Chart.SeriesCollection.Add(sc);
//Get iPad data
DataEngine deiPad = new DataEngine();
deiPad.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
deiPad.Data = "./../../data/resources/appleProductsSales3.csv";
deiPad.DataFields = "xAxis=year,yAxis=iPad,splitBy=quarter";//,yAxis=iPad,yAxis=iPhone,splitBy=year,name=quarter";
sc = deiPad.GetSeries();
for (s = 0; s < sc.Count; s++)
{
switch (sc[s].Name)
{
case "Q1":
sc[s].YAxis = Chart.YAxis;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q2":
sc[s].YAxis = yQ2;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q3":
sc[s].YAxis = yQ3;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q4":
sc[s].YAxis = yQ4;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
}
for (int el = 0; el < sc[s].Elements.Count; el++)
{
sc[s].Elements[el].Name = "iPad";
sc[s].DefaultElement.Color = ColorTranslator.FromHtml("#B0BEC5");
}
}
Chart.SeriesCollection.Add(sc);
//Get Mac data
DataEngine deMac = new DataEngine();
deMac.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
deMac.Data = "./../../data/resources/appleProductsSales3.csv";
deMac.DataFields = "xAxis=year,yAxis=Mac,splitBy=quarter";//,yAxis=iPad,yAxis=iPhone,splitBy=year,name=quarter";
sc = deMac.GetSeries();
for (s = 0; s < sc.Count; s++)
{
switch (sc[s].Name)
{
case "Q1":
sc[s].YAxis = Chart.YAxis;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q2":
sc[s].YAxis = yQ2;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q3":
sc[s].YAxis = yQ3;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
case "Q4":
sc[s].YAxis = yQ4;
sc[s].YAxis.JsID = "y" + sc[s].Name;
break;
}
for (int el = 0; el < sc[s].Elements.Count; el++)
{
sc[s].Elements[el].Name = "Mac";
sc[s].DefaultElement.Color = ColorTranslator.FromHtml("#263238");
}
}
Chart.SeriesCollection.Add(sc);
Chart.JS.Settings.Add("series.0.yAxis", "yQ1");
Chart.JS.Settings.Add("series.1.yAxis", "yQ2");
Chart.JS.Settings.Add("series.2.yAxis", "yQ3");
Chart.JS.Settings.Add("series.3.yAxis", "yQ4");
Chart.JS.Settings.Add("series.4.yAxis", "yQ1");
Chart.JS.Settings.Add("series.5.yAxis", "yQ2");
Chart.JS.Settings.Add("series.6.yAxis", "yQ3");
Chart.JS.Settings.Add("series.7.yAxis", "yQ4");
Chart.JS.Settings.Add("series.8.yAxis", "yQ1");
Chart.JS.Settings.Add("series.9.yAxis", "yQ2");
Chart.JS.Settings.Add("series.10.yAxis","yQ3");
Chart.JS.Settings.Add("series.11.yAxis","yQ4");
}
</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 from CSV data.
' 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.TopRight
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Mac", "", ColorTranslator.FromHtml("#263238")))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("iPad", "", ColorTranslator.FromHtml("#B0BEC5")))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("iPhone", "", ColorTranslator.FromHtml("#0088ca")))
Chart.DefaultElement.Outline.Width = 0
Chart.Palette = New Color(2) { ColorTranslator.FromHtml("#263238"), ColorTranslator.FromHtml("#B0BEC5"), ColorTranslator.FromHtml("#0088ca") }
' Enable JSCharting
Chart.JS.Enabled = True
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
' Set the title.
Chart.TitleBox.Label.Text = "Apple Sales by Product"
Chart.DefaultElement.ToolTip = "%xValue %seriesName<br>%name Sales: <b>%yvalueM</b>"
Chart.XAxis.Interval = 1
Chart.XAxis.Minimum = 2016
Chart.XAxis.Maximum = 2020
'Set Axis
Chart.YAxis.Maximum = 120
Chart.YAxis.JsID = "yQ1"
Chart.YAxis.Label.Text = "Millions"
Chart.YAxis.Scale = Scale.Stacked
Chart.YAxis.Line.Visible = False
Dim yQ2 As Axis = Chart.YAxis.Calculate("")
yQ2.JsID = "yQ2"
yQ2.Scale = Scale.Stacked
yQ2.ClearValues = True
yQ2.Line.Visible = False
Chart.AxisCollection.Add(yQ2)
Dim yQ3 As Axis = Chart.YAxis.Calculate("")
yQ3.JsID = "yQ3"
yQ3.Scale = Scale.Stacked
yQ3.ClearValues = True
yQ3.Line.Visible = False
Chart.AxisCollection.Add(yQ3)
Dim yQ4 As Axis = Chart.YAxis.Calculate("")
yQ4.JsID = "yQ4"
yQ4.Scale = Scale.Stacked
yQ4.ClearValues = True
yQ4.Line.Visible = False
Chart.AxisCollection.Add(yQ4)
'Get iPhone data
Dim deiPhone As DataEngine = New DataEngine()
deiPhone.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
deiPhone.Data = "./../../data/resources/appleProductsSales3.csv"
deiPhone.DataFields = "xAxis=year,yAxis=iPhone,splitBy=quarter" ',yAxis=iPhone,yAxis=iPhone,splitBy=year,name=quarter";
Dim sc As SeriesCollection = deiPhone.GetSeries()
Dim s As Integer = 0
For s = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Q1"
sc(s).YAxis = Chart.YAxis
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q2"
sc(s).YAxis = yQ2
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q3"
sc(s).YAxis = yQ3
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q4"
sc(s).YAxis = yQ4
sc(s).YAxis.JsID = "y" & sc(s).Name
End Select
For el As Integer = 0 To sc(s).Elements.Count - 1
sc(s).Elements(el).Name = "iPhone"
sc(s).DefaultElement.Color = ColorTranslator.FromHtml("#0088ca")
sc(s).DefaultElement.SmartLabel.Color = Color.White
sc(s).DefaultElement.SmartLabel.LineAlignment = StringAlignment.Far
sc(s).DefaultElement.ShowValue = True
sc(s).DefaultElement.LabelTemplate = "%seriesName"
Next el
Next s
Chart.SeriesCollection.Add(sc)
'Get iPad data
Dim deiPad As DataEngine = New DataEngine()
deiPad.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
deiPad.Data = "./../../data/resources/appleProductsSales3.csv"
deiPad.DataFields = "xAxis=year,yAxis=iPad,splitBy=quarter" ',yAxis=iPad,yAxis=iPhone,splitBy=year,name=quarter";
sc = deiPad.GetSeries()
For s = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Q1"
sc(s).YAxis = Chart.YAxis
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q2"
sc(s).YAxis = yQ2
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q3"
sc(s).YAxis = yQ3
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q4"
sc(s).YAxis = yQ4
sc(s).YAxis.JsID = "y" & sc(s).Name
End Select
For el As Integer = 0 To sc(s).Elements.Count - 1
sc(s).Elements(el).Name = "iPad"
sc(s).DefaultElement.Color = ColorTranslator.FromHtml("#B0BEC5")
Next el
Next s
Chart.SeriesCollection.Add(sc)
'Get Mac data
Dim deMac As DataEngine = New DataEngine()
deMac.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
deMac.Data = "./../../data/resources/appleProductsSales3.csv"
deMac.DataFields = "xAxis=year,yAxis=Mac,splitBy=quarter" ',yAxis=iPad,yAxis=iPhone,splitBy=year,name=quarter";
sc = deMac.GetSeries()
For s = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Q1"
sc(s).YAxis = Chart.YAxis
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q2"
sc(s).YAxis = yQ2
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q3"
sc(s).YAxis = yQ3
sc(s).YAxis.JsID = "y" & sc(s).Name
Case "Q4"
sc(s).YAxis = yQ4
sc(s).YAxis.JsID = "y" & sc(s).Name
End Select
For el As Integer = 0 To sc(s).Elements.Count - 1
sc(s).Elements(el).Name = "Mac"
sc(s).DefaultElement.Color = ColorTranslator.FromHtml("#263238")
Next el
Next s
Chart.SeriesCollection.Add(sc)
Chart.JS.Settings.Add("series.0.yAxis", "yQ1")
Chart.JS.Settings.Add("series.1.yAxis", "yQ2")
Chart.JS.Settings.Add("series.2.yAxis", "yQ3")
Chart.JS.Settings.Add("series.3.yAxis", "yQ4")
Chart.JS.Settings.Add("series.4.yAxis", "yQ1")
Chart.JS.Settings.Add("series.5.yAxis", "yQ2")
Chart.JS.Settings.Add("series.6.yAxis", "yQ3")
Chart.JS.Settings.Add("series.7.yAxis", "yQ4")
Chart.JS.Settings.Add("series.8.yAxis", "yQ1")
Chart.JS.Settings.Add("series.9.yAxis", "yQ2")
Chart.JS.Settings.Add("series.10.yAxis","yQ3")
Chart.JS.Settings.Add("series.11.yAxis","yQ4")
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>
- Sample FilenameJsClusteredStackedColumnsCSV.aspx
- Version10.3
- Uses DatabaseNo