Tutorial 5: Web animated chart (ASP.NET web projects)
« on: February 04, 2016, 12:52:27 PM »
This example illustrates how to render an animated chart (animated GIF) 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]
<img src="chart1.aspx"/>
The second web form ("chart1.aspx") will render the chart. The output is "captured" by the HTML tag of the first web form.

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 <img src="chart1.aspx"> between <body> and </body> tags.
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 (chart1.aspx) to the web project project and copy&paste the following code in the Page_Load event:

Code: [Select]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   Dim oGraph As New CrossingChartsLibrary.CrossingCharts
   ' First, create a sample chart
   ' Get some random values ...
   Dim arrSeries(1) As ArrayList
   For k As Integer = 0 To UBound(arrSeries)
      arrSeries(k) = New ArrayList
      For j As Integer = 0 To 5
         arrSeries(k).Add(Rnd() * 1000)
      Next
   Next

   ' Assign properties to Crossing Charts control ...
   With oGraph
      .AutoRefresh = False             ' This prevents unnecessary redraws

      .Series = arrSeries              ' Assign previous random values
      .Title = "Equipment Chart"       ' Title of the chart
      .Style = CrossingChartsLibrary.STYLE2D3D.STYLE2D_ACUM_FIXED
      .CastShadows = True
      .Width = 500                     ' Chart width
      .Height = 320                    ' Chart height
      .BackColor = System.Drawing.Color.LightYellow ' Background color
      .BackStyle = CrossingChartsLibrary.STYLEBACKGROUND.
                        STYLEBACKGROUND_GRADIENT_TUBULAR_INVERTED
      .Calculation = CrossingChartsLibrary.
                        CALCULATION.CALCULATION_AVERAGE_SPLINE
      .ShowDataTable = False ' Don't need to show the datatable this time
      .ShowLegend = False       ' Don't want legend
      .ShowDividerX = False     ' Don't show vertical dividers
      .YAxisNumericFormat = "0" ' No decimals on Y-axis
      .ValuesFormat = "0"       ' No decimals on values
      .Quality = System.Drawing.Drawing2D.
                        SmoothingMode.HighQuality ' Best result
   End With
   ' Change the response headers to output a GIF image.
   Response.Clear()
   Response.ContentType = "image/gif"
   ' Create animated gif and output it to browser.
   Dim frames As Integer = 15
   Dim speed As Integer = 20
   Dim repeat As Boolean = False
   Dim animationStyle As CrossingChartsLibrary.STYLEANIMATION =
          CrossingChartsLibrary.STYLEANIMATION.STYLEANIMATION_WAVE
   Dim gif As System.Drawing.Image = _
      oGraph.CreateAnimatedGIF(frames, speed, repeat, animationStyle)
   gif.Save(Response.OutputStream, _
      System.Drawing.Imaging.ImageFormat.Gif)
   ' Dispose of the graph control
   oGraph.Dispose()
End Sub

Results:

« Last Edit: February 16, 2016, 08:57:03 AM by CrossingCharts »