<%@ 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 circular gauges with gantt data and a custom legend generated in JavaScript.

Chart.Size = "700x350";

Chart.TempDirectory = "temp";
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.Debug = false;

Chart.JS.Enabled = true;
Chart.JS.ControlID = "chart";
Chart.JS.RenderCallback = "colorizeChart";
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;

Chart.DefaultSeries.LegendEntry.Visible = false;

Chart.YAxis.ScaleRange = new ScaleRange(0, 12);
Chart.YAxis.SweepAngle = 360;
Chart.YAxis.OrientationAngle = 0;
Chart.YAxis.Interval = 1;

Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.Template = "%name %icon";

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

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx

SeriesCollection mySC = getData();



// Add the random data.
Chart.SeriesCollection.Add(mySC);
}

SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();
Series series = new Series();

dotnetCHARTING.Label am = new dotnetCHARTING.Label("AM");
am.Font = new Font("Arial", 15);
am.LineAlignment = StringAlignment.Center;
series.ShapeLabels.Add(am);

Element el = new Element();
el.Name = "am";
el.YValue = 6.5;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Sleep");
series.Elements.Add(el);


el = new Element();
el.Name = "am";
el.YValue = 7;
el.YValueStart = 6.5;
el.CustomAttributes.Add("activity", "Morning routine");
series.Elements.Add(el);


el = new Element();
el.Name = "am";
el.YValue = 8;
el.YValueStart = 7;
el.CustomAttributes.Add("activity", "Walking");
series.Elements.Add(el);


el = new Element();
el.Name = "am";
el.YValue = 12;
el.YValueStart = 8;
el.CustomAttributes.Add("activity", "Work");
series.Elements.Add(el);

sc.Add(series);

series = new Series();

dotnetCHARTING.Label pm = new dotnetCHARTING.Label("PM");
pm.Font = new Font("Arial", 15);
pm.LineAlignment = StringAlignment.Center;
series.ShapeLabels.Add(pm);

el = new Element();
el.Name = "pm";
el.YValue = 1.5;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Work");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 2;
el.YValueStart = 1.5;
el.CustomAttributes.Add("activity", "Lunch");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 5;
el.YValueStart = 2;
el.CustomAttributes.Add("activity", "Work");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 5.5;
el.YValueStart = 5;
el.CustomAttributes.Add("activity", "Walking");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 7;
el.YValueStart = 5.5;
el.CustomAttributes.Add("activity", "Workout");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 7.5;
el.YValueStart = 7;
el.CustomAttributes.Add("activity", "Walking");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 8.25;
el.YValueStart = 7.5;
el.CustomAttributes.Add("activity", "Dinner");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 11.75;
el.YValueStart = 8.25;
el.CustomAttributes.Add("activity", "Time with family");
series.Elements.Add(el);


el = new Element();
el.Name = "pm";
el.YValue = 12;
el.YValueStart = 11.75;
el.CustomAttributes.Add("activity", "Sleep");
series.Elements.Add(el);

sc.Add(series);
return sc;
}



SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
function colorizeChart(c) {
var names = [], colors = [];


c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Sleep' }).options({color: '#6d699a'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Walking'}).options({color: '#fcf3be'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Work'}).options({color: '#fac494'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Morning routine'}).options({color: '#cbedbe'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Lunch'}).options({color: '#ff8383'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Workout'}).options({color: '#faec94'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Dinner'}).options({color: '#ff9c9c'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Time with family'}).options({color: '#a5cf94'});

//Generate data for custom legend entries
c.series().points().each(function (p) {
var name = p.options('attributes.ACTIVITY');
var color = p.options('color');
names.indexOf(name) === -1 && names.push(name);
colors.indexOf(color) === -1 && colors.push(color);
});

var customEntries = [];
for (var i = 0; i < names.length; i++) {
customEntries.push({
name: names[i],
icon_fill: colors[i],
icon_outline_color: colors[i],
});
}

c.chartAreas(0).legend.options({customEntries: customEntries});
}

