Gallery

Gallery > Chart Type Tweaks

Faux Line Shadow

Demonstrates how a line series drop shadow can be emulated.

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="dotnetCHARTING.Mapping" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates how a line series drop shadow can be emulated.

Chart.Size = "600x350";
//Chart.Title = ".netCHARTING Sample";
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.LegendBox.Visible = false;

Chart.Palette = new Color[] { Color.Crimson };
// Set series type.
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultElement.Marker.Visible = false;

// Set default line properties.
Chart.DefaultSeries.Line.Width = 10;
Chart.DefaultSeries.Line.AnchorCapScale = 2;
Chart.DefaultSeries.Line.EndCap = LineCap.ArrowAnchor;

// Two identical series are created.
Series s1 = Series.FromYValues(10, 20, 15, 30);
Series shadowS = Series.FromYValues(10, 20, 15, 30);

// Find the max value of the series
double max = s1.Calculate("", Calculation.Maximum).YValue;

// Now subtract a percentage of the max from the shadow series
foreach (Element el in shadowS.Elements)
{
el.YValue -= max * .03;
}
shadowS.Elements[0].Name =s1.Elements[0].Name = "A";
shadowS.Elements[1].Name =s1.Elements[1].Name = "B";
shadowS.Elements[2].Name =s1.Elements[2].Name = "C";
shadowS.Elements[3].Name =s1.Elements[3].Name = "D";
// A shadow series gets a gray and translucent color and added to the chart.
shadowS.DefaultElement.Color = Color.Gray;
shadowS.DefaultElement.Transparency = 70;
Chart.SeriesCollection.Add(shadowS);

// The main series is added after the shadow series so it can render on top of it.
Chart.SeriesCollection.Add(s1);
}

</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="dotnetCHARTING.Mapping" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how a line series drop shadow can be emulated.

Chart.Size = "600x350"
'Chart.Title = ".netCHARTING Sample";
Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.LegendBox.Visible = False

Chart.Palette = New Color() { Color.Crimson }
' Set series type.
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultElement.Marker.Visible = False

' Set default line properties.
Chart.DefaultSeries.Line.Width = 10
Chart.DefaultSeries.Line.AnchorCapScale = 2
Chart.DefaultSeries.Line.EndCap = LineCap.ArrowAnchor

' Two identical series are created.
Dim s1 As Series = Series.FromYValues(10, 20, 15, 30)
Dim [shadowS] As Series = Series.FromYValues(10, 20, 15, 30)

' Find the max value of the series
Dim max As Double = s1.Calculate("", Calculation.Maximum).YValue

' Now subtract a percentage of the max from the shadow series
For Each el As Element In [shadowS].Elements
el.YValue -= max *.03
Next el
s1.Elements(0).Name = "A"
[shadowS].Elements(0).Name =s1.Elements(0).Name
s1.Elements(1).Name = "B"
[shadowS].Elements(1).Name =s1.Elements(1).Name
s1.Elements(2).Name = "C"
[shadowS].Elements(2).Name =s1.Elements(2).Name
s1.Elements(3).Name = "D"
[shadowS].Elements(3).Name =s1.Elements(3).Name
' A shadow series gets a gray and translucent color and added to the chart.
[shadowS].DefaultElement.Color = Color.Gray
[shadowS].DefaultElement.Transparency = 70
Chart.SeriesCollection.Add([shadowS])

' The main series is added after the shadow series so it can render on top of it.
Chart.SeriesCollection.Add(s1)
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 FilenameFauxLineShadow.aspx
Version6.2
Uses DatabaseNo

JS Charting

Gallery

Faux Line Shadow