<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using a number of charts in a dashboard scneario.

setDefaults(Chart1);
setChart1(Chart1);

setDefaults(Chart2);
setChart2(Chart2);

setDefaults(Chart3);
setChart3(Chart3);
setDefaults(Chart4);
setChart4(Chart4);
}

void setDefaults(Chart c)
{
c.TempDirectory = "temp";
c.Debug = false;
c.Width = 840;
c.Height = 240;
c.JS.Enabled = true;
c.ChartArea.ClearColors();
c.TitleBox.Label.Font = new Font("Arial", 20);
c.TitleBox.Label.Color = Color.FromArgb(97, 97, 97);
c.TitleBox.ClearColors();
c.XAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117);
c.YAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117);
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(217, 217, 217);

c.LegendBox.Visible = false;
c.JS.Buttons.EnableExportButton = false;
c.JS.Buttons.EnablePrintButton = false;

}

void setChart1(Chart c)
{

c.Type = ChartType.Gauges;
c.TitleBox.Label.Text = "Today";
//Rounded bars
c.ShadingEffectMode = ShadingEffectMode.Three;
c.Debug = true;

c.JS.Settings.Add("title.label.margin.left", "30");

c.XAxis.SpacingPercentage = 15;
c.DefaultAxis.OrientationAngle = -45;
c.DefaultAxis.SweepAngle = 270;
c.XAxis.DefaultTick.Label.Text = "";
c.DonutHoleSize = .7;

c.DefaultSeries.Type = SeriesType.Column;
c.DefaultSeries.DefaultElement.Color = Color.FromArgb(0, 131, 141);

//Steps
Series steps = new Series();
steps.Type = SeriesType.Column;
steps.Name = "Steps";
Element el = new Element();
el.YValue = 1577;
el.Name = "value";
dotnetCHARTING.Label label1 = new dotnetCHARTING.Label();
setChart1shLabel1(label1);
steps.ShapeLabels.Add(label1);
steps.ShapeLabels.Add(getChart1shLabel2("material/maps/directions-walk"));
steps.Elements.Add(el);

Axis aSteps = new Axis();
aSteps.Line.Width = 0;
aSteps.ClearValues = true;
aSteps.ScaleRange = new ScaleRange(0, 10000);
steps.YAxis = aSteps;
c.SeriesCollection.Add(steps);

//Active Time
Series active = new Series();
active.Type = SeriesType.Column;
active.Name = "Active Time";
el = new Element();
el.YValue = 26;
el.Name = "value";

active.ShapeLabels.Add(label1);
active.ShapeLabels.Add(getChart1shLabel2("material/device/access-time"));
active.Elements.Add(el);

Axis aActive = new Axis();
aActive.Line.Width = 0;
aActive.ClearValues = true;
aActive.ScaleRange = new ScaleRange(0, 180);
active.YAxis = aActive;
c.SeriesCollection.Add(active);

//Calories
Series calories = new Series();
calories.Type = SeriesType.Column;
calories.Name = "Calories";
el = new Element();
el.YValue = 838;
el.Name = "value";
calories.ShapeLabels.Add(label1);
calories.ShapeLabels.Add(getChart1shLabel2("material/social/whatshot"));
calories.Elements.Add(el);

Axis aCalories = new Axis();
aCalories.Line.Width = 0;
aCalories.ClearValues = true;
aCalories.ScaleRange = new ScaleRange(0, 5000);
calories.YAxis = aCalories;
c.SeriesCollection.Add(calories);

//Distance
Series distance = new Series();
distance.Type = SeriesType.Column;
distance.Name = "Distance";
el = new Element();
el.YValue = .68;
el.Name = "value";
distance.ShapeLabels.Add(label1);
distance.ShapeLabels.Add(getChart1shLabel2("material/maps/place"));

distance.Elements.Add(el);

Axis aDistance = new Axis();
aDistance.Line.Width = 0;
aDistance.ClearValues = true;
aDistance.ScaleRange = new ScaleRange(0, 10);
distance.YAxis = aDistance;
c.SeriesCollection.Add(distance);
}

