<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates Multiple line charts with muted series.
setChartDefault(ChartApple);
setChartDefault(ChartSamsung);
setChartDefault(ChartAmazon);
setChartDefault(ChartFoxconn);

//Revenue
DataEngine de = new DataEngine();
de.Data = "./../../data/resources/top4LargestCompanies.csv";
de.DataFields = "xdatetime=year,yAxis=revenue,splitby=company";//cvs must have header
SeriesCollection sc = de.GetSeries();
setChartApple(sc, true);
setChartSamsung(sc, true);
setChartAmazon(sc, true);
setChartFoxconn(sc, true);

//Net income
de = new DataEngine();
de.Data = "./../../data/resources/top4LargestCompanies.csv";
de.DataFields = "xdatetime=year,yAxis=net_income,splitby=company";//cvs must have header
sc = de.GetSeries();
setChartApple(sc, false);
setChartSamsung(sc,false);
setChartAmazon(sc, false);
setChartFoxconn(sc,false);
}
void setChartApple(SeriesCollection seriesCol, bool isRevenue)
{
if (isRevenue)
ChartApple.TitleBox.Label.Text = "Apple Inc.";
//set the first and last elements
for (int s = 0; s < seriesCol.Count; s++)
{
seriesCol[s].Elements[0].Marker.Type = ElementMarkerType.Circle;
seriesCol[s].Elements[0].Marker.Size= 7;
seriesCol[s].Elements[0].Marker.Visible= true;
ElementCollection ec = seriesCol[s].GetActiveElements();
int c = ec.Count;
ec[c-1].Marker.Type = ElementMarkerType.Circle;
ec[c-1].Marker.Size = 7;
ec[c-1].Marker.Visible = true;
}
SeriesCollection sc = seriesCol.Clone();
for(int s=0;s<sc.Count;s++)
{
switch (sc[s].Name)
{
case "Apple Inc.":
if (isRevenue)
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color = sc[s].Line.Color = ColorTranslator.FromHtml("#FE6535");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>";
sc[s].Elements[0].SmartLabel.Text = "Revenue";
sc[s].Elements[0].ShowValue = true;
ChartApple.JS.Settings.Add("series."+s+".mouseTracking_enabled", "true");
}
else
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color = sc[s].Line.Color = ColorTranslator.FromHtml("#049DFF");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>";
sc[s].Elements[0].SmartLabel.Text = "Net Income";
sc[s].Elements[0].ShowValue = true;
ChartApple.JS.Settings.Add("series."+(4+s)+".mouseTracking_enabled", "true");
}
break;
default:
break;
}
}
ChartApple.SeriesCollection.Add(sc);
}
void setChartSamsung(SeriesCollection seriesCol, bool isRevenue)
{
if (isRevenue)
ChartSamsung.TitleBox.Label.Text = "Samsung Electronics";
SeriesCollection sc = seriesCol.Clone();
for(int s=0;s<sc.Count;s++)
{
switch (sc[s].Name)
{
case "Samsung Electronics":
if (isRevenue)
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color = sc[s].Line.Color = ColorTranslator.FromHtml("#FE6535");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>";
ChartSamsung.JS.Settings.Add("series."+s+".mouseTracking_enabled", "true");
}
else
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color = sc[s].Line.Color = ColorTranslator.FromHtml("#049DFF");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>";
ChartSamsung.JS.Settings.Add("series."+(4+s)+".mouseTracking_enabled", "true");
}
break;
default:
break;
}

}
ChartSamsung.SeriesCollection.Add(sc);
}
void setChartAmazon(SeriesCollection seriesCol, bool isRevenue)
{
if (isRevenue)
ChartAmazon.TitleBox.Label.Text = "Amazon";
SeriesCollection sc = seriesCol.Clone();
for(int s=0;s<sc.Count;s++)
{
switch (sc[s].Name)
{
case "Amazon":
if (isRevenue)
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color =sc[s].Line.Color = ColorTranslator.FromHtml("#FE6535");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>";
ChartAmazon.JS.Settings.Add("series."+s+".mouseTracking_enabled", "true");
}
else
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color =sc[s].Line.Color = ColorTranslator.FromHtml("#049DFF");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>";
ChartAmazon.JS.Settings.Add("series."+(4+s)+".mouseTracking_enabled", "true");
}
break;
default:
break;
}

}
ChartAmazon.SeriesCollection.Add(sc);
}
void setChartFoxconn(SeriesCollection seriesCol, bool isRevenue)
{
if (isRevenue)
ChartFoxconn.TitleBox.Label.Text = "Foxconn";
SeriesCollection sc = seriesCol.Clone();
for(int s=0;s<sc.Count;s++)
{
switch (sc[s].Name)
{
case "Foxconn":
if (isRevenue)
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color =sc[s].Line.Color = ColorTranslator.FromHtml("#FE6535");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>";
ChartFoxconn.JS.Settings.Add("series."+s+".mouseTracking_enabled", "true");
}
else
{
sc[s].DefaultElement.Color = sc[s].Elements[0].SmartLabel.Color = sc[s].DefaultElement.Marker.Color =sc[s].Line.Color = ColorTranslator.FromHtml("#049DFF");
sc[s].DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>";
ChartFoxconn.JS.Settings.Add("series."+(4+s)+".mouseTracking_enabled", "true");
}
break;
default:
break;
}

}
ChartFoxconn.SeriesCollection.Add(sc);
}
void setChartDefault(Chart chart)
{
chart.Type = ChartType.Combo;
chart.DefaultSeries.Type = SeriesType.Spline;
chart.DefaultSeries.Line.Color = Color.LightGray;
chart.DefaultSeries.DefaultElement.Marker.Color = Color.LightGray;
chart.DefaultSeries.DefaultElement.Marker.Visible = false;
chart.DefaultSeries.DefaultElement.Marker.Size = 0;
chart.Width = 220;
chart.Height = 200;
chart.TempDirectory = "temp";
chart.Debug = false;
chart.ChartArea.ClearColors();

chart.TitleBox.Label.Font = new Font("Tahoma", 9, FontStyle.Bold);
chart.YAxis.Interval =150000;
chart.YAxis.Scale = Scale.Normal;
//chart.XAxis.TimeInterval = TimeInterval.Year;
//chart.XAxis.Scale = Scale.Time;
chart.XAxis.FormatString = "yyyy";
chart.JS.Settings.Add("xAxis.scale.type", "time");
chart.JS.Settings.Add("xAxis.scale.interval_unit", "year");
chart.JS.Settings.Add("xAxis.scale.range_padding", "0.1");
chart.LegendBox.Visible = false;

//JS settings
chart.JS.Enabled = true;
chart.JS.Settings.Add("xAxis.crosshair.enabled", "true");
chart.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false");
chart.JS.Settings.Add("xAxis.crosshair.gridLine.visible:", "true");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div id="mainWrapper" style="width: 100%;display:flex;flex-wrap:wrap;justify-content:center">
<h2 style="width: 100%;text-align:center;font-family: tahoma, geneva, sans-serif;">
Top 4 Largest Technology Companies
</h2>
<dnc:Chart ID="ChartApple" runat="server"/>
<dnc:Chart ID="ChartSamsung" runat="server"/>
<dnc:Chart ID="ChartAmazon" runat="server" />
<dnc:Chart ID="ChartFoxconn" runat="server"/>
</div>

</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates Multiple line charts with muted series.
setChartDefault(ChartApple)
setChartDefault(ChartSamsung)
setChartDefault(ChartAmazon)
setChartDefault(ChartFoxconn)

'Revenue
Dim de As DataEngine = New DataEngine()
de.Data = "./../../data/resources/top4LargestCompanies.csv"
de.DataFields = "xdatetime=year,yAxis=revenue,splitby=company" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
setChartApple(sc, True)
setChartSamsung(sc, True)
setChartAmazon(sc, True)
setChartFoxconn(sc, True)

'Net income
de = New DataEngine()
de.Data = "./../../data/resources/top4LargestCompanies.csv"
de.DataFields = "xdatetime=year,yAxis=net_income,splitby=company" 'cvs must have header
sc = de.GetSeries()
setChartApple(sc, False)
setChartSamsung(sc,False)
setChartAmazon(sc, False)
setChartFoxconn(sc,False)
End Sub
Sub setChartApple(ByVal seriesCol As SeriesCollection, ByVal isRevenue As Boolean)
If isRevenue Then
ChartApple.TitleBox.Label.Text = "Apple Inc."
End If
'set the first and last elements
For s As Integer = 0 To seriesCol.Count - 1
seriesCol(s).Elements(0).Marker.Type = ElementMarkerType.Circle
seriesCol(s).Elements(0).Marker.Size= 7
seriesCol(s).Elements(0).Marker.Visible= True
Dim ec As ElementCollection = seriesCol(s).GetActiveElements()
Dim c As Integer = ec.Count
ec(c-1).Marker.Type = ElementMarkerType.Circle
ec(c-1).Marker.Size = 7
ec(c-1).Marker.Visible = True
Next s
Dim sc As SeriesCollection = seriesCol.Clone()
For s As Integer = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Apple Inc."
If isRevenue Then
sc(s).Line.Color = ColorTranslator.FromHtml("#FE6535")
sc(s).DefaultElement.Marker.Color = sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>"
sc(s).Elements(0).SmartLabel.Text = "Revenue"
sc(s).Elements(0).ShowValue = True
ChartApple.JS.Settings.Add("series." & s & ".mouseTracking_enabled", "true")
Else
sc(s).Line.Color = ColorTranslator.FromHtml("#049DFF")
sc(s).DefaultElement.Marker.Color = sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>"
sc(s).Elements(0).SmartLabel.Text = "Net Income"
sc(s).Elements(0).ShowValue = True
ChartApple.JS.Settings.Add("series." & (4+s) & ".mouseTracking_enabled", "true")
End If
Case Else
End Select
Next s
ChartApple.SeriesCollection.Add(sc)
End Sub
Sub setChartSamsung(ByVal seriesCol As SeriesCollection, ByVal isRevenue As Boolean)
If isRevenue Then
ChartSamsung.TitleBox.Label.Text = "Samsung Electronics"
End If
Dim sc As SeriesCollection = seriesCol.Clone()
For s As Integer = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Samsung Electronics"
If isRevenue Then
sc(s).Line.Color = ColorTranslator.FromHtml("#FE6535")
sc(s).DefaultElement.Marker.Color = sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>"
ChartSamsung.JS.Settings.Add("series." & s & ".mouseTracking_enabled", "true")
Else
sc(s).Line.Color = ColorTranslator.FromHtml("#049DFF")
sc(s).DefaultElement.Marker.Color = sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>"
ChartSamsung.JS.Settings.Add("series." & (4+s) & ".mouseTracking_enabled", "true")
End If
Case Else
End Select

Next s
ChartSamsung.SeriesCollection.Add(sc)
End Sub
Sub setChartAmazon(ByVal seriesCol As SeriesCollection, ByVal isRevenue As Boolean)
If isRevenue Then
ChartAmazon.TitleBox.Label.Text = "Amazon"
End If
Dim sc As SeriesCollection = seriesCol.Clone()
For s As Integer = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Amazon"
If isRevenue Then
sc(s).Line.Color = ColorTranslator.FromHtml("#FE6535")
sc(s).DefaultElement.Marker.Color =sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>"
ChartAmazon.JS.Settings.Add("series." & s & ".mouseTracking_enabled", "true")
Else
sc(s).Line.Color = ColorTranslator.FromHtml("#049DFF")
sc(s).DefaultElement.Marker.Color =sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>"
ChartAmazon.JS.Settings.Add("series." & (4+s) & ".mouseTracking_enabled", "true")
End If
Case Else
End Select

Next s
ChartAmazon.SeriesCollection.Add(sc)
End Sub
Sub setChartFoxconn(ByVal seriesCol As SeriesCollection, ByVal isRevenue As Boolean)
If isRevenue Then
ChartFoxconn.TitleBox.Label.Text = "Foxconn"
End If
Dim sc As SeriesCollection = seriesCol.Clone()
For s As Integer = 0 To sc.Count - 1
Select Case sc(s).Name
Case "Foxconn"
If isRevenue Then
sc(s).Line.Color = ColorTranslator.FromHtml("#FE6535")
sc(s).DefaultElement.Marker.Color =sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}</b>"
ChartFoxconn.JS.Settings.Add("series." & s & ".mouseTracking_enabled", "true")
Else
sc(s).Line.Color = ColorTranslator.FromHtml("#049DFF")
sc(s).DefaultElement.Marker.Color =sc(s).Line.Color
sc(s).Elements(0).SmartLabel.Color = sc(s).DefaultElement.Marker.Color
sc(s).DefaultElement.Color = sc(s).Elements(0).SmartLabel.Color
sc(s).DefaultElement.ToolTip = "%icon <b>{%yValue:c0}B</b>"
ChartFoxconn.JS.Settings.Add("series." & (4+s) & ".mouseTracking_enabled", "true")
End If
Case Else
End Select

