<%@ 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 a scatter chart dashboard including column, and area charts.
setChart1();
setChart2();
setChart3();
}
void setChart1()
{
Chart1.Size = "840x350";
Chart1.Title = "Year of construction vs square footage of a home";
Chart1.TempDirectory = "temp";
Chart1.Debug = true;

Chart1.DefaultSeries.Type = SeriesType.Marker;
Chart1.DefaultElement.ToolTip = "Built <b>%xValue</b> - <b>%yValue sf</b><br>Price: <b>{%zValue:c0}</b>";
Chart1.DefaultElement.Transparency = 30;
Chart1.DefaultElement.Marker.Size = 12;
Chart1.DefaultElement.Outline.Visible = false;
Chart1.LegendBox.ClearColors();
Chart1.LegendBox.Header.Label.Text = "Price";
Chart1.LegendBox.Header.Label.Font = new Font("Arial", 10, FontStyle.Bold);
Chart1.Mentor = false;

Chart1.YAxis.Label.Text = "Square footage";
Chart1.YAxis.AlternateGridBackground.Color = Color.Transparent;

// Enable JSCharting
Chart1.JS.Enabled = true;
Chart1.JS.Settings.Add("palette.colorBar_axis_formatString", "c0");

DataEngine de = new DataEngine();
de.ChartObject = Chart1; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv";
de.DataFields = "xdatetime=yr_built,yAxis=sqft_living,zAxis=price";//cvs must have header
SeriesCollection sc = de.GetSeries();
Chart1.Palette = new Color[] { ColorTranslator.FromHtml("#edf8b0"), ColorTranslator.FromHtml("#c7e9b4"), ColorTranslator.FromHtml("#7fcdbb"), ColorTranslator.FromHtml("#41b6c3"), ColorTranslator.FromHtml("#1d91c0"), ColorTranslator.FromHtml("#225ea8"), ColorTranslator.FromHtml("#253494"), ColorTranslator.FromHtml("#081d58") };
Chart1.SmartPalette = sc[0].GetSmartPalette(ElementValue.ZValue, Chart1.Palette);
Chart1.SeriesCollection.Add(sc);
}
void setChart2()
{
Chart2.Size = "390x250";
Chart2.Title = "House construction by year";
Chart2.TempDirectory = "temp";
Chart2.Debug = false;
Chart2.Palette = new Color[] { Color.FromArgb(60, 133, 177)};

Chart2.DefaultSeries.Type = SeriesType.Column;
Chart2.ToolTipTemplate = "<b>%xValue</b>: %points";
Chart2.DefaultSeries.DefaultElement.ToolTip = " %yValue";
Chart2.JS.Settings.Add("xAxis_crosshair_enabled", "true");
Chart2.LegendBox.Visible = false;
Chart2.Mentor = false;

Chart2.XAxis.FormatString = "d";
Chart2.YAxis.AlternateGridBackground.Color = Color.Transparent;

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

DataEngine de = new DataEngine();
de.ChartObject = Chart2; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv";
de.DataFields = "xValue=yr_built";//cvs must have header

SeriesCollection sc = de.GetSeries();
Series calculatedSeries = new Series();
double currentYear = 0;
int index = -1;
for (int el = 0; el < sc[0].Elements.Count; el++)
{
if (currentYear == sc[0].Elements[el].XValue)
{
calculatedSeries.Elements[index].YValue++;
}
else
{
index++;
Element newElement = new Element();
currentYear = newElement.XValue = sc[0].Elements[el].XValue;
newElement.YValue = 1;
calculatedSeries.Elements.Add(newElement);

}
}
Chart2.SeriesCollection.Add(calculatedSeries);
}
void setChart3()
{
Chart3.Size = "390x250";
Chart3.Title = "Number of houses by square footage";
Chart3.TempDirectory = "temp";
Chart3.Debug = false;

Chart3.DefaultSeries.Type = SeriesType.AreaLine;
Chart3.ToolTipTemplate = "%points %xValue sf. home(s)";
Chart3.DefaultElement.ToolTip = "<b>%yValue</b>";
Chart3.DefaultElement.Transparency = 30;
Chart3.DefaultElement.Marker.Visible = false;
Chart3.JS.Settings.Add("defaultSeries_states_hover_line_width", "1");
Chart3.JS.Settings.Add("xAxis_crosshair_enabled", "true");
Chart3.LegendBox.Visible = false;
Chart3.Mentor = false;
Chart3.YAxis.AlternateGridBackground.Color = Color.Transparent;
Chart3.Palette = new Color[] { Color.FromArgb(60, 133, 177)};
// Enable JSCharting
Chart3.JS.Enabled = true;

DataEngine de = new DataEngine();
de.ChartObject = Chart3; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv";
de.DataFields = "xValue=sqft_living,";//cvs must have header
SeriesCollection sc = de.GetSeries();
Series calculatedSeries = new Series();
double currentSqft = 0;
int index = -1;
for (int el = 0; el < sc[0].Elements.Count; el++)
{
if (currentSqft == sc[0].Elements[el].XValue)
{
calculatedSeries.Elements[index].YValue++;
}
else
{
index++;
Element newElement = new Element();
currentSqft = newElement.XValue = sc[0].Elements[el].XValue;
newElement.YValue = 1;
calculatedSeries.Elements.Add(newElement);

}
}
Chart3.SeriesCollection.Add(calculatedSeries);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.mainWrapper
{
width: 840px;
height: 700px;
background: white;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
}
#Chart1
{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 840px;
height: 340px;
}
#Chart2
{
position: absolute;
background: white;
margin-top: 350px;
margin-left: 20px;
width: 390px;
height: 350px;
}
#Chart3
{
position: absolute;
background: white;
margin-top: 350px;
margin-left: 410px;
width: 390px;
height: 350px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<dnc:Chart ID="Chart1" runat="server" />
<dnc:Chart ID="Chart2" runat="server" />
<dnc:Chart ID="Chart3" 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 a scatter chart dashboard including column, and area charts.
setChart1()
setChart2()
setChart3()
End Sub
Sub setChart1()
Chart1.Size = "840x350"
Chart1.Title = "Year of construction vs square footage of a home"
Chart1.TempDirectory = "temp"
Chart1.Debug = True

Chart1.DefaultSeries.Type = SeriesType.Marker
Chart1.DefaultElement.ToolTip = "Built <b>%xValue</b> - <b>%yValue sf</b><br>Price: <b>{%zValue:c0}</b>"
Chart1.DefaultElement.Transparency = 30
Chart1.DefaultElement.Marker.Size = 12
Chart1.DefaultElement.Outline.Width = 0
Chart1.JS.Settings.Add("defaultPoint.marker.outline_width", "0")
Chart1.LegendBox.ClearColors()
Chart1.LegendBox.Header.Label.Text = "Price"
Chart1.LegendBox.Header.Label.Font = New Font("Arial", 10, FontStyle.Bold)
Chart1.Mentor = False

Chart1.YAxis.Label.Text = "Square footage"
Chart1.YAxis.AlternateGridBackground.Color = Color.Transparent

' Enable JSCharting
Chart1.JS.Enabled = True
Chart1.JS.Settings.Add("palette.colorBar_axis_formatString", "c0")

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart1 ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv"
de.DataFields = "xdatetime=yr_built,yAxis=sqft_living,zAxis=price" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Chart1.Palette = New Color() { ColorTranslator.FromHtml("#edf8b0"), ColorTranslator.FromHtml("#c7e9b4"), ColorTranslator.FromHtml("#7fcdbb"), ColorTranslator.FromHtml("#41b6c3"), ColorTranslator.FromHtml("#1d91c0"), ColorTranslator.FromHtml("#225ea8"), ColorTranslator.FromHtml("#253494"), ColorTranslator.FromHtml("#081d58") }
Chart1.SmartPalette = sc(0).GetSmartPalette(ElementValue.ZValue, Chart1.Palette)
Chart1.SeriesCollection.Add(sc)
End Sub
Sub setChart2()
Chart2.Size = "390x250"
Chart2.Title = "House construction by year"
Chart2.TempDirectory = "temp"
Chart2.Debug = False
Chart2.Palette = New Color() { Color.FromArgb(60, 133, 177)}

Chart2.DefaultSeries.Type = SeriesType.Column
Chart2.ToolTipTemplate = "<b>%xValue</b>: %points"
Chart2.DefaultSeries.DefaultElement.ToolTip = " %yValue"
Chart2.JS.Settings.Add("xAxis_crosshair_enabled", "true")
Chart2.LegendBox.Visible = False
Chart2.Mentor = False

Chart2.XAxis.FormatString = "d"
Chart2.YAxis.AlternateGridBackground.Color = Color.Transparent

' Enable JSCharting
Chart2.JS.Enabled = True

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart2 ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv"
de.DataFields = "xValue=yr_built" 'cvs must have header

Dim sc As SeriesCollection = de.GetSeries()
Dim calculatedSeries As Series = New Series()
Dim currentYear As Double = 0
Dim index As Integer = -1
For el As Integer = 0 To sc(0).Elements.Count - 1
If currentYear = sc(0).Elements(el).XValue Then
calculatedSeries.Elements(index).YValue += 1
Else
index += 1
Dim newElement As Element = New Element()
newElement.XValue = sc(0).Elements(el).XValue
currentYear = newElement.XValue
newElement.YValue = 1
calculatedSeries.Elements.Add(newElement)

End If
Next el
Chart2.SeriesCollection.Add(calculatedSeries)
End Sub
Sub setChart3()
Chart3.Size = "390x250"
Chart3.Title = "Number of houses by square footage"
Chart3.TempDirectory = "temp"
Chart3.Debug = False

Chart3.DefaultSeries.Type = SeriesType.AreaLine
Chart3.ToolTipTemplate = "%points %xValue sf. home(s)"
Chart3.DefaultElement.ToolTip = "<b>%yValue</b>"
Chart3.DefaultElement.Transparency = 30
Chart3.DefaultElement.Marker.Visible = False
Chart3.JS.Settings.Add("defaultSeries_states_hover_line_width", "1")
Chart3.JS.Settings.Add("xAxis_crosshair_enabled", "true")
Chart3.LegendBox.Visible = False
Chart3.Mentor = False
Chart3.YAxis.AlternateGridBackground.Color = Color.Transparent
Chart3.Palette = New Color() { Color.FromArgb(60, 133, 177)}
' Enable JSCharting
Chart3.JS.Enabled = True

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart3 ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/houseSales.csv"
de.DataFields = "xValue=sqft_living," 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Dim calculatedSeries As Series = New Series()
Dim currentSqft As Double = 0
Dim index As Integer = -1
For el As Integer = 0 To sc(0).Elements.Count - 1
If currentSqft = sc(0).Elements(el).XValue Then
calculatedSeries.Elements(index).YValue += 1
Else
index += 1
Dim newElement As Element = New Element()
newElement.XValue = sc(0).Elements(el).XValue
currentSqft = newElement.XValue
newElement.YValue = 1
calculatedSeries.Elements.Add(newElement)

End If
Next el
Chart3.SeriesCollection.Add(calculatedSeries)
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.mainWrapper
{
width: 840px;
height: 700px;
background: white;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
}
#Chart1
{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 840px;
height: 340px;
}
#Chart2
{
position: absolute;
background: white;
margin-top: 350px;
margin-left: 20px;
width: 390px;
height: 350px;
}
#Chart3
{
position: absolute;
background: white;
margin-top: 350px;
margin-left: 410px;
width: 390px;
height: 350px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<dnc:Chart ID="Chart1" runat="server" />
<dnc:Chart ID="Chart2" runat="server" />
<dnc:Chart ID="Chart3" runat="server" />
</div>
</body>
</html>