Gallery

Gallery > Advanced Customization

Post Render Drawing

Demonstrates how to modify the chart image programmatically after rendering using GDI+.

Download Show C# Code Show VB Code

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

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'dotnetCHARTING.Chart Chart = new dotnetCHARTING.Chart();

Chart.Type = ChartType.Combo 'Horizontal;
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"

' First we get our data, if you would like to get the data from a database you need to use
' the data engine. See sample: features/dataEngine.aspx. Or the dataEngine tutorial in the help file.
Dim s As Series = getRandomData()

' Add the random data.
Chart.SeriesCollection.Add(s)

'Get a bitmap of the chart.
Dim bmp As Bitmap = Chart.GetChartBitmap()

' Create a graphics object from the bitmap
Dim g As Graphics = Graphics.FromImage(bmp)

' After the chart is generated, the element's positions are available.
' Lets iterate the elements we have added and make an array of these positions.
Dim points As PointF() = New PointF(s.Elements.Count - 1){}
Dim i As Integer = 0
Do While i < s.Elements.Count
points(i) = s.Elements(i).Point
i += 1
Loop

' Draw a curve connecting the points.
g.DrawCurve(Pens.Red,points)

' Draw a string on the first element
g.DrawString("First Element",New Font("Arial",10),Brushes.Black,points(0))

g.Dispose()

'Save the image using the FileManager.
Chart.FileManager.SaveImage(bmp)

End Sub

Function getRandomData() As Series
Dim myR As Random = New Random()
Dim s As Series = New Series("My Series")
For b As Integer = 1 To 4
Dim e As Element = New Element("Element " & b, myR.Next(50))
s.Elements.Add(e)
Next b
Return s
End Function

</script>
</head>
<body>
<div style="text-align:center">

<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px" Depth="13px" Use3D="True">
</dotnet:Chart>

</div>
</body>
</html>

Sample FilenamePostRenderDrawing.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseNo

JS Charting

Gallery

Post Render Drawing