void setChart1shLabel1(dotnetCHARTING.Label l)
{
l.Text = "js:\"<span style=\'font-size:18px\'><b>%name</b></span><br><span style=\'font-size:14px\'>%value</span>\"";
l.LineAlignment = StringAlignment.Center;
l.Alignment = StringAlignment.Far;
l.Offset = new Point(-88, 0);
l.Width = 55;
}


dotnetCHARTING.Label getChart1shLabel2(string iconName)
{
dotnetCHARTING.Label l = new dotnetCHARTING.Label();
l.Text = "js:\"<icon name=" + iconName + " size=36 fill=#757575>\"";
l.LineAlignment = StringAlignment.Center;
l.Alignment = StringAlignment.Center;
return l;
}

void setChart2(Chart c)
{
// Set the chart size.
c.Size = "340x300";

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

// Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp";

// Specify chart type.
c.Type = ChartType.Gauges;
c.ShadingEffectMode = ShadingEffectMode.Three;
c.DefaultSeries.GaugeType = GaugeType.Vertical;
c.DefaultSeries.GaugeLinearStyle = GaugeLinearStyle.Normal;

c.Debug = true;
c.LegendBox.Visible = false;

//Padding around the visual
c.ChartArea.Padding = 40;

//Set title
c.TitleBox.Label.Text = "Summary";
c.JS.Settings.Add("title.label.margin.left", "30");
c.JS.Settings.Add("title.label.margin.bottom", "10");


c.TitleBox.Position = TitleBoxPosition.Full;
c.TitleBox.Label.Alignment = StringAlignment.Near;

//Clear the boxes.
c.TitleBox.ClearColors();
c.ChartArea.ClearColors();

//Enable x grid lines
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230);
//Enable x axis tick labels.
c.XAxis.DefaultTick.Label.Text = "%value";
//Offset labels
c.XAxis.DefaultTick.Label.Offset = new Point(0, -20);
c.XAxis.Orientation = dotnetCHARTING.Orientation.Top;


//Hide y axis
c.YAxis.ClearValues = true;
c.YAxis.Line.Width = 0;

