ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Unable to zooming
Posted by Hun Siong on Nov-20-2013 20:31
| Reply | Monitor
Dear Peter,

I have an issue with the zooming for data retrieve from database. Please advise any wrong with the code below. Thank you.

Private Sub LoadChart

   ' Set the maximum zoom to 10 points
        'winChartViewer1.ZoomInWidthLimit = 10.0
        pointerPB.Checked = True
        drawChart(winChartViewer1)
        ' Trigger the ViewPortChanged event to draw the chart
        winChartViewer1.ZoomDirection = WinChartDirection.Horizontal
        winChartViewer1.updateViewPort(True, True)

End Sub

'
    ' The ViewPortChanged event handler. This event occurs if the user scrolls or zooms in
    ' or out the chart by dragging or clicking on the chart. It can also be triggered by
    ' calling WinChartViewer.updateViewPort.
    '
    Private Sub winChartViewer1_ViewPortChanged(ByVal sender As Object, ByVal e As WinViewPortEventArgs) _
        Handles winChartViewer1.ViewPortChanged

        If e.NeedUpdateChart Then
            drawChart(winChartViewer1)
        End If
        If e.NeedUpdateImageMap Then
            updateImageMap(winChartViewer1)
        End If

    End Sub

    '
    ' Update the image map
    '
    Private Sub updateImageMap(ByVal viewer As WinChartViewer)

        ' Include tool tip for the chart
        If IsNothing(winChartViewer1.ImageMap) Then
            winChartViewer1.ImageMap = winChartViewer1.Chart.getHTMLImageMap("", "", _
                "title='[{dataSetName}] {x|dd/mm/yy hh:mm:ss}: value {value|2}'")
        End If


    End Sub


    '
    ' Draw the chart.
    '
    Private Sub drawChart(ByVal viewer As WinChartViewer)


        '/ Initially set the mouse usage to "Pointer" mode (Drag to Scroll mode)

        ' SQL statement to get the monthly revenues for the selected year.
        Dim SQL As String = _
            "Select Value, TagID,Timestamp From data_log where TagID=1"

        ' In this example, we use OleDbConnection to connect to MS Access (Jet Engine).
        ' If you are using MS SQL, you can use SqlConnection instead of OleConnection.
        Dim dbconn As System.Data.IDbConnection = _
            New System.Data.OleDb.OleDbConnection( _
            "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\\universal gui\\adtag.mdb")
        dbconn.Open()

        ' Set up the SQL statement
        Dim sqlCmd As System.Data.IDbCommand = dbconn.CreateCommand()
        sqlCmd.CommandText = SQL

        Dim table As DBTable = New DBTable(sqlCmd.ExecuteReader())
        ' Get the data as arrays
        Dim temperature() As Double = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=2"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        Dim humidity() As Double = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=3"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        Dim pressure() As Double = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=4"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        Dim steam() As Double = table.getCol(0)
        dbconn.Close()
        'Dim hardware() As Double = table.getCol(1)


        'viewer.ViewPortWidth = 0.2
        'viewer.ViewPortLeft = 1 - viewer.ViewPortWidth

        '
        ' At this stage, we have extracted the visible data. We can use those data to plot the chart.
        '

        '================================================================================
        ' Configure overall chart appearance.
        '================================================================================

        ' Create an XYChart object 600 x 300 pixels in size, with pale blue (f0f0ff)
        ' background, black (000000) border, 1 pixel raised effect, and with a rounded frame.
        Dim c As XYChart = New XYChart(740, 450, &HF0F0FF, 0, 1)
        c.setRoundedFrame(Chart.CColor(BackColor))

        ' Set the plotarea at (52, 60) and of size 520 x 205 pixels. Use white (ffffff) background.
        ' Enable both horizontal and vertical grids by setting their colors to grey (cccccc). Set
        ' clipping mode to clip the data lines to the plot area.
        c.setPlotArea(55, 55, c.getWidth() - 80, c.getHeight() - 90, &HFFFFFF, -1, -1, &HCCCCCC, &HCCCCCC)
        ' As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
        c.setClipping()

        ' Add a top title to the chart using 15 pts Times New Roman Bold Italic font, with a light blue
        ' (ccccff) background, black (000000) border, and a glass like raised effect.
        c.addTitle("Simple Zooming and Scrolling", "Times New Roman Bold Italic", 15 _
                ).setBackground(&HCCCCFF, &H0, Chart.glassEffect())

        ' Add a legend box at the top of the plot area with 9pts Arial Bold font with flow layout.
        c.addLegend(50, 33, False, "Arial Bold", 9).setBackground(Chart.Transparent, Chart.Transparent)

        ' Set axes width to 2 pixels
        c.yAxis().setWidth(2)
        c.xAxis().setWidth(2)

        ' Add a title to the y-axis
        c.yAxis().setTitle("Value", "Arial Bold", 9)

        '================================================================================
        ' Add data to chart
        '================================================================================

        '
        ' In this example, we represent the data by lines. You may modify the code below to use other
        ' representations (areas, scatter plot, etc).
        '

        ' Add a line layer for the lines, using a line width of 2 pixels
        Dim layer As LineLayer = c.addLineLayer2()
        layer.setLineWidth(2)

        ' In this demo, we do not have too many data points. In real code, the chart may contain a lot
        ' of data points when fully zoomed out - much more than the number of horizontal pixels in this
        ' plot area. So it is a good idea to use fast line mode.
        layer.setFastLineMode()

        ' Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
        ' and blue (0000ff)
        c.xAxis().setLabels2(table.getCol(2), "{value|dd/mm/yy hh:mm:ss}")
        c.xAxis().setLabelStep(1, 1)

        layer.addDataSet(temperature, -1, "Temperature")
        layer.addDataSet(humidity, -1, "Humidity")
        layer.addDataSet(pressure, -1, "Pressure")
        layer.addDataSet(steam, -1, "Steam Temperature")

        '================================================================================
        ' Configure axis scale and labelling
        '================================================================================

        ' Set the x-axis as a date/time axis with the scale according to the view port x range.
        'viewer.syncDateAxisWithViewPort("x", c.xAxis())
        'c.xAxis().setTickDensity(15)
        '================================================================================
        ' Output the chart
        '================================================================================

        viewer.Chart = c

    End Sub

    '
    ' Pointer (Drag to Scroll) button event handler
    '
    Private Sub pointerPB_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) _
        Handles pointerPB.CheckedChanged

        If sender.Checked Then
            winChartViewer1.MouseUsage = WinChartMouseUsage.ScrollOnDrag
        End If

    End Sub

    '
    ' Zoom In button event handler
    '
    Private Sub zoomInPB_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) _
        Handles zoomInPB.CheckedChanged

        If sender.Checked Then
            winChartViewer1.MouseUsage = WinChartMouseUsage.ZoomIn
        End If

    End Sub

    '
    ' Zoom Out button event handler
    '
    Private Sub zoomOutPB_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) _
        Handles zoomOutPB.CheckedChanged

        If sender.Checked Then
            winChartViewer1.MouseUsage = WinChartMouseUsage.ZoomOut
        End If

    End Sub

  Re: Unable to zooming
