Example 6: Vector charts (SVG)
This example illustrates
how to render an vector chart in SVG (Scalable
Vector Graphics) format on a web browser. No
temporary files are involved (all processing
is done in memory on the fly).
You need two web forms.
The first form will contain the chart.
Insert the following HTML tag wherever you
want the chart to be drawn:
< embed
width="450"
height="400"
src="StackedBarChart.aspx?.svg"
pluginspage="http://www.adobe.com/svg/viewer/install/"
type="image/svg+xml"
/>
The second web form
("StackedBarChart.aspx") will render the chart. The
output is "captured" by the HTML tag of the
first web form.
(Note the "?.svg" suffix
in the src attribute of the <embed> tag.
This is neccesary to avoid MIME conflicts
with IIS or Visual Studio).
Steps:
1. Create a new ASP.NET
application project (VB.NET)
2. Add a web page (default.aspx)
to the web project and insert the <embed...>
tag between <body> and </body> tags
as described above.
3. Add a reference to
Super 2d/3d Graph Library and to
System.Windows.Forms (this one is necessary
for the library to operate on web
environments)
4. Add a second web page
(StackedBarChart.aspx) to the web project project and
copy&paste the following code in the
Page_Load event:
Form Code
Imports
System.Drawing
Partial
Public
Class
StackedAreaChart
Inherits
System.Web.UI.Page
Protected
Sub
Page_Load(ByVal
sender
As
Object,
ByVal e
As
System.EventArgs)
Handles
Me.Load
Dim
oGraph
As
New
Super2d3dGraphLibrary.Super2D3dGraph
Dim svg
As
String
' First, create a sample chart
' Get some random values ...
Dim
arrSeries(2)
As
ArrayList
For k
As
Integer
= 0
To
UBound(arrSeries)
arrSeries(k) =
New
ArrayList
For j
As
Integer
= 0
To
11
arrSeries(k).Add(Rnd() * Math.Abs(j - 5.5) *
50 + 25)
Next
Next
' Assign properties to Super2d/3dGraphLibrary
control ...
With
oGraph
.AutoRefresh =
False
' Don't refresh until I want
.LicenseeIdentifier =
"PROF"
.Series = arrSeries
' Assign previous random values to the chart
.Title =
"Snow amount last years"
' Title of the chart
.Style = Super2d3dGraphLibrary.STYLE2D3D.STYLE3D_STACKED_BAR
.Width = 450
' Chart width
.Height = 400
' Char height
.BackStyle =
Super2d3dGraphLibrary.
STYLEBACKGROUND.STYLEBACKGROUND_GRADIENT_INVERTED
.ShowLegend
=
False
' Don't show legend
.YAxisNumericFormat =
"0"
' No decimals on Y-axis
.ValuesFormat =
"0"
' No decimals on values in the datatable
.SeriesLegend =
New
String()
{"2004",
"2005",
"2006"}
.SeriesColor =
New
Drawing.Color() {Color.White,
Color.LightBlue,
Color.BlanchedAlmond}
.ItemsLegend =
New
String()
{"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dec"}
.DataTableFont =
New Font("Arial",
10, FontStyle.Regular,
GraphicsUnit.Point)
.ShowXAxis =
True
.ShowDividerX =
True
.ShowItemsLegend =
True
.ShowValues =
False
.DataTableBackColor = Color.Aquamarine
.MarkHighest =
True
.MarkLowest =
True
.MarginLeft = 0
.Quality = Drawing2D.SmoothingMode.HighQuality
' Best result
' Get SVG xml document and write to response
stream
svg = oGraph.CreateSVG(False)
End
With
' Free memory - dispose of the graph control
oGraph.Dispose()
' Change the response headers to output a
SVG graph.
Response.Clear()
Response.ContentType =
"image/svg+xml"
Response.Write(svg)
Response.End()
End
Sub
End
Class
Result:
(To see the above chart you need a SVG enabled browser, like Firefox or Opera or get an SVG plugin for IE here)
 |