// Add the random data.
c.SeriesCollection.Add(getDataChart2());
}
SeriesCollection getDataChart2()
{
SeriesCollection SC = new SeriesCollection();
Series days = new Series();
days.Name = "Daily Steps";
days.DefaultElement.Color = Color.FromArgb(21, 145, 132);
Element e = new Element();
e.Name = "Mo";
e.YValue = 3516;
days.Elements.Add(e);

e = new Element();
e.Name = "Tu";
e.YValue = 6854;
days.Elements.Add(e);

e = new Element();
e.Name = "We";
e.YValue = 9461;
days.Elements.Add(e);
SC.Add(days);

e = new Element();
e.Name = "Th";
e.YValue = 7523;
days.Elements.Add(e);

e = new Element();
e.Name = "Fr";
e.YValue = 5256;
days.Elements.Add(e);

e = new Element();
e.Name = "Sa";
e.YValue = 2546;
days.Elements.Add(e);

e = new Element();
e.Name = "Su";
e.YValue = 3425;
days.Elements.Add(e);
return SC;
}
void setChart4(Chart c)
{
// Demonstrates Csv activity data calendar chart using a customized smartPalette.
// Enable JSCharting
c.JS.Enabled = true;
// Specify the JS only chart type.
c.Type = ChartType.Calendar;
c.JS.Calendar.Type = JsOptions.CalendarView.Week30Min;
c.JS.Calendar.Calculation = Calculation.Average;
c.JS.Data = "./../../data/resources/activityData.csv";

//Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp";

c.LegendBox.Template = "%name,%icon";
c.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
c.LegendBox.Padding = 2;
c.LegendBox.ClearColors();
c.DefaultSeries.LegendEntry.Visible = false;


c.SmartPalette = getSPChart4();
c.Palette = new Color[] {Color.FromArgb(0,137,123),Color.FromArgb(224,224,224),Color.FromArgb(255,160,0)};

c.XAxis.Interval = 2;
c.XAxis.DefaultTick.Label.Text = "js:function(v){return ((v%24)/2).toString()}";
c.XAxis.DefaultTick.GridLine.Width = 0;
c.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
c.XAxis.FormatString = "n0";
c.XAxis.ExtraTicks.Add(new AxisTick(0, "js:'<icon name=weather/moon size=18 fill=#14327f><br/>AM'"));
c.XAxis.ExtraTicks.Add(new AxisTick(24, "js:'<icon name=weather/sun size=24 fill=#e9b82e><br/>PM'"));
c.XAxis.ExtraTicks.Add(new AxisTick(24, "12"));

c.ChartArea.ClearColors();
c.DefaultSeries.DefaultElement.Outline.Width = 0;
c.DefaultElement.ToolTip = "{%date:date f}";
c.ShadingEffectMode = ShadingEffectMode.None;

}
SmartPalette getSPChart4()
{
SmartPalette sp = new SmartPalette();
SmartColor sc1 = new SmartColor(Color.FromArgb(0, 137, 123), new ScaleRange(0, .999), ElementValue.ZValue);
sc1.LegendEntry.Name = "Sleep";

SmartColor sc2 = new SmartColor(Color.FromArgb(37, 152, 140), new ScaleRange(1, 1.999), ElementValue.ZValue);
SmartColor sc3 = new SmartColor(Color.FromArgb(75, 166, 157), new ScaleRange(2, 2.999), ElementValue.ZValue);
SmartColor sc4 = new SmartColor(Color.FromArgb(112, 181, 174), new ScaleRange(3, 3.999), ElementValue.ZValue);
SmartColor sc5 = new SmartColor(Color.FromArgb(149, 195, 190), new ScaleRange(4, 4.999), ElementValue.ZValue);
SmartColor sc6 = new SmartColor(Color.FromArgb(187, 210, 207), new ScaleRange(5, 5.999), ElementValue.ZValue);
SmartColor sc7 = new SmartColor(Color.FromArgb(224, 224, 224), new ScaleRange(6, 6.999), ElementValue.ZValue);
sc7.LegendEntry.Name = "Inactive";

SmartColor sc9 = new SmartColor(Color.FromArgb(234, 203, 149), new ScaleRange(7, 7.999), ElementValue.ZValue);
sc9.LegendEntry.Name = "Active";
SmartColor sc10 = new SmartColor(Color.FromArgb(240, 192, 112), new ScaleRange(8, 8.999), ElementValue.ZValue);
SmartColor sc11 = new SmartColor(Color.FromArgb(245, 181, 75), new ScaleRange(9, 9.999), ElementValue.ZValue);
SmartColor sc12 = new SmartColor(Color.FromArgb(250, 171, 37), new ScaleRange(10, 10.999), ElementValue.ZValue);
SmartColor sc13 = new SmartColor(Color.FromArgb(225, 160, 0), new ScaleRange(11, 11.999), ElementValue.ZValue);
SmartColor sc14 = new SmartColor(Color.FromArgb(255, 169, 25), new ScaleRange(12, 12.999), ElementValue.ZValue);

sp.Add("Data", sc1);
sp.Add("Data", sc2);
sp.Add("Data", sc3);
sp.Add("Data", sc4);
sp.Add("Data", sc5);
sp.Add("Data", sc6);
sp.Add("Data", sc7);

sp.Add("Data", sc9);

sp.Add("Data", sc10);
sp.Add("Data", sc11);
sp.Add("Data", sc12);
sp.Add("Data", sc13);
sp.Add("Data", sc14);

return sp;
}


