jChart - Analog Gauge Example

About jChart

The Analog Gauge uses the jChart.AnalogGauge chart object

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" border="0" />
    
    <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.AnalogGauge
    

The Page_Load event is where the heavy lifting gets done. It is here that the appearance of the gauge (background color, size, starting and ending numbers and value) are set.

    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 400 pixels wide by 400 pixels high, with a diameter of 300.
        '   The gauge will be centered within a slightly larger graphic.
        moChart = New jChart.Overlay.AnalogGauge(300, 300, 200, 0, 70)

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

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

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

        '---Let's change the default ranges
        moChart.LowPercent = 0.2
        moChart.MedPercent = 0.7
        moChart.HighPercent = 0.1

        '---Let's also change the default color values
        moChart.ChartDimensions.BackgroundColor = Color.White

        moChart.LowColor = Color.Red
        moChart.MedColor = Color.Green
        moChart.HighColor = Color.Yellow

        '---Set the color of the outer bezel
        moChart.BezelColor = Color.White

        '---Set the color of the gauge face
        moChart.FaceColor = Color.Linen

        '---Set the color of the needle hub
        moChart.HubColor = Color.SlateGray

        '---Set the label font
        moChart.LabelFont = New System.Drawing.Font("Arial", 10, FontStyle.Bold)

        '---Finally, let's show a sample value
        '   We'll make the value random, for more realism.
        Randomize(Environment.TickCount)
        Dim iValue As Integer = Rnd() * 70

        moChart.Value = iValue

        '---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.Format16bppArgb1555)

        '---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