Gallery

Gallery > Labels

JS Water Heating Curve

This sample deomonstrates using superscript and subscript label tags to display formulas.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample deomonstrates using superscript and subscript label tags to display formulas.
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.Size = "740x400";
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Heating Curve for Water";
Chart.TitleBox.Label.Font = new Font("Tahoma",10, FontStyle.Bold);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.ClearColors();
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;
Chart.ChartArea.ClearColors();
Annotation an = new Annotation();
an.Label.Text =@"Q - the quantity of heat m - mass of the water С - specific heat ΔT - temperature change ΔHf/v - heat of fusion and vaporization";
an.Position = new Point(480, 180);
an.ClearColors();
an.Background.Color = Color.White;
an.Background.Transparency = 40;
Chart.Annotations.Add(an);

Chart.YAxis.Label.Text = "Temperature (℃)";
Chart.YAxis.Scale = Scale.Normal;
Chart.YAxis.Interval = 100;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.Line.Width = 2;
Chart.YAxis.Line.StartCap = LineCap.Round;
Chart.YAxis.Line.EndCap = LineCap.ArrowAnchor;

Chart.XAxis.Label.Text = "Enegry (kJ)";
Chart.XAxis.ScaleRange.ValueLow = 0;
Chart.XAxis.DefaultTick.Value = "";
Chart.XAxis.JsID = "x1";
Chart.XAxis.Line.Width = 1;
Chart.XAxis.Line.EndCap = LineCap.ArrowAnchor;
Chart.ChartArea.Background.Color = Color.Empty;
Chart.DefaultSeries.Line.Width = 3;
Chart.DefaultSeries.DefaultElement.Marker.Visible = false;

AxisMarker am1 = new AxisMarker("ice", new Background(Color.FromArgb(160, 144,202,249)), 0, 15);
am1.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.XAxis.Markers.Add(am1);

AxisMarker am2 = new AxisMarker("ice + water", new Background(Color.FromArgb(160, 66,165,245)), 15,45);
am2.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.XAxis.Markers.Add(am2);

AxisMarker am3 = new AxisMarker("water", new Background(Color.FromArgb(160,30,136,229)),45,60);
am3.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.XAxis.Markers.Add(am3);

AxisMarker am4 = new AxisMarker("water + steam", new Background(Color.FromArgb(160, 126,87,194)), 60,90);
am4.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.XAxis.Markers.Add(am4);

AxisMarker am5 = new AxisMarker("steam", new Background(Color.FromArgb(160, 171,71,188)), 90,105);
am5.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.XAxis.Markers.Add(am5);

AxisTick at = new AxisTick();
at.Label.Text = "Q1 = m*C*ΔT";
at.Value = "[0,15]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.0.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.0.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Q2 = m*ΔHfusion";
at.Value = "[15, 45]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.1.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.1.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Q3 = m*C*ΔT";
at.Value = "[45,60]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.2.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.2.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Q4 = m*ΔHvaporization";
at.Value = "[60, 90]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.3.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.3.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Q5 = m*C*ΔT";
at.Value = "[90, 105]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.4.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.4.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Qtotal = Q1 + Q2 + Q3 + Q4 + Q5";
at.Value = "[0, 105]";
at.Line.Width = 2;
Chart.XAxis.ExtraTicks.Add(at);
Chart.JS.Settings.Add("xAxis.customTicks.5.rangeMode", "'curly'");
Chart.JS.Settings.Add("xAxis.customTicks.5.label_placement", "'outside'");

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);

}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.Name = "Water Phases";
s.Elements.Add(new Element("", 0, -90));
s.Elements.Add(new Element("", 15, 0));
s.Elements.Add(new Element("", 45, 0));
s.Elements.Add(new Element("", 60, 100));
s.Elements.Add(new Element("", 90, 100));
s.Elements.Add(new Element("", 105, 190));

SC.Add(s);

return SC;
}