int dayToVal(string day)
{
System.Collections.Generic.Dictionary<string, int> dict =
new System.Collections.Generic.Dictionary<string, int>();
dict.Add("Monday", 0);
dict.Add("Tuesday", 1);
dict.Add("Wednesday", 2);
dict.Add("Thursday", 3);
dict.Add("Friday", 4);
dict.Add("Saturday", 5);
dict.Add("Sunday", 6);

return dict[day];
}
SeriesCollection getCSVDataChart4()
{

string text = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/activityData.csv"));
string[] entries = text.Split(new string[] {Environment.NewLine}, StringSplitOptions.None);
SeriesCollection sc = new SeriesCollection();
Series series = new Series();
series.Name = "Data";
foreach (string entry in entries)
{
string[] values = entry.Split(',');
if (values.Length == 3)
{
Element el = new Element();
el.YValue = dayToVal(values[1]);
el.XValue = double.Parse(values[0]);
el.ZValue = double.Parse(values[2]);
series.Elements.Add(el);
}
}

sc.Add(series);
return sc;

}

SeriesCollection getCSVDataChart3()
{

string text = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/sleepData.csv"));
string[] entries = text.Split(new string[] {Environment.NewLine}, StringSplitOptions.None);
SeriesCollection sc = new SeriesCollection();
Series series = new Series();
series.Name = "Monday";
string curSeries = "Monday";
foreach (string entry in entries)
{
string[] values = entry.Split(',');
if (values.Length == 5)
{
if (values[0] != curSeries)
{
sc.Add(series);
series = new Series();
curSeries = series.Name = values[0];
}

Element el = new Element();
el.YValue = double.Parse(values[1]);
el.YValueStart = double.Parse(values[2]);
el.Name = values[3];
el.CustomAttributes.Add("action", values[4]);

series.Elements.Add(el);
}
}

sc.Add(series);
return sc;

}

void setChart3(Chart c)
{
c.Type = ChartType.Gauges;
c.DefaultSeries.GaugeType = GaugeType.Bars;
c.Width = 500;
c.Height = 350;

c.JS.RenderCallback = "setColors";

c.DefaultElement.Color = Color.FromArgb(89, 183, 174);

c.DefaultElement.ToolTip = "js:tooltipFormatter";

c.YAxis.Orientation = dotnetCHARTING.Orientation.Top;
c.YAxis.ClearValues = true; ;
c.YAxis.ExtraTicks.Add(new AxisTick(12, "<icon name=\'weather/moon\' size=18 fill=#757575><br/>12PM"));
c.YAxis.ExtraTicks.Add(new AxisTick(19, "<icon name=\'linear/basic/alarm\' size=22 fill=#757575><br/>7AM"));
c.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(200, 200, 200);
c.YAxis.DefaultTick.GridLine.Width = 2;

c.TitleBox.Label.Text = "Sleep";

c.JS.Settings.Add("title.label.margin.left", "60");
c.JS.Settings.Add("title.label.margin.bottom", "-50");

SeriesCollection sc = getCSVDataChart3();

c.SeriesCollection.Add(sc);

}


</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.mainWrapper
{
width: 840px;
height: 800px;
background: white;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
}
#Chart1
{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 840px;
height: 240px;
}
#Chart2
{
position: absolute;
background: white;
margin-top: 240px;
margin-left: 20px;
width: 340px;
height: 350px;
}
#Chart3
{
position: absolute;
background: white;
margin-top: 240px;
margin-left: 340px;
width: 500px;
height: 350px;
}
#Chart4
{
position: absolute;
background: white;
margin-top: 570px;
margin-left: 0px;
width: 825px;
height: 280px;
}
</style>
</head>
<script type="text/javascript">
function setColors(c) {
/*Assign colors based on point attributes.*/
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Awake' }).options({ color: '#ffd54f' }, false);
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Deep Sleep' }).options({ color: '#00897b' });
}

function tooltipFormatter(point) {
var twoDigit = function (v) {
return ("0" + v).slice(-2);
};
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
<body>
<div class="mainWrapper">
<dnc:Chart ID="Chart1" runat="server" />
<dnc:Chart ID="Chart2" runat="server" />
<dnc:Chart ID="Chart3" runat="server" />
<dnc:Chart ID="Chart4" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using a number of charts in a dashboard scneario.

setDefaults(Chart1)
setChart1(Chart1)

setDefaults(Chart2)
setChart2(Chart2)

setDefaults(Chart3)
setChart3(Chart3)
setDefaults(Chart4)
setChart4(Chart4)
End Sub

Sub setDefaults(ByVal c As Chart)
c.TempDirectory = "temp"
c.Debug = False
c.Width = 840
c.Height = 240
c.JS.Enabled = True
c.ChartArea.ClearColors()
c.TitleBox.Label.Font = New Font("Arial", 20)
c.TitleBox.Label.Color = Color.FromArgb(97, 97, 97)
c.TitleBox.ClearColors()
c.XAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117)
c.YAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117)
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(217, 217, 217)

