<%@ 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 = "400x450";

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, 150);
Chart.YAxis.SweepAngle = 270;
Chart.YAxis.OrientationAngle = 0;

Chart.XAxis.DefaultTick.Label.Text = "%name";
Chart.YAxis.DefaultTick.Label.Text = "%value min";

Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.Template = "%name %icon";
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Swimming", "", Color.FromArgb(52, 172, 224)));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Cycling", "", Color.FromArgb(255, 82, 82)));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("Running", "", Color.FromArgb(51, 217, 178)));
Chart.LegendBox.DefaultEntry.Marker.Type = ElementMarkerType.Square;
Chart.LegendBox.DefaultEntry.Marker.Size = 10;

Chart.DefaultElement.ToolTip = "<b>%xValue:</b><br>%activity {Math.floor(%yRange):n0} min {{60*{{%yRange:d}-{Math.floor(%yRange)}}}:n0} sec";


// *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("Triathlon at the 2016 Summer Olympics");
am.Font = new Font("Arial", 12);

series.ShapeLabels.Add(am);

Element el = new Element();
el.Name = "Alistair Brownlee";
el.YValue = 17.4;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Swimming");
series.Elements.Add(el);


el = new Element();
el.Name = "Alistair Brownlee";
el.YValue = 72.46;
el.YValueStart = 18.4;
el.CustomAttributes.Add("activity", "Cycling");
series.Elements.Add(el);


el = new Element();
el.Name = "Alistair Brownlee";
el.YValue = 103.62;
el.YValueStart = 73.4;
el.CustomAttributes.Add("activity", "Running");
series.Elements.Add(el);


el = new Element();
el.Name = "Pierre Le Corre";
el.YValue = 17.47;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Swimming");
series.Elements.Add(el);


el = new Element();
el.Name = "Pierre Le Corre";
el.YValue = 74.5;
el.YValueStart = 18.47;
el.CustomAttributes.Add("activity", "Cycling");
series.Elements.Add(el);


el = new Element();
el.Name = "Pierre Le Corre";
el.YValue = 107.22;
el.YValueStart = 75.5;
el.CustomAttributes.Add("activity", "Running");
series.Elements.Add(el);


el = new Element();
el.Name = "Faquan Bai";
el.YValue = 17.52;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Swimming");
series.Elements.Add(el);


el = new Element();
el.Name = "Faquan Bai";
el.YValue = 77.34;
el.YValueStart = 18.52;
el.CustomAttributes.Add("activity", "Cycling");
series.Elements.Add(el);


el = new Element();
el.Name = "Faquan Bai";
el.YValue = 116.71;
el.YValueStart = 78.34;
el.CustomAttributes.Add("activity", "Running");
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) {

c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Swimming' }).options({ color: '#34ace0' });
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Cycling' }).options({ color: '#ff5252' });
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Running' }).options({ color: '#33d9b2' });





}
</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 = "400x450"

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, 150)
Chart.YAxis.SweepAngle = 270
Chart.YAxis.OrientationAngle = 0

Chart.XAxis.DefaultTick.Label.Text = "%name"
Chart.YAxis.DefaultTick.Label.Text = "%value min"

Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.Template = "%name %icon"
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Swimming", "", Color.FromArgb(52, 172, 224)))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Cycling", "", Color.FromArgb(255, 82, 82)))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("Running", "", Color.FromArgb(51, 217, 178)))
Chart.LegendBox.DefaultEntry.Marker.Type = ElementMarkerType.Square
Chart.LegendBox.DefaultEntry.Marker.Size = 10

Chart.DefaultElement.ToolTip = "<b>%xValue:</b><br>%activity {Math.floor(%yRange):n0} min {{60*{{%yRange:d}-{Math.floor(%yRange)}}}:n0} sec"


' *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("Triathlon at the 2016 Summer Olympics")
am.Font = New Font("Arial", 12)

series.ShapeLabels.Add(am)

Dim el As Element = New Element()
el.Name = "Alistair Brownlee"
el.YValue = 17.4
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Swimming")
series.Elements.Add(el)


el = New Element()
el.Name = "Alistair Brownlee"
el.YValue = 72.46
el.YValueStart = 18.4
el.CustomAttributes.Add("activity", "Cycling")
series.Elements.Add(el)


el = New Element()
el.Name = "Alistair Brownlee"
el.YValue = 103.62
el.YValueStart = 73.4
el.CustomAttributes.Add("activity", "Running")
series.Elements.Add(el)


el = New Element()
el.Name = "Pierre Le Corre"
el.YValue = 17.47
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Swimming")
series.Elements.Add(el)


el = New Element()
el.Name = "Pierre Le Corre"
el.YValue = 74.5
el.YValueStart = 18.47
el.CustomAttributes.Add("activity", "Cycling")
series.Elements.Add(el)


el = New Element()
el.Name = "Pierre Le Corre"
el.YValue = 107.22
el.YValueStart = 75.5
el.CustomAttributes.Add("activity", "Running")
series.Elements.Add(el)


el = New Element()
el.Name = "Faquan Bai"
el.YValue = 17.52
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Swimming")
series.Elements.Add(el)


el = New Element()
el.Name = "Faquan Bai"
el.YValue = 77.34
el.YValueStart = 18.52
el.CustomAttributes.Add("activity", "Cycling")
series.Elements.Add(el)


el = New Element()
el.Name = "Faquan Bai"
el.YValue = 116.71
el.YValueStart = 78.34
el.CustomAttributes.Add("activity", "Running")
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) {

c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Swimming' }).options({ color: '#34ace0' });
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Cycling' }).options({ color: '#ff5252' });
c.series().points(function (p) { return p.options('attributes.ACTIVITY') === 'Running' }).options({ color: '#33d9b2' });





}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>