Next s
ChartFoxconn.SeriesCollection.Add(sc)
End Sub
Sub setChartDefault(ByVal chart As Chart)
chart.Type = ChartType.Combo
chart.DefaultSeries.Type = SeriesType.Spline
chart.DefaultSeries.Line.Color = Color.LightGray
chart.DefaultSeries.DefaultElement.Marker.Color = Color.LightGray
chart.DefaultSeries.DefaultElement.Marker.Visible = False
chart.DefaultSeries.DefaultElement.Marker.Size = 0
chart.Width = 220
chart.Height = 200
chart.TempDirectory = "temp"
chart.Debug = False
chart.ChartArea.ClearColors()

chart.TitleBox.Label.Font = New Font("Tahoma", 9, FontStyle.Bold)
chart.YAxis.Interval =150000
chart.YAxis.Scale = Scale.Normal
'chart.XAxis.TimeInterval = TimeInterval.Year;
'chart.XAxis.Scale = Scale.Time;
chart.XAxis.FormatString = "yyyy"
chart.JS.Settings.Add("xAxis.scale.type", "time")
chart.JS.Settings.Add("xAxis.scale.interval_unit", "year")
chart.JS.Settings.Add("xAxis.scale.range_padding", "0.1")
chart.LegendBox.Visible = False

'JS settings
chart.JS.Enabled = True
chart.JS.Settings.Add("xAxis.crosshair.enabled", "true")
chart.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false")
chart.JS.Settings.Add("xAxis.crosshair.gridLine.visible:", "true")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div id="mainWrapper" style="width: 100%;display:flex;flex-wrap:wrap;justify-content:center">
<h2 style="width: 100%;text-align:center;font-family: tahoma, geneva, sans-serif;">
Top 4 Largest Technology Companies
</h2>
<dnc:Chart ID="ChartApple" runat="server"/>
<dnc:Chart ID="ChartSamsung" runat="server"/>
<dnc:Chart ID="ChartAmazon" runat="server" />
<dnc:Chart ID="ChartFoxconn" runat="server"/>
</div>

</body>
</html>