c.LegendBox.Visible = False
c.JS.Buttons.EnableExportButton = False
c.JS.Buttons.EnablePrintButton = False

End Sub

Sub setChart1(ByVal c As Chart)

c.Type = ChartType.Gauges
c.TitleBox.Label.Text = "Today"
'Rounded bars
c.ShadingEffectMode = ShadingEffectMode.Three
c.Debug = True

c.JS.Settings.Add("title.label.margin.left", "30")

c.XAxis.SpacingPercentage = 15
c.DefaultAxis.OrientationAngle = -45
c.DefaultAxis.SweepAngle = 270
c.XAxis.DefaultTick.Label.Text = ""
c.DonutHoleSize =.7

c.DefaultSeries.Type = SeriesType.Column
c.DefaultSeries.DefaultElement.Color = Color.FromArgb(0, 131, 141)

'Steps
Dim steps As Series = New Series()
steps.Type = SeriesType.Column
steps.Name = "Steps"
Dim el As Element = New Element()
el.YValue = 1577
el.Name = "value"
Dim label1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
setChart1shLabel1(label1)
steps.ShapeLabels.Add(label1)
steps.ShapeLabels.Add(getChart1shLabel2("material/maps/directions-walk"))
steps.Elements.Add(el)

Dim aSteps As Axis = New Axis()
aSteps.Line.Width = 0
aSteps.ClearValues = True
aSteps.ScaleRange = New ScaleRange(0, 10000)
steps.YAxis = aSteps
c.SeriesCollection.Add(steps)

'Active Time
Dim active As Series = New Series()
active.Type = SeriesType.Column
active.Name = "Active Time"
el = New Element()
el.YValue = 26
el.Name = "value"

active.ShapeLabels.Add(label1)
active.ShapeLabels.Add(getChart1shLabel2("material/device/access-time"))
active.Elements.Add(el)

Dim aActive As Axis = New Axis()
aActive.Line.Width = 0
aActive.ClearValues = True
aActive.ScaleRange = New ScaleRange(0, 180)
active.YAxis = aActive
c.SeriesCollection.Add(active)

'Calories
Dim calories As Series = New Series()
calories.Type = SeriesType.Column
calories.Name = "Calories"
el = New Element()
el.YValue = 838
el.Name = "value"
calories.ShapeLabels.Add(label1)
calories.ShapeLabels.Add(getChart1shLabel2("material/social/whatshot"))
calories.Elements.Add(el)

Dim aCalories As Axis = New Axis()
aCalories.Line.Width = 0
aCalories.ClearValues = True
aCalories.ScaleRange = New ScaleRange(0, 5000)
calories.YAxis = aCalories
c.SeriesCollection.Add(calories)

'Distance
Dim distance As Series = New Series()
distance.Type = SeriesType.Column
distance.Name = "Distance"
el = New Element()
el.YValue =.68
el.Name = "value"
distance.ShapeLabels.Add(label1)
distance.ShapeLabels.Add(getChart1shLabel2("material/maps/place"))

distance.Elements.Add(el)

Dim aDistance As Axis = New Axis()
aDistance.Line.Width = 0
aDistance.ClearValues = True
aDistance.ScaleRange = New ScaleRange(0, 10)
distance.YAxis = aDistance
c.SeriesCollection.Add(distance)
End Sub

Sub setChart1shLabel1(ByVal l As dotnetCHARTING.Label)
l.Text = "js:""<span style='font-size:18px'><b>%name</b></span><br><span style='font-size:14px'>%value</span>"""
l.LineAlignment = StringAlignment.Center
l.Alignment = StringAlignment.Far
l.Offset = New Point(-88, 0)
l.Width = 55
End Sub


