Tutorial 6: Vector charts (SVG)
« on: February 04, 2016, 01:01:32 PM »
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:
 
Code: [Select]
<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 Crossing Charts 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:

Code: [Select]
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 CrossingChartsLibrary.CrossingCharts
      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 Crossing Charts control ...
      With oGraph
         .AutoRefresh = False ' Don't refresh until I want
         .Series = arrSeries ' Assign previous random values to the chart
         .Title = "Snow amount last years" ' Title of the chart
         .Style = CrossingChartsLibrary.STYLE2D3D.STYLE3D_STACKED_BAR
         .Width = 450  ' Chart width
         .Height = 400 ' Char height
         .BackStyle = CrossingChartsLibrary.
                  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
         .ShowDividersX = 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

Results:


(To see the above chart you need a SVG enabled browser, like Firefox or Opera or get an SVG plugin for IE here)
« Last Edit: February 16, 2016, 09:09:43 AM by CrossingCharts »