<%@ 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 how to adjust pie shape elements using a slider UI controls.
Chart.Type = ChartType.Donuts;
Chart.DonutHoleSize = 70;
Chart.JS.Settings.Add("defaultSeries_shape_size", "250"); //override default setting
Chart.JS.Settings.Add("defaultSeries_shape_center", "80%,50%"); //override default setting
Chart.JS.ControlID = "myJSC";
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.Size = "700x400";
Chart.TitleBox.Label.Text = "Fixed Deposit Calculator";
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.ClearColors();
Chart.TitleBox.Label.Font = new Font("Arial", 18, FontStyle.Bold);
Chart.TitleBox.Label.Alignment = StringAlignment.Center;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#9575cd"),ColorTranslator.FromHtml("#ffee58") };
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight;
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.LabelStyle.AutoWrap = false;
Chart.DefaultElement.SmartLabel.Text = "<b>%Name</b>";
Chart.DefaultElement.ShowValue =false;
Chart.ChartArea.ClearColors();
Chart.DefaultElement.ToolTip = "";
Chart.DefaultElement.Outline.Visible = false;

Annotation an = new Annotation();
an.Label.Text = "Deposit Amount:";
an.Position = new Point(5, 53);
an.Label.Font= new Font("Arial", 9, FontStyle.Bold);
an.ClearColors();
Chart.Annotations.Add(an);

an = new Annotation();
an.Label.Text = "Investment Term:";
an.Position = new Point(5, 135);
an.Label.Font= new Font("Arial", 9, FontStyle.Bold);
an.ClearColors();
Chart.Annotations.Add(an);

an = new Annotation();
an.Label.Text = "Interest Rate:";
an.Position = new Point(5, 215);
an.Label.Font= new Font("Arial", 9, FontStyle.Bold);
an.ClearColors();
Chart.Annotations.Add(an);

Chart.JS.Settings.Add("toolbar_defaultItem_throttle", "200");

Chart.JS.Settings.Add("toolbar_items_DepositAmount_type", "range");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_margin", "[40,0,0,10]");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_width", "300");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_events_change", "js:function(value){updateChart(value, term, rate);amount=Math.round(value);}");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_min", "js:1000");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_max", "js:100000");
Chart.JS.Settings.Add("toolbar_items_DepositAmount_value", "js:10000");

Chart.JS.Settings.Add("toolbar_items_selectedAmount_margin", "[0,10]");
Chart.JS.Settings.Add("toolbar_items_selectedAmount_label_text", "$10,000");
Chart.JS.Settings.Add("toolbar_items_selectedAmount_boxVisible", "false");

Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_type", "range");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_margin", "[40,0,0,10]");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_width", "300");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_events_change", "js:function(value){updateChart(amount,value,rate);term=Math.round(value);}");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_min", "js:1");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_max", "js:24");
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_value", "js:6");

Chart.JS.Settings.Add("toolbar_items_selectedTerm_margin", "[0,10]");
Chart.JS.Settings.Add("toolbar_items_selectedTerm_label_text", "6 months");
Chart.JS.Settings.Add("toolbar_items_selectedTerm_boxVisible", "false");

Chart.JS.Settings.Add("toolbar_items_InterestRate_type", "range");
Chart.JS.Settings.Add("toolbar_items_InterestRate_margin", "[40,0,0,10]");
Chart.JS.Settings.Add("toolbar_items_InterestRate_width", "300");
Chart.JS.Settings.Add("toolbar_items_InterestRate_events_change", "js:function(value){updateChart(amount,term,value);rate=Math.round(value);}");
Chart.JS.Settings.Add("toolbar_items_InterestRate_min", "js:1");
Chart.JS.Settings.Add("toolbar_items_InterestRate_max", "js:20");
Chart.JS.Settings.Add("toolbar_items_InterestRate_value", "js:10");

Chart.JS.Settings.Add("toolbar_items_selectedRate_margin", "[0,10]");
Chart.JS.Settings.Add("toolbar_items_selectedRate_label_text", "10%");
Chart.JS.Settings.Add("toolbar_items_selectedRate_boxVisible", "false");