Function getChart1shLabel2(ByVal iconName As String) As dotnetCHARTING.Label
Dim l As dotnetCHARTING.Label = New dotnetCHARTING.Label()
l.Text = "js:""<icon name=" & iconName & " size=36 fill=#757575>"""
l.LineAlignment = StringAlignment.Center
l.Alignment = StringAlignment.Center
Return l
End Function

Sub setChart2(ByVal c As Chart)
' Set the chart size.
c.Size = "340x300"

' Enable JSCharting
c.JS.Enabled = True

' Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp"

' Specify chart type.
c.Type = ChartType.Gauges
c.ShadingEffectMode = ShadingEffectMode.Three
c.DefaultSeries.GaugeType = GaugeType.Vertical
c.DefaultSeries.GaugeLinearStyle = GaugeLinearStyle.Normal

c.Debug = True
c.LegendBox.Visible = False

'Padding around the visual
c.ChartArea.Padding = 40

'Set title
c.TitleBox.Label.Text = "Summary"
c.JS.Settings.Add("title.label.margin.left", "30")
c.JS.Settings.Add("title.label.margin.bottom", "10")


c.TitleBox.Position = TitleBoxPosition.Full
c.TitleBox.Label.Alignment = StringAlignment.Near

'Clear the boxes.
c.TitleBox.ClearColors()
c.ChartArea.ClearColors()

'Enable x grid lines
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230)
'Enable x axis tick labels.
c.XAxis.DefaultTick.Label.Text = "%value"
'Offset labels
c.XAxis.DefaultTick.Label.Offset = New Point(0, -20)
c.XAxis.Orientation = dotnetCHARTING.Orientation.Top


'Hide y axis
c.YAxis.ClearValues = True
c.YAxis.Line.Width = 0

' Add the random data.
c.SeriesCollection.Add(getDataChart2())
End Sub
Function getDataChart2() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim days As Series = New Series()
days.Name = "Daily Steps"
days.DefaultElement.Color = Color.FromArgb(21, 145, 132)
Dim e As Element = New Element()
e.Name = "Mo"
e.YValue = 3516
days.Elements.Add(e)

e = New Element()
e.Name = "Tu"
e.YValue = 6854
days.Elements.Add(e)

e = New Element()
e.Name = "We"
e.YValue = 9461
days.Elements.Add(e)
SC.Add(days)

e = New Element()
e.Name = "Th"
e.YValue = 7523
days.Elements.Add(e)

e = New Element()
e.Name = "Fr"
e.YValue = 5256
days.Elements.Add(e)

e = New Element()
e.Name = "Sa"
e.YValue = 2546
days.Elements.Add(e)

e = New Element()
e.Name = "Su"
e.YValue = 3425
days.Elements.Add(e)
Return SC
End Function
Sub setChart4(ByVal c As Chart)
' Demonstrates Csv activity data calendar chart using a customized smartPalette.
' Enable JSCharting
c.JS.Enabled = True
' Specify the JS only chart type.
c.Type = ChartType.Calendar
c.JS.Calendar.Type = JsOptions.CalendarView.Week30Min
c.JS.Calendar.Calculation = Calculation.Average
c.JS.Data = "./../../data/resources/activityData.csv"

'Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp"

c.LegendBox.Template = "%name,%icon"
c.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
c.LegendBox.Padding = 2
c.LegendBox.ClearColors()
c.DefaultSeries.LegendEntry.Visible = False


c.SmartPalette = getSPChart4()
c.Palette = New Color() {Color.FromArgb(0,137,123),Color.FromArgb(224,224,224),Color.FromArgb(255,160,0)}

