Tutorial 50: Gantt Chart in ASP.NET
« on: February 05, 2016, 01:30:46 AM »
This example illustrates how to render a Gantt chart 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 (Default.aspx) will contain the chart (generated by WebForm1.aspx). Insert the following HTML tag wherever you want the chart to be drawn in Default.aspx:
 
Code: [Select]
<img src="WebForm1.aspx"/>
The second web form ("WebForm1.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="WebForm1.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 (WebForm1.aspx) to the web project project and copy&paste the following code in the page's code behind:

Code: [Select]
Imports System.Drawing
Imports System.Drawing.Imaging
Imports CrossingChartsLibrary
Imports System.IO
Partial Public Class WebForm1
  Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Dim CrossingCharts1 As New CrossingCharts
  Dim sf As New SeriesFactory
  ' Add several demo tasks specifying start date, end date and % completed
  sf.AddTask(#1/1/2007#, #1/15/2007#, 0.55)
  sf.AddTask(#1/16/2007#, #1/31/2007#, 0.3)
  sf.AddTask(#2/1/2007#, #2/25/2007#, 0.5)
  sf.AddTask(#2/8/2007#, #3/29/2007#, 0.85)
  sf.AddTask(#4/8/2007#, #5/29/2007#, 0)
  sf.AddTask(#5/8/2007#, #6/29/2007#, 0)
  sf.AddTask(#6/8/2007#, #7/29/2007#, 0)
  sf.AddTask(#6/16/2007#, #10/18/2007#, 0)
  sf.AddTask(#3/9/2007#, #7/22/2007#, 0)
  With CrossingCharts1
    .Title = "My test project"
    .Style = STYLE2D3D.STYLE2D_GANTT
    .ShowLegend = False
    .ShowDataTable = False
    .ShowValues = False
    ' Assign tasks to the chart:
    .Series = sf.Series ' Assign tasks to the chart
    .SeriesColor = New Color() {Color.Yellow} ' Color for the tasks
    .ItemsLegend = New String() {"Task 1", "Task 2", "Task 3", "Task 4", "Task 5", "Task 6", "Task 7", "Task 8", "Task 9"} ' Name of the tasks
    .YAxisTitle = "Tasks" ' Title for all tasks
    ' X-axis configuration:
    .ShowXAxis = True
    .XAxisTitle = "Time"
    .ShowDividersX = True
    .XAxisLabelsRotated = True
    ' Additional configuration:
    .ValuesFormat = "p0" ' Show value as a percentage without decimals
    .ShowSurface = True ' Show past time filled with color
    .GanttSetToday = #5/15/2007# ' Set "Today" line date position
    .GanttSetTodayLabel = "Today"
    .RefreshChart()
  End With
  ' Save image in a temporary buffer (PNG format for best quality)
  Dim io As MemoryStream = New MemoryStream()
  CrossingCharts1.Image.Save(io, ImageFormat.Png)
  ' Output the content of the buffer to the browser
  Response.Clear()
  Response.ContentType = "image/png"
  Response.BinaryWrite(io.GetBuffer())
End Sub
End Class

Results:

« Last Edit: February 16, 2016, 11:21:39 AM by CrossingCharts »