Chart.JS.Settings.Add("toolbar_items_result_position", "'480,196'");
Chart.JS.Settings.Add("toolbar_items_result_label_text", "Balance: <b>$10,510.53</b><br/>Interest: <b>$510.53</b>");
Chart.JS.Settings.Add("toolbar_items_result_label_style_fontSize", "14");
Chart.JS.Settings.Add("toolbar_items_result_boxVisible", "false");

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the myJSC. 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 s1 = new Series();

Element el = new Element();
el.Name = "Deposit amount";
el.YValue = 10000;
s1.Elements.Add(el);

el = new Element();
el.Name = "Total Interest";
el.YValue = 510.53;
s1.Elements.Add(el);
SC.Add(s1);
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>
<script type="text/javascript">
var amount = 10000, term = 6, rate = 10;
function updateChart(depositAmount, investmentTerm, interestRate) {
var interest = JSC.formatNumber((((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)), 'c2');
var balance = JSC.formatNumber(((Math.round(depositAmount/100)*100) + ((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)), 'c2');
myJSC.series(0).points(0).options({y:(Math.round(depositAmount/100)*100)},false);
myJSC.series(0).points(1).options({y:((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)},false);
myJSC.uiItems('selectedAmount').options({label_text:JSC.formatNumber((Math.round(depositAmount/100)*100), 'c0')});
myJSC.uiItems('selectedTerm').options({label_text:Math.round(investmentTerm) + ' months'});
myJSC.uiItems('selectedRate').options({label_text:(Math.round(interestRate*10)/10) + '%'});
myJSC.uiItems('result').options({label_text:'Balance: <b>' + balance + '</b><br>Interest: <b>'+interest+'</b>'});
myJSC.redraw();
}
</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" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to adjust pie shape elements using a slider UI controls.
Chart.Type = ChartType.Donuts
Chart.DonutHoleSize = 70
Chart.JS.Settings.Add("defaultSeries_shape_size", "250") 'override default setting
Chart.JS.Settings.Add("defaultSeries_shape_center", "80%,50%") 'override default setting
Chart.JS.ControlID = "myJSC"
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.Size = "700x400"
Chart.TitleBox.Label.Text = "Fixed Deposit Calculator"
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.ClearColors()
Chart.TitleBox.Label.Font = New Font("Arial", 18, FontStyle.Bold)
Chart.TitleBox.Label.Alignment = StringAlignment.Center
Chart.Palette = New Color() { ColorTranslator.FromHtml("#9575cd"),ColorTranslator.FromHtml("#ffee58") }
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.LabelStyle.AutoWrap = False
Chart.DefaultElement.SmartLabel.Text = "<b>%Name</b>"
Chart.DefaultElement.ShowValue =False
Chart.ChartArea.ClearColors()
Chart.DefaultElement.ToolTip = ""
Chart.DefaultElement.Outline.Visible = False

Dim an As Annotation = New Annotation()
an.Label.Text = "Deposit Amount:"
an.Position = New Point(5, 53)
an.Label.Font= New Font("Arial", 9, FontStyle.Bold)
an.ClearColors()
Chart.Annotations.Add(an)

an = New Annotation()
an.Label.Text = "Investment Term:"
an.Position = New Point(5, 135)
an.Label.Font= New Font("Arial", 9, FontStyle.Bold)
an.ClearColors()
Chart.Annotations.Add(an)

an = New Annotation()
an.Label.Text = "Interest Rate:"
an.Position = New Point(5, 215)
an.Label.Font= New Font("Arial", 9, FontStyle.Bold)
an.ClearColors()
Chart.Annotations.Add(an)

Chart.JS.Settings.Add("toolbar_defaultItem_throttle", "200")

Chart.JS.Settings.Add("toolbar_items_DepositAmount_type", "range")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_margin", "[40,0,0,10]")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_width", "300")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_events_change", "js:function(value){updateChart(value, term, rate);amount=Math.round(value);}")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_min", "js:1000")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_max", "js:100000")
Chart.JS.Settings.Add("toolbar_items_DepositAmount_value", "js:10000")

Chart.JS.Settings.Add("toolbar_items_selectedAmount_margin", "[0,10]")
Chart.JS.Settings.Add("toolbar_items_selectedAmount_label_text", "$10,000")
Chart.JS.Settings.Add("toolbar_items_selectedAmount_boxVisible", "false")

Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_type", "range")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_margin", "[40,0,0,10]")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_width", "300")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_events_change", "js:function(value){updateChart(amount,value,rate);term=Math.round(value);}")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_min", "js:1")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_max", "js:24")
Chart.JS.Settings.Add("toolbar_items_InvestmentTerm_value", "js:6")