c.XAxis.Interval = 2
c.XAxis.DefaultTick.Label.Text = "js:function(v){return ((v%24)/2).toString()}"
c.XAxis.DefaultTick.GridLine.Width = 0
c.XAxis.Orientation = dotnetCHARTING.Orientation.Top
c.XAxis.FormatString = "n0"
c.XAxis.ExtraTicks.Add(New AxisTick(0, "js:'<icon name=weather/moon size=18 fill=#14327f><br/>AM'"))
c.XAxis.ExtraTicks.Add(New AxisTick(24, "js:'<icon name=weather/sun size=24 fill=#e9b82e><br/>PM'"))
c.XAxis.ExtraTicks.Add(New AxisTick(24, "12"))

c.ChartArea.ClearColors()
c.DefaultSeries.DefaultElement.Outline.Width = 0
c.DefaultElement.ToolTip = "{%date:date f}"
c.ShadingEffectMode = ShadingEffectMode.None

End Sub
Function getSPChart4() As SmartPalette
Dim sp As SmartPalette = New SmartPalette()
Dim sc1 As SmartColor = New SmartColor(Color.FromArgb(0, 137, 123), New ScaleRange(0,.999), ElementValue.ZValue)
sc1.LegendEntry.Name = "Sleep"

Dim sc2 As SmartColor = New SmartColor(Color.FromArgb(37, 152, 140), New ScaleRange(1, 1.999), ElementValue.ZValue)
Dim sc3 As SmartColor = New SmartColor(Color.FromArgb(75, 166, 157), New ScaleRange(2, 2.999), ElementValue.ZValue)
Dim sc4 As SmartColor = New SmartColor(Color.FromArgb(112, 181, 174), New ScaleRange(3, 3.999), ElementValue.ZValue)
Dim sc5 As SmartColor = New SmartColor(Color.FromArgb(149, 195, 190), New ScaleRange(4, 4.999), ElementValue.ZValue)
Dim sc6 As SmartColor = New SmartColor(Color.FromArgb(187, 210, 207), New ScaleRange(5, 5.999), ElementValue.ZValue)
Dim sc7 As SmartColor = New SmartColor(Color.FromArgb(224, 224, 224), New ScaleRange(6, 6.999), ElementValue.ZValue)
sc7.LegendEntry.Name = "Inactive"

Dim sc9 As SmartColor = New SmartColor(Color.FromArgb(234, 203, 149), New ScaleRange(7, 7.999), ElementValue.ZValue)
sc9.LegendEntry.Name = "Active"
Dim sc10 As SmartColor = New SmartColor(Color.FromArgb(240, 192, 112), New ScaleRange(8, 8.999), ElementValue.ZValue)
Dim sc11 As SmartColor = New SmartColor(Color.FromArgb(245, 181, 75), New ScaleRange(9, 9.999), ElementValue.ZValue)
Dim sc12 As SmartColor = New SmartColor(Color.FromArgb(250, 171, 37), New ScaleRange(10, 10.999), ElementValue.ZValue)
Dim sc13 As SmartColor = New SmartColor(Color.FromArgb(225, 160, 0), New ScaleRange(11, 11.999), ElementValue.ZValue)
Dim sc14 As SmartColor = New SmartColor(Color.FromArgb(255, 169, 25), New ScaleRange(12, 12.999), ElementValue.ZValue)

sp.Add("Data", sc1)
sp.Add("Data", sc2)
sp.Add("Data", sc3)
sp.Add("Data", sc4)
sp.Add("Data", sc5)
sp.Add("Data", sc6)
sp.Add("Data", sc7)

sp.Add("Data", sc9)

sp.Add("Data", sc10)
sp.Add("Data", sc11)
sp.Add("Data", sc12)
sp.Add("Data", sc13)
sp.Add("Data", sc14)

Return sp
End Function


Function dayToVal(ByVal day As String) As Integer
Dim dict As System.Collections.Generic.Dictionary(Of String, Integer) = New System.Collections.Generic.Dictionary(Of String, Integer)()
dict.Add("Monday", 0)
dict.Add("Tuesday", 1)
dict.Add("Wednesday", 2)
dict.Add("Thursday", 3)
dict.Add("Friday", 4)
dict.Add("Saturday", 5)
dict.Add("Sunday", 6)

