Gallery

Gallery > Heatmap Charts

JS Status Map Timeline

Demonstrates a status map timeline chart.

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" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a status map timeline chart.
Chart.Type = ChartType.Heatmap;
Chart.DefaultSeries.GaugeType = GaugeType.Horizontal;
Chart.Size = "800x80";
Chart.TempDirectory = "temp";
Chart.Debug =true;
Chart.JS.Enabled = true;
Chart.Title = "Facebook Status";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;

Chart.YAxis.Interval = 25;
Chart.YAxis.Scale = Scale.Time;
Chart.DefaultAxis.DefaultTick.Line.Visible = false;
Chart.XAxis.DefaultTick.Label.Text = "";
Chart.DefaultElement.Outline.Color = Color.White;

Chart.JS.Settings.Add("defaultSeries_legendEntry_visible","false");
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("HEALTHY", "", Color.Green));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("ISSUE", "", ColorTranslator.FromHtml("#FFEA00")));
Chart.LegendBox.ExtraEntries.Add(new LegendEntry("DOWNTIME", "", Color.Red));

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/facebook-status.csv";
de.DataFields = "yvalue=date,zValue=status";//cvs must have header

SeriesCollection sc = de.GetSeries();
foreach (Element el in sc[0].Elements)
{
el.Name = "Facebook";
if (el.ZValue == 0)
{
el.Color = Color.Green;
el.ToolTip = "{%value:date d} <br>Status: <b>HEALHTY</b>";
}
else if (el.ZValue == 1)
{
el.Color = ColorTranslator.FromHtml("#FFEA00");
el.ToolTip = "{%value:date d} <br>Status: <b>ISSUE</b>";
}
else
{
el.Color = Color.Red;
el.ToolTip = "{%value:date d} <br>Status: <b>DOWNTIME</b>";
}
}

Chart.SeriesCollection.Add(sc);

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</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" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a status map timeline chart.
Chart.Type = ChartType.Heatmap
Chart.DefaultSeries.GaugeType = GaugeType.Horizontal
Chart.Size = "800x80"
Chart.TempDirectory = "temp"
Chart.Debug =True
Chart.JS.Enabled = True
Chart.Title = "Facebook Status"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend

Chart.YAxis.Interval = 25
Chart.YAxis.Scale = Scale.Time
Chart.DefaultAxis.DefaultTick.Line.Visible = False
Chart.XAxis.DefaultTick.Label.Text = ""
Chart.DefaultElement.Outline.Color = Color.White

Chart.JS.Settings.Add("defaultSeries_legendEntry_visible","false")
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("HEALTHY", "", Color.Green))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("ISSUE", "", ColorTranslator.FromHtml("#FFEA00")))
Chart.LegendBox.ExtraEntries.Add(New LegendEntry("DOWNTIME", "", Color.Red))

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/facebook-status.csv"
de.DataFields = "yvalue=date,zValue=status" 'cvs must have header

Dim sc As SeriesCollection = de.GetSeries()
For Each el As Element In sc(0).Elements
el.Name = "Facebook"
If el.ZValue = 0 Then
el.Color = Color.Green
el.ToolTip = "{%value:date d} <br>Status: <b>HEALHTY</b>"
ElseIf el.ZValue = 1 Then
el.Color = ColorTranslator.FromHtml("#FFEA00")
el.ToolTip = "{%value:date d} <br>Status: <b>ISSUE</b>"
Else
el.Color = Color.Red
el.ToolTip = "{%value:date d} <br>Status: <b>DOWNTIME</b>"
End If
Next el

Chart.SeriesCollection.Add(sc)

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsStatusMapTimeline.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS Status Map Timeline