Chart.JS.Settings.Add("toolbar_items_selectedTerm_margin", "[0,10]")
Chart.JS.Settings.Add("toolbar_items_selectedTerm_label_text", "6 months")
Chart.JS.Settings.Add("toolbar_items_selectedTerm_boxVisible", "false")

Chart.JS.Settings.Add("toolbar_items_InterestRate_type", "range")
Chart.JS.Settings.Add("toolbar_items_InterestRate_margin", "[40,0,0,10]")
Chart.JS.Settings.Add("toolbar_items_InterestRate_width", "300")
Chart.JS.Settings.Add("toolbar_items_InterestRate_events_change", "js:function(value){updateChart(amount,term,value);rate=Math.round(value);}")
Chart.JS.Settings.Add("toolbar_items_InterestRate_min", "js:1")
Chart.JS.Settings.Add("toolbar_items_InterestRate_max", "js:20")
Chart.JS.Settings.Add("toolbar_items_InterestRate_value", "js:10")

Chart.JS.Settings.Add("toolbar_items_selectedRate_margin", "[0,10]")
Chart.JS.Settings.Add("toolbar_items_selectedRate_label_text", "10%")
Chart.JS.Settings.Add("toolbar_items_selectedRate_boxVisible", "false")

Chart.JS.Settings.Add("toolbar_items_result_position", "'480,196'")
Chart.JS.Settings.Add("toolbar_items_result_label_text", "Balance: <b>$10,510.53</b><br/>Interest: <b>$510.53</b>")
Chart.JS.Settings.Add("toolbar_items_result_label_style_fontSize", "14")
Chart.JS.Settings.Add("toolbar_items_result_boxVisible", "false")

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the myJSC. 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 s1 As Series = New Series()

Dim el As Element = New Element()
el.Name = "Deposit amount"
el.YValue = 10000
s1.Elements.Add(el)

el = New Element()
el.Name = "Total Interest"
el.YValue = 510.53
s1.Elements.Add(el)
SC.Add(s1)
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>
<script type="text/javascript">
var amount = 10000, term = 6, rate = 10;
function updateChart(depositAmount, investmentTerm, interestRate) {
var interest = JSC.formatNumber((((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)), 'c2');
var balance = JSC.formatNumber(((Math.round(depositAmount/100)*100) + ((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)), 'c2');
myJSC.series(0).points(0).options({y:(Math.round(depositAmount/100)*100)},false);
myJSC.series(0).points(1).options({y:((Math.round(depositAmount/100)*100)*(Math.pow(1+(((Math.round(interestRate*10)/10)/100)/12),Math.round(investmentTerm)))) - (Math.round(depositAmount/100)*100)},false);
myJSC.uiItems('selectedAmount').options({label_text:JSC.formatNumber((Math.round(depositAmount/100)*100), 'c0')});
myJSC.uiItems('selectedTerm').options({label_text:Math.round(investmentTerm) + ' months'});
myJSC.uiItems('selectedRate').options({label_text:(Math.round(interestRate*10)/10) + '%'});
myJSC.uiItems('result').options({label_text:'Balance: <b>' + balance + '</b><br>Interest: <b>'+interest+'</b>'});
myJSC.redraw();
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>