Return dict(day)
End Function
Function getCSVDataChart4() As SeriesCollection

Dim text As String = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/activityData.csv"))
Dim entries As String() = text.Split(New String() {Environment.NewLine}, StringSplitOptions.None)
Dim sc As SeriesCollection = New SeriesCollection()
Dim series As Series = New Series()
series.Name = "Data"
For Each entry As String In entries
Dim values As String() = entry.Split(","c)
If values.Length = 3 Then
Dim el As Element = New Element()
el.YValue = dayToVal(values(1))
el.XValue = Double.Parse(values(0))
el.ZValue = Double.Parse(values(2))
series.Elements.Add(el)
End If
Next entry

sc.Add(series)
Return sc

End Function

Function getCSVDataChart3() As SeriesCollection

Dim text As String = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/sleepData.csv"))
Dim entries As String() = text.Split(New String() {Environment.NewLine}, StringSplitOptions.None)
Dim sc As SeriesCollection = New SeriesCollection()
Dim series As Series = New Series()
series.Name = "Monday"
Dim curSeries As String = "Monday"
For Each entry As String In entries
Dim values As String() = entry.Split(","c)
If values.Length = 5 Then
If values(0) <> curSeries Then
sc.Add(series)
series = New Series()
series.Name = values(0)
curSeries = series.Name
End If

Dim el As Element = New Element()
el.YValue = Double.Parse(values(1))
el.YValueStart = Double.Parse(values(2))
el.Name = values(3)
el.CustomAttributes.Add("action", values(4))

series.Elements.Add(el)
End If
Next entry

sc.Add(series)
Return sc

End Function

Sub setChart3(ByVal c As Chart)
c.Type = ChartType.Gauges
c.DefaultSeries.GaugeType = GaugeType.Bars
c.Width = 500
c.Height = 350

c.JS.RenderCallback = "setColors"

c.DefaultElement.Color = Color.FromArgb(89, 183, 174)

c.DefaultElement.ToolTip = "js:tooltipFormatter"

c.YAxis.Orientation = dotnetCHARTING.Orientation.Top
c.YAxis.ClearValues = True

c.YAxis.ExtraTicks.Add(New AxisTick(12, "<icon name='weather/moon' size=18 fill=#757575><br/>12PM"))
c.YAxis.ExtraTicks.Add(New AxisTick(19, "<icon name='linear/basic/alarm' size=22 fill=#757575><br/>7AM"))
c.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(200, 200, 200)
c.YAxis.DefaultTick.GridLine.Width = 2

c.TitleBox.Label.Text = "Sleep"

c.JS.Settings.Add("title.label.margin.left", "60")
c.JS.Settings.Add("title.label.margin.bottom", "-50")

Dim sc As SeriesCollection = getCSVDataChart3()

c.SeriesCollection.Add(sc)

End Sub


</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.mainWrapper
{
width: 840px;
height: 800px;
background: white;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
}
#Chart1
{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 840px;
height: 240px;
}
#Chart2
{
position: absolute;
background: white;
margin-top: 240px;
margin-left: 20px;
width: 340px;
height: 350px;
}
#Chart3
{
position: absolute;
background: white;
margin-top: 240px;
margin-left: 340px;
width: 500px;
height: 350px;
}
#Chart4
{
position: absolute;
background: white;
margin-top: 570px;
margin-left: 0px;
width: 825px;
height: 280px;
}
</style>
</head>
<script type="text/javascript">
function setColors(c) {
/*Assign colors based on point attributes.*/
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Awake' }).options({ color: '#ffd54f' }, false);
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Deep Sleep' }).options({ color: '#00897b' });
}

function tooltipFormatter(point) {
var twoDigit = function (v) {
return ("0" + v).slice(-2);
};
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
<body>
<div class="mainWrapper">
<dnc:Chart ID="Chart1" runat="server" />
<dnc:Chart ID="Chart2" runat="server" />
<dnc:Chart ID="Chart3" runat="server" />
<dnc:Chart ID="Chart4" runat="server" />
</div>
</body>
</html>