Gallery

Gallery > Chart Type Tweaks

Element Markers

Demonstrates using image markers on elements and in the legend.

Download Show C# Code Show VB Code

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

void Page_Load(Object sender,EventArgs e)
{

Chart.Type = ChartType.Combo;
Chart.Width = 700;
Chart.Height = 300;
Chart.TempDirectory = "temp";
Chart.Debug = true;

// Demonstrates using image markers on elements and in the legend.
Chart.YAxis.LineBreaks.Custom = new double[] { 1000000, 520000 };
// Markers dont show up on columns by default therefore we force them all to show up with the force marker property.
Chart.DefaultSeries.DefaultElement.ForceMarker = true;

// The legend must display our marker icon so we set the series type to marker.
Chart.DefaultSeries.DefaultElement.LegendEntry.SeriesType = SeriesType.Marker;

//Set the legend entry marker size
Chart.DefaultSeries.DefaultElement.LegendEntry.Marker.Size= 15;

// y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)";
Chart.YAxis.SmartScaleBreak = true;
Chart.YAxis.ScaleBreakLine.Width = 2;
Chart.YAxis.ScaleBreakLine.Color = Color.LightGray;// Color.Red;
Chart.YAxis.ScaleBreakLine.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;

// Add the first element.
Chart.Series.Element.Name = "United States";
Chart.Series.Element.YValue = 5452500;
// Specify the image for the us flag.
Chart.Series.Element.Marker.ImagePath = "../../images/us.png";

// Add the element
Chart.Series.Elements.Add();

// Repeat for other elements.

Chart.Series.Element.Name = "Canada";
Chart.Series.Element.YValue = 786052;
Chart.Series.Element.Marker.ImagePath = "../../images/ca.png";
Chart.Series.Elements.Add();

Chart.Series.Element.Name = "United Kingdom";
Chart.Series.Element.YValue = 477338;
Chart.Series.Element.Marker.ImagePath = "../../images/uk.png";
Chart.Series.Elements.Add();

Chart.Series.Element.Name = "Mexico";
Chart.Series.Element.YValue = 155313;
Chart.Series.Element.Marker.ImagePath = "../../images/mx.png";
Chart.Series.Elements.Add();

// In order to show each element in the legend we set the palette property for our series.
Chart.Series.PaletteName = Palette.Default;

// Finally we add the series.
Chart.SeriesCollection.Add();

}
</script>
</head>
<body>
<br>
<div style="text-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" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Element Markers</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

Chart.Type = ChartType.Combo
Chart.Width = 700
Chart.Height = 300
Chart.TempDirectory = "temp"
Chart.Debug = True

' Demonstrates using image markers on elements and in the legend.
Chart.YAxis.LineBreaks.Custom = New Double() { 1000000, 520000 }
' Markers dont show up on columns by default therefore we force them all to show up with the force marker property.
Chart.DefaultSeries.DefaultElement.ForceMarker = True

' The legend must display our marker icon so we set the series type to marker.
Chart.DefaultSeries.DefaultElement.LegendEntry.SeriesType = SeriesType.Marker

'Set the legend entry marker size
Chart.DefaultSeries.DefaultElement.LegendEntry.Marker.Size= 15

' y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)"
Chart.YAxis.SmartScaleBreak = True
Chart.YAxis.ScaleBreakLine.Width = 2
Chart.YAxis.ScaleBreakLine.Color = Color.LightGray ' Color.Red;
Chart.YAxis.ScaleBreakLine.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash

' Add the first element.
Chart.Series.Element.Name = "United States"
Chart.Series.Element.YValue = 5452500
' Specify the image for the us flag.
Chart.Series.Element.Marker.ImagePath = "../../images/us.png"

' Add the element
Chart.Series.Elements.Add()

' Repeat for other elements.

Chart.Series.Element.Name = "Canada"
Chart.Series.Element.YValue = 786052
Chart.Series.Element.Marker.ImagePath = "../../images/ca.png"
Chart.Series.Elements.Add()

Chart.Series.Element.Name = "United Kingdom"
Chart.Series.Element.YValue = 477338
Chart.Series.Element.Marker.ImagePath = "../../images/uk.png"
Chart.Series.Elements.Add()

Chart.Series.Element.Name = "Mexico"
Chart.Series.Element.YValue = 155313
Chart.Series.Element.Marker.ImagePath = "../../images/mx.png"
Chart.Series.Elements.Add()

' In order to show each element in the legend we set the palette property for our series.
Chart.Series.PaletteName = Palette.Default

' Finally we add the series.
Chart.SeriesCollection.Add()

End Sub
</script>
</head>
<body>
<br>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameElementMarkers.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseNo

JS Charting

Gallery

Element Markers