jChart - Analog Gauge Example

About jChart

The Analog Gauge uses the jChart.AnalogGauge chart object

Gauge value=0 Gauge value=0.2413793 Gauge value=0.4827586 Gauge value=0.7241379 Gauge value=0.9655172 Gauge value=1.206897 Gauge value=1.448276 Gauge value=1.689655 Gauge value=1.931034 Gauge value=2.172414 Gauge value=2.413793 Gauge value=2.655172 Gauge value=2.896552 Gauge value=3.137931 Gauge value=3.37931 Gauge value=3.62069 Gauge value=3.862069 Gauge value=4.103448 Gauge value=4.344828 Gauge value=4.586207 Gauge value=4.827586 Gauge value=5.068965 Gauge value=5.310345 Gauge value=5.551724 Gauge value=5.793103 Gauge value=6.034482 Gauge value=6.275862 Gauge value=6.517241 Gauge value=6.758621 Gauge value=7 Gauge value=7.241379 Gauge value=7.482759 Gauge value=7.724138 Gauge value=7.965517 Gauge value=8.206897 Gauge value=8.448276 Gauge value=8.689655 Gauge value=8.931034 Gauge value=9.172414 Gauge value=9.413793 Gauge value=9.655172 Gauge value=9.896551 Gauge value=10.13793 Gauge value=10.37931 Gauge value=10.62069 Gauge value=10.86207 Gauge value=11.10345 Gauge value=11.34483 Gauge value=11.58621 Gauge value=11.82759 Gauge value=12.06896 Gauge value=12.31034 Gauge value=12.55172 Gauge value=12.7931 Gauge value=13.03448 Gauge value=13.27586 Gauge value=13.51724 Gauge value=13.75862 Gauge value=14 Gauge value=14.24138 Gauge value=14.48276 Gauge value=14.72414 Gauge value=14.96552 Gauge value=15.2069 Gauge value=15.44828 Gauge value=15.68966 Gauge value=15.93103 Gauge value=16.17241 Gauge value=16.41379 Gauge value=16.65517 Gauge value=16.89655 Gauge value=17.13793 Gauge value=17.37931 Gauge value=17.62069 Gauge value=17.86207 Gauge value=18.10345 Gauge value=18.34483 Gauge value=18.58621 Gauge value=18.82759 Gauge value=19.06897 Gauge value=19.31034 Gauge value=19.55172 Gauge value=19.7931 Gauge value=20.03448 Gauge value=20.27586 Gauge value=20.51724 Gauge value=20.75862 Gauge value=21 Gauge value=21.24138 Gauge value=21.48276 Gauge value=21.72414 Gauge value=21.96552 Gauge value=22.2069 Gauge value=22.44827 Gauge value=22.68966 Gauge value=22.93103 Gauge value=23.17241 Gauge value=23.41379 Gauge value=23.65517 Gauge value=23.89655 Gauge value=24.13793 Gauge value=24.37931 Gauge value=24.62069 Gauge value=24.86207 Gauge value=25.10345 Gauge value=25.34483 Gauge value=25.58621 Gauge value=25.82759 Gauge value=26.06897 Gauge value=26.31034 Gauge value=26.55172 Gauge value=26.7931 Gauge value=27.03448 Gauge value=27.27586 Gauge value=27.51724 Gauge value=27.75862 Gauge value=28 Gauge value=28.24138 Gauge value=28.48276 Gauge value=28.72414 Gauge value=28.96552 Gauge value=29.2069 Gauge value=29.44827 Gauge value=29.68966 Gauge value=29.93103 Gauge value=30.17241 Gauge value=30.41379 Gauge value=30.65517 Gauge value=30.89655 Gauge value=31.13793 Gauge value=31.37931 Gauge value=31.62069 Gauge value=31.86207 Gauge value=32.10345 Gauge value=32.34483 Gauge value=32.5862 Gauge value=32.82759 Gauge value=33.06897 Gauge value=33.31034 Gauge value=33.55172 Gauge value=33.7931 Gauge value=34.03448 Gauge value=34.27586 Gauge value=34.51724 Gauge value=34.75862 Gauge value=35 Gauge value=35.24138 Gauge value=35.48276 Gauge value=35.72414 Gauge value=35.96552 Gauge value=36.2069 Gauge value=36.44828 Gauge value=36.68966 Gauge value=36.93103 Gauge value=37.17241 Gauge value=37.41379 Gauge value=37.65517 Gauge value=37.89655 Gauge value=38.13793 Gauge value=38.37931 Gauge value=38.62069 Gauge value=38.86207 Gauge value=39.10345 Gauge value=39.34483 Gauge value=39.5862 Gauge value=39.82759 Gauge value=40.06897 Gauge value=40.31034 Gauge value=40.55172 Gauge value=40.7931 Gauge value=41.03448 Gauge value=41.27586 Gauge value=41.51724 Gauge value=41.75862 Gauge value=42 Gauge value=42.24138 Gauge value=42.48276 Gauge value=42.72414 Gauge value=42.96552 Gauge value=43.20689 Gauge value=43.44828 Gauge value=43.68966 Gauge value=43.93103 Gauge value=44.17241 Gauge value=44.41379 Gauge value=44.65517 Gauge value=44.89655 Gauge value=45.13793 Gauge value=45.37931 Gauge value=45.62069 Gauge value=45.86207 Gauge value=46.10345 Gauge value=46.34483 Gauge value=46.5862 Gauge value=46.82759 Gauge value=47.06897 Gauge value=47.31034 Gauge value=47.55172 Gauge value=47.7931 Gauge value=48.03448 Gauge value=48.27586 Gauge value=48.51724 Gauge value=48.75862 Gauge value=49 Gauge value=49.24138 Gauge value=49.48276 Gauge value=49.72414 Gauge value=49.96552 Gauge value=50.20689 Gauge value=50.44828 Gauge value=50.68966 Gauge value=50.93103 Gauge value=51.17241 Gauge value=51.41379 Gauge value=51.65517 Gauge value=51.89655 Gauge value=52.13793 Gauge value=52.37931 Gauge value=52.62069 Gauge value=52.86207 Gauge value=53.10345 Gauge value=53.34483 Gauge value=53.5862 Gauge value=53.82758 Gauge value=54.06897 Gauge value=54.31034 Gauge value=54.55172 Gauge value=54.7931 Gauge value=55.03448 Gauge value=55.27586 Gauge value=55.51724 Gauge value=55.75862 Gauge value=56 Gauge value=56.24138 Gauge value=56.48276 Gauge value=56.72414 Gauge value=56.96552 Gauge value=57.20689 Gauge value=57.44828 Gauge value=57.68966 Gauge value=57.93103 Gauge value=58.17241 Gauge value=58.41379 Gauge value=58.65517 Gauge value=58.89655 Gauge value=59.13793 Gauge value=59.37931 Gauge value=59.62069 Gauge value=59.86207 Gauge value=60.10345 Gauge value=60.34483 Gauge value=60.5862 Gauge value=60.82758 Gauge value=61.06897 Gauge value=61.31034 Gauge value=61.55172 Gauge value=61.7931 Gauge value=62.03448 Gauge value=62.27586 Gauge value=62.51724 Gauge value=62.75862 Gauge value=63 Gauge value=63.24138 Gauge value=63.48276 Gauge value=63.72414 Gauge value=63.96552 Gauge value=64.20689 Gauge value=64.44827 Gauge value=64.68965 Gauge value=64.93103 Gauge value=65.17241 Gauge value=65.4138 Gauge value=65.65517 Gauge value=65.89655 Gauge value=66.13793 Gauge value=66.37931 Gauge value=66.62069 Gauge value=66.86207 Gauge value=67.10345 Gauge value=67.34483 Gauge value=67.5862 Gauge value=67.82758 Gauge value=68.06896 Gauge value=68.31034 Gauge value=68.55172 Gauge value=68.7931 Gauge value=69.03448 Gauge value=69.27586 Gauge value=69.51724 Gauge value=69.75862 Gauge value=70

ASP.NET 2.0 example

This is the HTML that displays the chart on the page. The image map is optional and is used to implement drill-down.
    <img src="<%=me.ImageURL %>" alt="" usemap="#MyMap" border="0" />
    <map id="Map1" name="MyMap">


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.
        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, _

        '---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"), _

    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
            If moChart Is Nothing Then
                Return ""
                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
            If moChart Is Nothing Then
                Return ""
                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

            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) & ">" & _

            sImageMap = sImageMap & sArea

        Return sImageMap
    End Function


Created by Joe Lynds 2002-2008. Contact Joe