The Chart control offers a built-in annotation tool to allow you to include floating text bars or images in your charts or call attention to specific items or values in your charts using the line and text bar controls included in the Annotation Collection Editor.
The following properties are important when setting up annotations for your chart:
The following code demonstrates creating annotation lines and text bars, setting their properties, and adding them to the series annotations collection at run time. The results are shown in the screen shot above.
To write the code in Visual Basic.NET
Visual Basic.NET code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
' create the annotation lines and text bars Dim aLine1 As New DataDynamics.ActiveReports.Chart.Annotations.AnnotationLine Dim aLine2 As New DataDynamics.ActiveReports.Chart.Annotations.AnnotationLine Dim aText1 As New DataDynamics.ActiveReports.Chart.Annotations.AnnotationTextBar Dim aText2 As New DataDynamics.ActiveReports.Chart.Annotations.AnnotationTextBar ' set the properties for each line and text bar With aLine1 .EndPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 30.0F) .Line = New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2) .StartPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 15.0F) End With With aLine2 .EndPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(4.6F, 47.0F) .Line = New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2) .StartPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(3.6F, 45.0F) End With With aText1 .AnchorPlacement = DataDynamics.ActiveReports.Chart.Annotations.AnchorPlacementType.Bottom .AnchorPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 31.0F) .Height = 25.0F .Line = New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2) .Text = "Min Value" .Width = 100.0F End With With aText2 .AnchorPlacement = DataDynamics.ActiveReports.Chart.Annotations.AnchorPlacementType.Left .AnchorPoint = New DataDynamics.ActiveReports.Chart.Graphics.Point2d(4.7F, 47.0F) .Height = 25.0F .Line = New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2) .Text = "Max Value" .Width = 100.0F End With ' add the annotation lines and text bars to the annotations collection for the series Me.ChartControl1.Series(0).Annotations.AddRange(New DataDynamics.ActiveReports.Chart.Annotations.Annotation() {aLine1, aLine2, aText1, aText2}) |
To write the code in C#
C# code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
// create the annotation lines and text bars DataDynamics.ActiveReports.Chart.Annotations.AnnotationLine aLine1 = new DataDynamics.SharpGraph.Windows.Annotations.AnnotationLine(); DataDynamics.ActiveReports.Chart.Annotations.AnnotationLine aLine2 = new DataDynamics.SharpGraph.Windows.Annotations.AnnotationLine(); DataDynamics.ActiveReports.Chart.Annotations.AnnotationTextBar aText1 = new DataDynamics.SharpGraph.Windows.Annotations.AnnotationTextBar(); DataDynamics.ActiveReports.Chart.Annotations.AnnotationTextBar aText2 = new DataDynamics.SharpGraph.Windows.Annotations.AnnotationTextBar(); // set the properties for each line and text bar aLine1.EndPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 30F); aLine1.Line = new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2); aLine1.StartPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 15F); aLine2.EndPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(4.6F, 47F); aLine2.Line = new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2); aLine2.StartPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(3.6F, 45F); aText1.AnchorPlacement = DataDynamics.ActiveReports.Chart.Annotations.AnchorPlacementType.Bottom; aText1.AnchorPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(1.5F, 31F); aText1.Height = 25F; aText1.Line = new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2); aText1.Text = "Min Value"; aText1.Width = 100F; aText2.AnchorPlacement = DataDynamics.ActiveReports.Chart.Annotations.AnchorPlacementType.Left; aText2.AnchorPoint = new DataDynamics.ActiveReports.Chart.Graphics.Point2d(4.7F, 47F); aText2.Height = 25F; aText2.Line = new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Red, 2); aText2.Text = "Max Value"; aText2.Width = 100F; // add the annotation lines and text bars to the annotations collection for the series this.chartControl1.Series[0].Annotations.AddRange(new DataDynamics.ActiveReports.Chart.Annotations.Annotation[] {aLine1, aLine2, aText1, aText2}); |
The Chart control allows you to add custom titles to your charts. The Titles collection is accessible from the Chart object. With the ability to add as many titles as needed, dock them to any side of a chart area, change all of the font properties, add borders and shadows, make the background look the way you want it, and change the location of the text, you can easily make your titles look the way you want them to look.
The following code demonstrates creating header and footer titles, setting their properties, and adding them to the titles collection at run time.
To write the code in Visual Basic.NET
Visual Basic.NET code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
' create the header and footer titles Dim tHeader As New DataDynamics.ActiveReports.Chart.Title Dim tFooter As New DataDynamics.ActiveReports.Chart.Title ' set the properties for the header tHeader.Alignment = Chart.Alignment.Center tHeader.Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.Thistle) tHeader.Border = New DataDynamics.ActiveReports.Chart.Border(New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.DimGray), 3) tHeader.DockArea = Me.ChartControl1.ChartAreas(0) tHeader.Docking = Chart.DockType.Top tHeader.Font = New DataDynamics.ActiveReports.Chart.FontInfo(System.Drawing.Color.White, New System.Drawing.Font("Arial", 25.0F)) tHeader.Text = "Chart Title" tHeader.Visible = True ' set the properties for the footer tFooter.Alignment = Chart.Alignment.Center tFooter.Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.Thistle) tFooter.Border = New DataDynamics.ActiveReports.Chart.Border(New DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Indigo), 0, System.Drawing.Color.Black) tFooter.DockArea = Me.ChartControl1.ChartAreas(0) tFooter.Docking = Chart.DockType.Bottom tFooter.Font = New DataDynamics.ActiveReports.Chart.FontInfo(System.Drawing.Color.DimGray, New System.Drawing.Font("Arial", 12.0F, System.Drawing.FontStyle.Bold)) tFooter.Text = "Chart Footer" tFooter.Visible = True ' add the header and footer titles to the titles collection Me.ChartControl1.Titles.AddRange(New DataDynamics.ActiveReports.Chart.Title() {tHeader, tFooter}) |
To write the code in C#
C# code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
// create the header and footer titles DataDynamics.ActiveReports.Chart.Title tHeader = new DataDynamics.ActiveReports.Chart.Title(); DataDynamics.ActiveReports.Chart.Title tFooter = new DataDynamics.ActiveReports.Chart.Title(); // set the properties for the header tHeader.Alignment = Chart.Alignment.Center; tHeader.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.Thistle); tHeader.Border = new DataDynamics.ActiveReports.Chart.Border(new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.DimGray), 3); tHeader.DockArea = this.ChartControl1.ChartAreas[0]; tHeader.Docking = Chart.DockType.Top; tHeader.Font = new DataDynamics.ActiveReports.Chart.FontInfo(System.Drawing.Color.White, new System.Drawing.Font("Arial", 25F)); tHeader.Text = "Chart Title"; tHeader.Visible = true; // set the properties for the footer tFooter.Alignment = Chart.Alignment.Center; tFooter.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.Thistle); tFooter.Border = new DataDynamics.ActiveReports.Chart.Border(new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Indigo), 0, System.Drawing.Color.Black); tFooter.DockArea = this.ChartControl1.ChartAreas[0]; tFooter.Docking = Chart.DockType.Bottom; tFooter.Font = new DataDynamics.ActiveReports.Chart.FontInfo(System.Drawing.Color.DimGray, new System.Drawing.Font("Arial", 12F, System.Drawing.FontStyle.Bold)); tFooter.Text = "Chart Footer"; tFooter.Visible = true; // add the header and footer titles to the titles collection this.chartControl1.Titles.AddRange(new DataDynamics.ActiveReports.Chart.Title[] {tHeader,tFooter}); |
The Chart control automatically creates a legend item for each series added to a chart at design time and sets the Legend property for each series by default. However, the legend's Visible property must be set to True for the legend to show with the chart. The text for each default legend entry is taken from the Name property on the series.
The following code demonstrates how to create a legend at run time, add it to the legends collection for the Chart object and set the legend property of the series to the new legend, resulting in the legend shown above.
Note: Each Series to be shown in the Legend must have a Name. If the Name property is not set, the Series does not show up in the Legend.
To write the code in Visual Basic.NET
Visual Basic.NET code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
' create the legend and title for the legend Dim legend1 As New DataDynamics.ActiveReports.Chart.Legend Dim lHeader As New DataDynamics.ActiveReports.Chart.Title ' set the properties for the legend title lHeader.Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(Chart.Graphics.BackdropStyle.Transparent, Color.White, Color.White, Chart.Graphics.GradientType.Vertical, Drawing2D.HatchStyle.DottedGrid, Nothing, Chart.Graphics.PicturePutStyle.Stretched) lHeader.Border = New DataDynamics.ActiveReports.Chart.Border(New Chart.Graphics.Line(Color.White, 2, Chart.Graphics.LineStyle.None), 0, Color.Black) lHeader.Font = New DataDynamics.ActiveReports.Chart.FontInfo(Color.White, New System.Drawing.Font("Arial", 10.0F, FontStyle.Bold)) lHeader.Text = "Series:" ' set the properties for the legend and add it to the legends collection legend1.Alignment = DataDynamics.ActiveReports.Chart.Alignment.TopRight legend1.Backdrop = New DataDynamics.ActiveReports.Chart.BackdropItem(Chart.Graphics.BackdropStyle.Transparent, Color.Gray, Color.White, Chart.Graphics.GradientType.Vertical, Drawing2D.HatchStyle.DottedGrid, Nothing, Chart.Graphics.PicturePutStyle.Stretched) legend1.Border = New DataDynamics.ActiveReports.Chart.Border(New Chart.Graphics.Line(Color.Navy, 2), 0, Color.Black) legend1.DockArea = Me.ChartControl1.ChartAreas(0) legend1.LabelsFont = New DataDynamics.ActiveReports.Chart.FontInfo(Color.White, New System .Drawing.Font("Arial", 9.0F)) legend1.Header = lHeader legend1.MarginX = 5 legend1.MarginY = 5 Me.ChartControl1.Legends.Add(legend1) ' set the legend property of the series to the legend you created Me.ChartControl1.Series(0).Legend = legend1 Me.ChartControl1.Series(1).Legend = legend1 Me.ChartControl1.Series(2).Legend = legend1 |
To write the code in C#
C# code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
// create the legend and title for the legend DataDynamics.ActiveReports.Chart.Legend legend1 = new DataDynamics.ActiveReports.Chart.Legend(); DataDynamics.ActiveReports.Chart.Title lHeader = new DataDynamics.ActiveReports.Chart.Title(); // set the properties for the legend title lHeader.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(Chart.Graphics.BackdropStyle.Transparent, Color.White, Color.White, Chart.Graphics.GradientType.Vertical, System.Drawing.Drawing2D.HatchStyle.DottedGrid, null, Chart.Graphics.PicturePutStyle.Stretched); lHeader.Border = new DataDynamics.ActiveReports.Chart.Border(new Chart.Graphics.Line(Color.White, 2, Chart.Graphics.LineStyle.None), 0, Color.Black); lHeader.Font = new DataDynamics.ActiveReports.Chart.FontInfo(Color.White, new Font("Arial", 10F, FontStyle.Bold)); lHeader.Text = "Series:"; // set the properties for the legend and add it to the legends collection legend1.Alignment = DataDynamics.ActiveReports.Chart.Alignment.TopRight; legend1.Backdrop = new DataDynamics.ActiveReports.Chart.BackdropItem(Chart.Graphics.BackdropStyle.Transparent, Color.Gray, Color.White, Chart.Graphics.GradientType.Vertical, System.Drawing.Drawing2D.HatchStyle.DottedGrid, null, Chart.Graphics.PicturePutStyle.Stretched); legend1.Border = new DataDynamics.ActiveReports.Chart.Border(new Chart.Graphics.Line(Color.Navy, 2), 0, Color.Black); legend1.DockArea = this.sharpGraph1.ChartAreas[0]; legend1.LabelsFont = new DataDynamics.ActiveReports.Chart.FontInfo(Color.White, new Font("Arial", 9F)); legend1.Header = lHeader; legend1.MarginX = 5; legend1.MarginY = 5; this.chartControl1.Legends.Add(legend1); // set the legend property of the series to the legend you created this.chartControl1.Series[0].Legend = legend1; this.chartControl1.Series[1].Legend = legend1; this.chartControl1.Series[2].Legend = legend1; |
Use markers to show specific data series values in a chart.
The following code demonstrates how to create a marker object at run time and assign it to the Marker property of the series. The results are shown in the image above.
To write the code in Visual Basic.NET
Visual Basic.NET code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
' create the marker object Dim marker1 As New DataDynamics.ActiveReports.Chart.Marker ' set the marker properties marker1.Backdrop = New Chart.Graphics.Backdrop(Chart.Graphics.GradientType.Horizontal, Color.Navy, Color.Black) marker1.Line = New Chart.Graphics.Line(Color.White) marker1.Label = New Chart.LabelInfo(New Chart.Graphics.Line(Color.Transparent, 0, Chart.Graphics.LineStyle.None), New Chart.Graphics.Backdrop(Chart.Graphics.BackdropStyle.Transparent, Color.White, Color.White, Chart.Graphics.GradientType.Vertical, System.Drawing.Drawing2D.HatchStyle.DottedGrid, Nothing, Chart.Graphics.PicturePutStyle.Stretched), New Chart.FontInfo(Color.White, New Font("Arial", 8.0F)), "{Value}", Chart.Alignment.Center) marker1.Size = 24 marker1.Style = Chart.MarkerStyle.Diamond ' assign the marker to the series Marker property Me.ChartControl1.Series(0).Marker = marker1 |
To write the code in C#
C# code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
// create the marker object DataDynamics.ActiveReports.Chart.Marker marker1 = new DataDynamics.ActiveReports.Chart.Marker(); // set the marker properties marker1.Backdrop = new Chart.Graphics.Backdrop(Chart.Graphics.GradientType.Horizontal, Color.Navy, Color.Black); marker1.Line = new Chart.Graphics.Line(Color.White); marker1.Label = new Chart.LabelInfo(new Chart.Graphics.Line(Color.Transparent, 0, Chart.Graphics.LineStyle.None), new Chart.Graphics.Backdrop(Chart.Graphics.BackdropStyle.Transparent, Color.White, Color.White, Chart.Graphics.GradientType.Vertical, System.Drawing.Drawing2D.HatchStyle.DottedGrid, null, Chart.Graphics.PicturePutStyle.Stretched), new Chart.FontInfo(Color.White, new Font("Arial", 8F)), "{Value}", Chart.Alignment.Center); marker1.Size = 24; marker1.Style = Chart.MarkerStyle.Diamond; // assign the marker to the series Marker property this.chartControl1.Series[0].Marker = marker1; |
The Chart control supports constant lines and stripes through the use of the WallRanges collection. It allows you to display horizontal or vertical lines or stripes in a chart to highlight certain areas. For example, you could draw a stripe in a chart to draw attention to a high level in the data or draw a line to show the average value of the data presented.
The following code demonstrates how to create wall ranges, set their properties, and assign them to a chart area at run time. The results are shown in the image above.
To write the code in Visual Basic.NET
Visual Basic.NET code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
' create the wall range objects Dim wallRange1 As New DataDynamics.ActiveReports.Chart.WallRange Dim wallRange2 As New DataDynamics.ActiveReports.Chart.WallRange Dim wallRange3 As New DataDynamics.ActiveReports.Chart.WallRange ' set the wall range properties With wallRange1 .Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(Color.White) .Border = New DataDynamics.ActiveReports.Chart.Border(New DataDynamics.ActiveReports.Chart.Graphics.Line(Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, Color.Black) .EndValue = 40 .PrimaryAxis = ((CType(Me.ChartControl1.ChartAreas(0).Axes("AxisY"), DataDynamics.ActiveReports.Chart.Axis))) .StartValue = 30 End With With wallRange2 .Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(Color.Lime) .Border = New DataDynamics.ActiveReports.Chart.Border(New DataDynamics.ActiveReports.Chart.Graphics.Line(Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, Color.Black) .EndValue = 34 .PrimaryAxis = ((CType(Me.ChartControl1.ChartAreas(0).Axes("AxisY"), DataDynamics.ActiveReports.Chart.Axis))) .StartValue = 33 End With With wallRange3 .Backdrop = New DataDynamics.ActiveReports.Chart.Graphics.Backdrop(Color.DarkGreen, CType(150, Byte)) .Border = New DataDynamics.ActiveReports.Chart.Border(New DataDynamics.ActiveReports.Chart.Graphics.Line(Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, Color.Black) .EndValue = 40 .PrimaryAxis = ((CType(Me.ChartControl1.ChartAreas(0).Axes("AxisZ"), DataDynamics.ActiveReports.Chart.Axis))) .StartValue = 20 End With ' add the wall ranges to the chart area and set wall and Z axis properties to show lines With ChartControl1.ChartAreas(0) .WallRanges.AddRange(New DataDynamics.ActiveReports.Chart.WallRange() {wallRange1, wallRange2, wallRange3}) .WallXY.Backdrop.Alpha = 100 .WallXZ.Backdrop.Alpha = 100 .WallYZ.Backdrop.Alpha = 100 .Axes(4).MajorTick.Step = 20 .Axes(4).Max = 60 .Axes(4).Min = 0 .Axes(4).Visible = True End With |
To write the code in C#
C# code. Paste INSIDE the section Format event. |
Copy Code |
---|---|
// create the wall range objects DataDynamics.ActiveReports.Chart.WallRange wallRange1 = new DataDynamics.ActiveReports.Chart.WallRange(); DataDynamics.ActiveReports.Chart.WallRange wallRange2 = new DataDynamics.ActiveReports.Chart.WallRange(); DataDynamics.ActiveReports.Chart.WallRange wallRange3 = new DataDynamics.ActiveReports.Chart.WallRange(); // set the wall range properties wallRange1.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.White); wallRange1.Border = new DataDynamics.ActiveReports.Chart.Border(new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, System.Drawing.Color.Black); wallRange1.EndValue = 40; wallRange1.PrimaryAxis = (DataDynamics.ActiveReports.Chart.Axis)this.ChartControl1.ChartAreas[0].Axes["AxisY"]; wallRange1.StartValue = 30; wallRange2.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.Lime); wallRange2.Border = new DataDynamics.ActiveReports.Chart.Border(new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, System.Drawing.Color.Black); wallRange2.EndValue = 34; wallRange2.PrimaryAxis = (DataDynamics.ActiveReports.Chart.Axis)this.ChartControl1.ChartAreas[0].Axes["AxisY"]; wallRange2.StartValue = 33; wallRange3.Backdrop = new DataDynamics.ActiveReports.Chart.Graphics.Backdrop(System.Drawing.Color.DarkGreen); wallRange3.Border = new DataDynamics.ActiveReports.Chart.Border(new DataDynamics.ActiveReports.Chart.Graphics.Line(System.Drawing.Color.Transparent, 0, DataDynamics.ActiveReports.Chart.Graphics.LineStyle.None), 0, System.Drawing.Color.Black); wallRange3.EndValue = 40; wallRange3.PrimaryAxis = (DataDynamics.ActiveReports.Chart.Axis)this.ChartControl1.ChartAreas[0].Axes["AxisZ"]; wallRange3.StartValue = 20; // add the wall ranges to the chart area and set wall and Z axis properties to show lines this.chartControl1.ChartAreas[0].WallRanges.AddRange(new DataDynamics.ActiveReports.Chart.WallRange[] {wallRange1,wallRange2,wallRange3}); this.chartControl1.ChartAreas[0].WallXY.Backdrop.Alpha = 100; this.chartControl1.ChartAreas[0].WallXZ.Backdrop.Alpha = 100; this.chartControl1.ChartAreas[0].WallYZ.Backdrop.Alpha = 100; this.chartControl1.ChartAreas[0].Axes[4].MajorTick.Step = 20; this.chartControl1.ChartAreas[0].Axes[4].Max = 60; this.chartControl1.ChartAreas[0].Axes[4].Min = 0; this.chartControl1.ChartAreas[0].Axes[4].Visible = true; |