jChart - Pie Chart Demo

jChart - Pie Chart Example

The pie chart uses the PieOverlay overlay type and can display multiple series on a single chart.

ASP.NET 2.0 example

HTML

This is the HTML that displays the chart on the page. The image map is optional and is used to implement drill-down.

    <div>
    <img src="<%=me.ImageURL %>" alt="" usemap="#MyMap" />
    
    <map id="Map1" name="MyMap">
    <%=Me.ImageMap%>
    </map>
    </div>

Code-Behind

The following code uses two environment variables.

Application("TempPath") is an application variable that contains the path to the directory in which temporary images should be stored in the format "c:\mywebsite\temp\"

Session("TempURL") is a session variable that contains the base URL of the directory in which temporary images are be stored in the format "http://myhost/temp/"

The chart object should be global as it is initialized in the Page_Load function and then referenced by the ImageURL and ImageMap functions later on.

    Dim moChart As jChart.GraphChart

The Page_Load event is where the heavy lifting gets done. It is here that the appearance of the chart (background color, size, chart type, etc.) is set, and series are created and added to the chart.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '---Let's set up the chart.
        '   We'll make it 600 pixels wide by 400 pixels high.        
        moChart = New jChart.GraphChart(600, 400)

        '---We'll specify a 10 pixel border all the way around the inside
        '   edge of the chart.
        moChart.ChartDimensions.FrameSize = 10

        '---Pie charts do not have Y Axes
        moChart.ChartDimensions.YAxis1LabelColumnWidth = 0

        '---Pie charts do not have X axes
        moChart.ChartDimensions.XAxisLabelRowHeight = 0

        '---Finally, let's show some sample values.
        '   We'll make the values random, for more realism.

        '   Our pie will have seven slices

        '---Now that we have values, we'll need a series
        '   Our series will be pie series.

        '---Let's create the series
        Randomize(Environment.TickCount)
        Dim oSeries As New ArrayList

        For iSeries As Byte = 0 To 6
            Dim oPieSeries As New jChart.Overlay.Series.PieSeries
            With oPieSeries
                '---We will call our series "series one". 
                '   This value is accessible on drill-down from the image map.
                .Name = "Series #" & iSeries + 1

                '---Now we'll give the series the value it should use.
                .Value = Rnd() * 35 + 20

                '---We will show the series value
                .ShowValue = True

                '---For pie charts, each data element can have a different color. 
                '   These colors are specified as an array of Color using the Colors property
                '   of the PieSeries object.
                Select Case iSeries
                    Case 0 : .Color = Color.Magenta
                    Case 1 : .Color = Color.LightSteelBlue
                    Case 2 : .Color = Color.CornflowerBlue
                    Case 3 : .Color = Color.DarkGoldenrod
                    Case 4 : .Color = Color.DarkSeaGreen
                    Case 5 : .Color = Color.Firebrick
                    Case 6 : .Color = Color.LimeGreen
                End Select

                '---The series will be opaque
                .Opacity = 1
            End With

            oSeries.Add(oPieSeries)
        Next

        '---Let's highlight series #3
        oSeries(3).Offset = 25

        '---Since we are using a pie chart, which belongs to the 
        '   StackedPieOverlay overlay type, we'll need a StackedPieOverlay object.
        Dim oPieOverlay As jChart.Overlay.PieOverlay

        '---We need to tell the overlay which dimensions and axes to use when
        '   we create it.
        oPieOverlay = New jChart.Overlay.PieOverlay(moChart.ChartDimensions)

        '---Let's add the series to the overlay
        oPieOverlay.Series = oSeries

        '---Let's make sure that there is plenty of room around the outside of the ring
        oPieOverlay.OuterRadius = 120

        '---We'll give this pie the appearance of a ring by setting an inner radius value
        oPieOverlay.InnerRadius = 50

        '---Let's offset the pie a bit from center
        oPieOverlay.CenterX = oPieOverlay.CenterX - 30
        oPieOverlay.CenterY = oPieOverlay.CenterY - 30

        '---We'll show values as percentages
        oPieOverlay.ValueMode = jChart.Overlay.PieOverlay.Mode.ShowPercent

        '---We'll place the values around the outer edge
        oPieOverlay.ValuePlacement = jChart.Overlay.PieOverlay.Placement.OuterEdge

        '---Let's add the overlay to the chart.
        moChart.OverLays.Add(oPieOverlay)

        '---OK. All done. Now let's draw the chart.
        '   We'll start by creating a bitmap onto which the chart will be drawn.
        '   We do it this way so that the bitmap can be shared (a background image
        '   perhaps?)
        Dim oPicture As New Bitmap( _
                moChart.ChartDimensions.OuterWidth, _
                moChart.ChartDimensions.OuterHeight, _
                System.Drawing.Imaging.PixelFormat.Format24bppRgb)

        '---Now that we've created the bitmap, we'll draw the chart on it and save it
        '   to a temporary location on the server in JPEG format. The charting object
        '   creates a unique filename for our new chart. This unique filename is
        '   accessible via the chart's FileName property (see ImageURL)

        '---The path where the image will be saved must have write access for the ASPNET
        '   process enabled.
        moChart.SaveChartToFile( _
                    Application("TempPath"), _
                    System.Drawing.Imaging.ImageFormat.Jpeg)


    End Sub

The ImageURL property provides the name of the chart image that was created during Page_Load to the IMG tag on the page.

        Protected ReadOnly Property ImageURL() As String
        Get
            If moChart Is Nothing Then
                Return ""
            Else
                Return Session("TempURL") & moChart.FileName
            End If
        End Get
    End Property

The ImageMap property constructs and provides the image map that allows for drill-down capability.

        Protected ReadOnly Property ImageMap() As String
        Get
            If moChart Is Nothing Then
                Return ""
            Else
                Return MakeImageMapString()
            End If
        End Get
    End Property

Here we build the image map from the collection of chart regions. This is done in the code behind block so that it can be customized--perhaps only certain series should have drill-down enabled, and of course you will want to customize the action that occurs when a series value is clicked on.

    Private Function MakeImageMapString() As String
        Dim sImageMap As String = ""

        For Each oRegion As jChart.RegionArea In moChart.RegionList
            Dim sCoords As String = ""

            Dim oPoints As Point() = oRegion.SeriesPoints
            sCoords = oPoints(0).X & "," & oPoints(0).Y

            For iPoint As Integer = 1 To oPoints.GetUpperBound(0)
                sCoords = sCoords & "," & oPoints(iPoint).X & "," & oPoints(iPoint).Y
            Next

            Dim sArea As String = "<area " & _
                                        " shape=" & Chr(34) & "poly" & Chr(34) & _
                                        " coords=" & Chr(34) & sCoords & Chr(34) & _
                                        " href=" & Chr(34) & "javascript:alert('You clicked on " & oRegion.SeriesName & " at value: " + oRegion.YValue.ToString + "');" & Chr(34) & _
                                        " alt=" & Chr(34) & oRegion.SeriesName & " value=" & oRegion.YValue & Chr(34) & ">" & _
                                        vbCrLf

            sImageMap = sImageMap & sArea
        Next

        Return sImageMap
    End Function