Email:
Password:
Email:
JLION.COM
10/18/06

jChart - Two Y-Axis Chart Example

About jChart

The line chart uses the LineOverlay and BarOverlay overlay types to show how can two series on a single chart can be displayed using different Y-Axes.

Series Two value=9.668809 Series Two value=27.96717 Series Two value=15.93443 Series Two value=34.85557 Series Two value=7.017463 Series Two value=33.22108 Series Two value=19.72729 Series One value=15.89397 Series One value=3.914185 Series One value=8.892099 Series One value=26.34991 Series One value=34.705 Series One value=11.93258 Series One value=19.0837

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, the X and Y axis values are 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)

        moChart.ChartName = "Two Y-Axis Demo"
        moChart.Font = New Font(System.Drawing.FontFamily.GenericSansSerif, 11, FontStyle.Bold)

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

        '---The Y Axis column on the left will be 20 pixels wide.
        moChart.ChartDimensions.YAxis1LabelColumnWidth = 20

        '---The Y Axis column on the right will also be 20 pixels wide.
        moChart.ChartDimensions.YAxis2LabelColumnWidth = 20

        '---The X Axis row on the bottom will be 20 pixels high.
        moChart.ChartDimensions.XAxisLabelRowHeight = 20

        '---Let's add the X Axis values
        '   We'll have 7 values and in place of the numeric values we'll
        '   display friendly labels.
        Dim oXAxisValues() As Single = {0, 1, 2, 3, 4, 5, 6}
        Dim oXAxisLabels() As String = {"SU", "MO", "TU", "WE", "TH", "FR", "SA"}

        '---We'll create an XAxis object using the ChartDimensions object
        '   from the chart we just created.
        Dim oXAxis As New jChart.XAxis(moChart.ChartDimensions, oXAxisValues)

        '---Let's tell the X Axis about the friendly labels to display in place
        '   of numbers.
        oXAxis.XAxisLabels = oXAxisLabels
        oXAxis.AxisName = "Days"

        '---OK, finally let's tell the chart about its X Axis.
        moChart.XAxis = oXAxis

        '---Now, let's set up the Y Axis for the left side.
        '   We'll define 8 values. We could specify labels for our Y Axis values just as
        '   we did for our X Axis values but we won't.
        Dim oYAxis1Values() As Single = {20, 25, 30, 35, 40, 45, 50, 55}
        'Dim oYAxis1Labels() As String = {"20", "25", "30", "35", "40", "45", "50", "55"}

        '---We'll tell our new Y Axis object that it will be on the left side of the chart
        '   and we'll pass in a reference to the chart's ChartDimension object so the Y Axis
        '   will know how big it needs to be.
        Dim oYAxis1 As New jChart.YAxis(jChart.YAxis.Alignment.Left, moChart.ChartDimensions, oYAxis1Values)
        oYAxis1.AxisName = "Left-side Y Axis"

        '---Now, let's set up the Y Axis for the right side.
        '   We'll use 8 values here as well. 
        Dim oYAxis2Values() As Single = {0, 5, 10, 15, 20, 25, 30, 35}

        '---We'll tell our new Y Axis object that it will be on the right side of the chart
        '   and we'll pass in a reference to the chart's ChartDimension object so the Y Axis
        '   will know how big it needs to be.
        Dim oYAxis2 As New jChart.YAxis(jChart.YAxis.Alignment.Right, moChart.ChartDimensions, oYAxis2Values)
        oYAxis2.AxisName = "Right-side Y Axis"

        '---Now let's tell the chart about our Y Axes
        moChart.YAxis1 = oYAxis1
        moChart.YAxis2 = oYAxis2

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

        '   Since we'll have two series, we'll need two sets of sample values. We'll
        '   call them "oValues1" and "oValues2"

        '   There will be 7 values in each series, just as there are 7 points on the X Axis.
        '   The series objects expect an array of single, so that's what we'll make.
        Dim oValues1(8) As Single
        Dim oValues2(8) As Single
        Randomize(Environment.TickCount)
        For iX As Short = 0 To 7
            oValues1(iX) = Rnd() * 35 + 20
            oValues2(iX) = Rnd() * 35
        Next

        '---The Bar series will be the first series drawn, so we'll use oValues1 as source data for it.
        Dim oBarSeries As New jChart.Overlay.Series.BarSeries
        With oBarSeries
            '---We will call our series "series one". 
            '   This value is accessible on drill-down from the image map.
            .Name = "Series One"

            '---Now we'll give the series the values it should use.
            .Values = oValues1

            '---The series will be orange in color
            .Color = Color.Orange

            '---The series will be slightly transparent (75% opaque)
            .Opacity = 0.75
        End With

        '---The Line series will be the second series drawn, so we'll use oValues2 as source data for it.
        Dim oLineSeries As New jChart.Overlay.Series.LineSeries
        With oLineSeries
            '---We will call our series "series two". 
            '   This value is accessible on drill-down from the image map.
            .Name = "Series Two"

            '---Now we'll give the series the values it should use.
            .Values = oValues2

            '---The series will be green in color
            .Color = Color.Green

            '---The series will be slightly transparent (75% opaque)
            .Opacity = 0.75
        End With

        '---Since we have two Y Axes, we'll need two overlay objects.
        '   Each overlay can refer to only a single Y Axis.
        '   The first overlay will use the left-hand Y Axis object.

        '---We need to tell the overlay which dimensions and axes to use when
        '   we create it.
        Dim oBarOverlay As New jChart.Overlay.BarOverlay(moChart.ChartDimensions, oXAxis, oYAxis1)

        '---Let's add the series to the overlay
        oBarOverlay.Series.Add(oBarSeries)

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

        '---Now we need a second overlay for our second series since it will refer to
        '   a right-hand Y Axis.

        '---We need to tell the overlay which dimensions and axes to use when
        '   we create it.
        Dim oLineOverlay As New jChart.Overlay.LineOverlay(moChart.ChartDimensions, oXAxis, oYAxis2)

        '---Let's add the series to the overlay
        oLineOverlay.Series.Add(oLineSeries)

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

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

 

Created by Joe Lynds 2002-2008. Contact Joe
http://www.jlion.com