</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample deomonstrates using superscript and subscript label tags to display formulas.
Chart.DefaultSeries.Type = SeriesType.Line
Chart.Size = "740x400"
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "Heating Curve for Water"
Chart.TitleBox.Label.Font = New Font("Tahoma",10, FontStyle.Bold)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.ClearColors()
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False
Chart.ChartArea.ClearColors()
Dim an As Annotation = New Annotation()
an.Label.Text ="Q - the quantity of heat m - mass of the water ? - specific heat ?T - temperature change ?Hf/v - heat of fusion and vaporization"
an.Position = New Point(480, 180)
an.ClearColors()
an.Background.Color = Color.White
an.Background.Transparency = 40
Chart.Annotations.Add(an)

Chart.YAxis.Label.Text = "Temperature (?)"
Chart.YAxis.Scale = Scale.Normal
Chart.YAxis.Interval = 100
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.Line.Width = 2
Chart.YAxis.Line.StartCap = LineCap.Round
Chart.YAxis.Line.EndCap = LineCap.ArrowAnchor

Chart.XAxis.Label.Text = "Enegry (kJ)"
Chart.XAxis.ScaleRange.ValueLow = 0
Chart.XAxis.DefaultTick.Value = ""
Chart.XAxis.JsID = "x1"
Chart.XAxis.Line.Width = 1
Chart.XAxis.Line.EndCap = LineCap.ArrowAnchor
Chart.ChartArea.Background.Color = Color.Empty
Chart.DefaultSeries.Line.Width = 3
Chart.DefaultSeries.DefaultElement.Marker.Visible = False

Dim am1 As AxisMarker = New AxisMarker("ice", New Background(Color.FromArgb(160, 144,202,249)), 0, 15)
am1.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.XAxis.Markers.Add(am1)

Dim am2 As AxisMarker = New AxisMarker("ice + water", New Background(Color.FromArgb(160, 66,165,245)), 15,45)
am2.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.XAxis.Markers.Add(am2)

Dim am3 As AxisMarker = New AxisMarker("water", New Background(Color.FromArgb(160,30,136,229)),45,60)
am3.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.XAxis.Markers.Add(am3)

Dim am4 As AxisMarker = New AxisMarker("water + steam", New Background(Color.FromArgb(160, 126,87,194)), 60,90)
am4.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.XAxis.Markers.Add(am4)

Dim am5 As AxisMarker = New AxisMarker("steam", New Background(Color.FromArgb(160, 171,71,188)), 90,105)
am5.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.XAxis.Markers.Add(am5)

Dim at As AxisTick = New AxisTick()
at.Label.Text = "Q1 = m*C*?T"
at.Value = "[0,15]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.0.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.0.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Q2 = m*?Hfusion"
at.Value = "[15, 45]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.1.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.1.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Q3 = m*C*?T"
at.Value = "[45,60]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.2.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.2.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Q4 = m*?Hvaporization"
at.Value = "[60, 90]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.3.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.3.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Q5 = m*C*?T"
at.Value = "[90, 105]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.4.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.4.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Qtotal = Q1 + Q2 + Q3 + Q4 + Q5"
at.Value = "[0, 105]"
at.Line.Width = 2
Chart.XAxis.ExtraTicks.Add(at)
Chart.JS.Settings.Add("xAxis.customTicks.5.rangeMode", "'curly'")
Chart.JS.Settings.Add("xAxis.customTicks.5.label_placement", "'outside'")

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getRandomData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.Name = "Water Phases"
s.Elements.Add(New Element("", 0, -90))
s.Elements.Add(New Element("", 15, 0))
s.Elements.Add(New Element("", 45, 0))
s.Elements.Add(New Element("", 60, 100))
s.Elements.Add(New Element("", 90, 100))
s.Elements.Add(New Element("", 105, 190))

SC.Add(s)

Return SC
End Function

</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsWaterHeatingCurve.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Water Heating Curve