Private Sub drawChart(viewer As WebChartViewer)

        Dim data() As Double = {219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9, 219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9, 219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9, 219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9, 219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9, 219, 156, 141, 116, 74, 53, 36, 24, 24, 18, 12, 9}
        Dim data2() As Double = {24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0, 24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0, 24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0, 24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0, 24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0, 24.83, 42.48, 58.47, 71.61, 79.99, 85.99, 90.07, 95.54, 92.82, 97.58, 98.98, 100.0}

        ' The labels for the chart
        Dim labels() As String = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "a1", "b1", "c1", "d1", "e1", "f1", "g1", "h1", "i1", "j1", "k1", "l1", "a2", "b2", "c2", "d2", "e2", "f2", "g2", "h2", "i2", "j2", "k2", "l2", "a3", "b3", "c3", "d3", "e3", "f3", "g3", "h3", "i3", "j3", "k3", "l3", "a4", "b4", "c4", "d4", "e4", "f4", "g4", "h4", "i4", "j4", "k4", "l4", "a5", "b5", "c5", "d5", "e5", "f5", "g5", "h5", "i5", "j5", "k5", "l5"}


        ' Create a XYChart object of size 400 x 225 pixels. Use golden background color,
        ' with a 2 pixel 3D border.
        Dim c As XYChart = New XYChart(600, 425, Chart.goldColor(), -1, 2)

        ' Add a title box using Arial Bold/11 pt font. Set the background color to
        ' metallic blue (9999FF). Use a 1 pixel 3D border.
        c.addTitle("Hardware Defects", "Arial Bold", 11).setBackground( _
            Chart.metalColor(&H9999FF), -1, 1)

        ' Set the plotarea at (50, 40) and of 300 x 150 pixels in size, with a silver
        ' background color.
        c.setPlotArea(50, 40, 500, 350, Chart.silverColor())

        ' Add a line layer for the pareto line
        Dim lineLayer As LineLayer = c.addLineLayer()
        
        
        ' Add the pareto line using the scaled data. Use deep blue (0x80) as the line
        ' color, with light blue (0x9999ff) diamond symbols
        lineLayer.addDataSet(data2, &H80 _
            ).setDataSymbol(Chart.DiamondSymbol, 9, &H9999FF)

        '' Set the line width to 2 pixel
        lineLayer.setLineWidth(2)
        lineLayer.setUseYAxis2(True)

        '' Tool tip for the line layer
        lineLayer.setHTMLImageMap("", "", "title='Top {={x}+1} items: {value|2}%'")


        Dim barLayer As BarLayer = c.addBarLayer(data, c.xZoneColor(4.5, &H80FF3333, &H0))

        ' Set soft lighting for the bars with light direction from the right
        barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Right))
        
        ' Tool tip for the bar layer
        barLayer.setHTMLImageMap("", "", "title='{xLabel}: {value} pieces'")

        ' Set the labels on the x axis.
        c.xAxis().setLabels(labels)
        
        'c.xAxis.addZone(-1, 4, Chart.silverColor)
        'c.xAxis.addZone(4, 4, &H0)
        'c.yAxis2.addZone(80, 80, &H0)
        
                 
        'this is for adding color to the entire zone
        'c.xAxis.addZone(0, 4, Chart.silverColor)
        'c.xAxis.addZone(3.9, 12, &H0)
        'c.yAxis2.addZone(80, 80, &H0)
        'c.yAxis2.addZone(81, 120, &H0)

        ' Set the label format of the y-axis label to include a percentage sign
        c.yAxis().setLabelFormat("{value}")

        ' Add a title to the secondary y-axis
        c.yAxis2().setTitle("Frequency")

        ' Set the secondary y-axis label foramt to show no decimal point
        c.yAxis2().setLabelFormat("{value|%}")

    If viewer.GetCustomAttr("minY") = "" Then
        ' The axis scale has not yet been set up. This means this is the first time the chart is
        ' drawn and it is drawn with no zooming. We can use auto-scaling to determine the
        ' axis-scales, then remember them for future use.

        ' explicitly auto-scale axes so we can get the axis scales
            c.layout()
            ' save the axis scales for future use
            viewer.SetCustomAttr("minX", c.xAxis().getMinValue())
            viewer.SetCustomAttr("maxX", c.xAxis().getMaxValue())
            viewer.SetCustomAttr("minY", c.yAxis().getMinValue())
            viewer.SetCustomAttr("maxY", c.yAxis().getMaxValue())
    Else
        ' Retrieve the original full axes scale
            Dim minX As Double = CDbl(viewer.GetCustomAttr("minX"))
            Dim maxX As Double = CDbl(viewer.GetCustomAttr("maxX"))
            Dim minY As Double = CDbl(viewer.GetCustomAttr("minY"))
            Dim maxY As Double = CDbl(viewer.GetCustomAttr("maxY"))

        ' Compute the zoomed-in axis scales by multiplying the full axes scale with the view port
        ' ratio
            Dim xScaleMin As Double = minX + (maxX - minX) * viewer.ViewPortLeft
            Dim xScaleMax As Double = minX + (maxX - minX) * (viewer.ViewPortLeft + _
               viewer.ViewPortWidth)
            Dim yScaleMax As Double = maxY - (maxY - minY) * viewer.ViewPortTop
            Dim yScaleMin As Double = maxY - (maxY - minY) * (viewer.ViewPortTop + _
            viewer.ViewPortHeight)

            ' Set the axis scales
            'c.xAxis().setLinearScale(xScaleMin, xScaleMax)
            Dim xIndexStart As Integer = Math.Round(xScaleMin)
            Dim xIndexEnd As Integer = Math.Round(xScaleMax)

            Dim yIndexStart As Integer = Math.Round(yScaleMin)
            Dim yIndexEnd As Integer = Math.Round(yScaleMax)

            
            Dim visibleXLabels(xIndexEnd - xIndexStart) As String
            Array.Copy(labels, xIndexStart, visibleXLabels, 0, xIndexEnd - xIndexStart + 1)

            c.xAxis().setLinearScale2(xIndexStart, xIndexEnd, visibleXLabels)

            'c.yAxis().setLinearScale(yScaleMin, yScaleMax)
            'c.yAxis2().setLinearScale(yIndexStart, yIndexEnd)
            

        ' By default, ChartDirector will round the axis scale to the tick position. For zooming, we
        ' want to use the exact computed axis scale and so we disable rounding.
            c.xAxis().setRounding(False, False)
            c.yAxis().setRounding(False, False)
    End If

        
    ' Create the image
    ' Output the chart
    viewer.Image = c.makeWebImage(Chart.PNG)

    ' Include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("", "", _
        "title='[{dataSetName}] Alpha = {x|G}, Beta = {value|G}'")

End Sub