Posted by Peter Kwan on Nov-21-2013 04:24
| Reply | Monitor
Hi Hun,

There is an example "Simple Zooming and Scrolling (Windows)" included in ChartDirector. You may consider to start from that example, and just modify the "loadData" subroutine to load the data from the database (instead of using random numbers).


Dim temperature() As Double
Dim humidity() As Double
Dim pressure() As Double
Dim steam() As Double
Dim timeStamps() As DateTime

    Private Sub loadData()

        '/ Initially set the mouse usage to "Pointer" mode (Drag to Scroll mode)

        ' SQL statement to get the monthly revenues for the selected year.
        Dim SQL As String = _
            "Select Value, TagID,Timestamp From data_log where TagID=1"

        ' In this example, we use OleDbConnection to connect to MS Access (Jet Engine).
        ' If you are using MS SQL, you can use SqlConnection instead of OleConnection.
        Dim dbconn As System.Data.IDbConnection = _
            New System.Data.OleDb.OleDbConnection( _
            "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\\universal gui\\adtag.mdb")
        dbconn.Open()

        ' Set up the SQL statement
        Dim sqlCmd As System.Data.IDbCommand = dbconn.CreateCommand()
        sqlCmd.CommandText = SQL

        Dim table As DBTable = New DBTable(sqlCmd.ExecuteReader())
        ' Get the data as arrays
        temperature = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=2"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        humidity = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=3"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        pressure = table.getCol(0)
        dbconn.Close()
        dbconn.Open()
        SQL = _
            "Select Value, TagID,Timestamp From data_log where TagID=4"

        sqlCmd.CommandText = SQL
        table = New DBTable(sqlCmd.ExecuteReader())
        steam = table.getCol(0)
        dbconn.Close()

        timeStamps = table.getColAsDateTime(2)

    End Sub


Then in the charting code, just modify the names of the variables to match the names you are using (eg. change dataSeriesA to temperature, and change viewPortDataSeriesA to viewPortTemperature).

Hope this can help.

Regards
Peter Kwan

  Re: Unable to zooming
Posted by Hun Siong on Nov-22-2013 11:12
| Reply | Monitor
Dear Peter,

Thank You so much.
You save my day.

Best Regards,
Hun Siong