function tooltipFormatter(point){
var val = point.tokenValue('%yRange')
var twoDigit = function(v){
return ("0" + v).slice(-2);
};
var formatSpan = function (v) {
var hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + 'hr ' + twoDigit(min)+'min';
};
return point.tokenValue('%activity')+ ' '+formatSpan(val);
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" 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 circular gauges with gantt data and a custom legend generated in JavaScript.

Chart.Size = "700x350"

Chart.TempDirectory = "temp"
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.Debug = False

Chart.JS.Enabled = True
Chart.JS.ControlID = "chart"
Chart.JS.RenderCallback = "colorizeChart"
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False

Chart.DefaultSeries.LegendEntry.Visible = False

Chart.YAxis.ScaleRange = New ScaleRange(0, 12)
Chart.YAxis.SweepAngle = 360
Chart.YAxis.OrientationAngle = 0
Chart.YAxis.Interval = 1

Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.Template = "%name %icon"

Chart.DefaultElement.ToolTip = "js:tooltipFormatter"

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx

Dim mySC As SeriesCollection = getData()



' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub

Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim series As Series = New Series()

Dim am As dotnetCHARTING.Label = New dotnetCHARTING.Label("AM")
am.Font = New Font("Arial", 15)
am.LineAlignment = StringAlignment.Center
series.ShapeLabels.Add(am)

Dim el As Element = New Element()
el.Name = "am"
el.YValue = 6.5
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Sleep")
series.Elements.Add(el)


el = New Element()
el.Name = "am"
el.YValue = 7
el.YValueStart = 6.5
el.CustomAttributes.Add("activity", "Morning routine")
series.Elements.Add(el)


el = New Element()
el.Name = "am"
el.YValue = 8
el.YValueStart = 7
el.CustomAttributes.Add("activity", "Walking")
series.Elements.Add(el)


el = New Element()
el.Name = "am"
el.YValue = 12
el.YValueStart = 8
el.CustomAttributes.Add("activity", "Work")
series.Elements.Add(el)

sc.Add(series)

series = New Series()

Dim pm As dotnetCHARTING.Label = New dotnetCHARTING.Label("PM")
pm.Font = New Font("Arial", 15)
pm.LineAlignment = StringAlignment.Center
series.ShapeLabels.Add(pm)

el = New Element()
el.Name = "pm"
el.YValue = 1.5
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Work")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 2
el.YValueStart = 1.5
el.CustomAttributes.Add("activity", "Lunch")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 5
el.YValueStart = 2
el.CustomAttributes.Add("activity", "Work")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 5.5
el.YValueStart = 5
el.CustomAttributes.Add("activity", "Walking")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 7
el.YValueStart = 5.5
el.CustomAttributes.Add("activity", "Workout")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 7.5
el.YValueStart = 7
el.CustomAttributes.Add("activity", "Walking")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 8.25
el.YValueStart = 7.5
el.CustomAttributes.Add("activity", "Dinner")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 11.75
el.YValueStart = 8.25
el.CustomAttributes.Add("activity", "Time with family")
series.Elements.Add(el)


el = New Element()
el.Name = "pm"
el.YValue = 12
el.YValueStart = 11.75
el.CustomAttributes.Add("activity", "Sleep")
series.Elements.Add(el)

sc.Add(series)
Return sc
End Function



Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
function colorizeChart(c) {
var names = [], colors = [];


c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Sleep' }).options({color: '#6d699a'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Walking'}).options({color: '#fcf3be'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Work'}).options({color: '#fac494'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Morning routine'}).options({color: '#cbedbe'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Lunch'}).options({color: '#ff8383'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Workout'}).options({color: '#faec94'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Dinner'}).options({color: '#ff9c9c'}, false);
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Time with family'}).options({color: '#a5cf94'});

//Generate data for custom legend entries
c.series().points().each(function (p) {
var name = p.options('attributes.ACTIVITY');
var color = p.options('color');
names.indexOf(name) === -1 && names.push(name);
colors.indexOf(color) === -1 && colors.push(color);
});

var customEntries = [];
for (var i = 0; i < names.length; i++) {
customEntries.push({
name: names[i],
icon_fill: colors[i],
icon_outline_color: colors[i],
});
}

c.chartAreas(0).legend.options({customEntries: customEntries});
}

function tooltipFormatter(point){
var val = point.tokenValue('%yRange')
var twoDigit = function(v){
return ("0" + v).slice(-2);
};
var formatSpan = function (v) {
var hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + 'hr ' + twoDigit(min)+'min';
};
return point.tokenValue('%activity')+ ' '+formatSpan(val);
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>