Tuesday, July 3, 2018

How to Show Data in Chart Control or Graph in VB6.0

How to Show Data in Chart Control or Graph in VB6.0

In this post, we will describe that how to show data in Chart or graph in VB6.0 with SKOTechLearn. You can display data manually at run time or through database. We will describe the following process to display record or value in this control. Let’s take a look of Process.
  1. Show Value from Textbox to Chart Control
  2. Show data from MS-Access Database to Chart Control
  3. Show data from Listview or MSHFlexGrid to Chart Control
 (1) Show Value from Textbox to Chart Control:
If you want to display value from text box to chart graph, you have to drag some text box to you form. Whenever we want to change the value of any TextBoxes, the graph will automatically update in run time.


Suppose we drag some controls and change its name like bellow.
Control Name
MSChart1 MyChart1
Text1 TxtVal1
Text2 TxtVal2
Text3 TxtVal3
Text4 TxtVal4
Command1 Databtn1
Now, we will drag command button with name "Databtn1", we will write code inside Databtn1’s Click() event as described bellow.
Private Sub Databtn1_Click()
   ReDim grpdtarr(1 To 4)
    With MyChart1
      .Legend.Location.Visible = True
      'arrprices describes every plot value
       grpdtarr(1) = Val(TxtVal1.Text)
       grpdtarr(2) = Val(TxtVal2.Text)
       grpdtarr(3) = Val(TxtVal3.Text)
       grpdtarr(4) = Val(TxtVal4.Text)

       'SeriesCollection describes plot's series description
       .Plot.SeriesCollection(1).LegendText = "Text Value1: " & TxtVal1.Text
       .Plot.SeriesCollection(2).LegendText = "Text Value2: " & TxtVal2.Text
       .Plot.SeriesCollection(3).LegendText = "Text Value3: " & TxtVal3.Text
       .Plot.SeriesCollection(4).LegendText = "Text Value4: " & TxtVal4.Text

       .TitleText = "My Graph"
       'array add  record to chart
       .ChartData = grpdtarr
  End With

End Sub
Now, let’s take a look of output during run time such as bellow image.
Text value show in Graph Plot or Chart
Text value in Graph Plot
The above given figure present the output of change graph Plot through Textbox value change in VB6.0.
 (2) Show data from MS-Access Database to Chart Control: 
In this time mainly Chart control uses to display record from database. Now we create DB in MS-Access.

Design DB through following process:
DB Name: ChartDB
Table Name: Graph_Tbl
Field Name With Record:
Srn Pr_Details Pr_Phone Tot_Cost
1 ABFCD 002220011111 130
2 NLMPO 001332224333 1550
3 SKOJH 114444220000 590
4 RJPQS 115699990080 270
For this process, we will create DB in “C:\” drive. After designing DB with table and records, come to VB application and drag ADODC control from Component for DB connection.

Suppose we connect “Tot_Cost” records in graph. So First we have to connect DB with this control.

So, the following code will describe the connection and DB record presentation on Graph Plot.
Here we will drag command button and change its name with “DBDataShow_Btn” and write code in its Click() event as described bellow.
Private Sub DBDataShow_Btn_Click()
  Public cnnct As New ADODB.Connection  
  cnnct.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\ChartDB.mdb;Persist Security Info=False"

  Dim tot1 As Long
  tot1 = 0
  Dim rscnt As New ADODB.Recordset
  rscnt.Open "SELECT Count(Srn) AS CountOfSrn FROM Graph_Tbl;", cnnct, adOpenKeyset, adLockOptimistic 
  tot1 = rscnt!CountOfSrn
  rscnt.Close

  ReDim grpdtarr1(1 To tot1)
  Dim i As Double
  i = 1
  MyChart1.Legend.Location.Visible = True
  Dim rcd As New ADODB.Recordset
  rcd.Open "Select * from Graph_Tbl;", cnnct, adOpenKeyset, adLockOptimistic
  While Not rcd.EOF

    grpdtarr1(i) = Val(rcd!Tot_Cost)
    MyChart1.Plot.SeriesCollection(i).LegendText = rcd!Pr_Details & " (" & Val(rcd!Tot_Cost) & ")"

    i = i + 1
    rcd.MoveNext
  Wend
  rcd.Close

  MyChart1.TitleText = "Cost Details"
  MyChart1.ChartData = grpdtarr1

  cnnct. Close
End Sub
Database record show in Graph Plot or Chart
Database record in Graph Plot
The above code description and image process is easily understandable.

 (3) Show data from Listview or MSHFlexGrid to Chart Control: 
For this process, we have to add Listview component and add MSHFlexgrid component to ToolBox. First of all you have to add some record in Listview or MSHFlexGrid Table.

 (a) Show data from ListView to Chart Control 
Suppose, we contain a Listview record with column name (KNO, D_NM, Percent). And Every column contain some records. We will drag a command button with Name “LSTShowDT_Btn”.

Now, we will write code in its Click() event for display Listview record in graph.
Private Sub LSTShowDT_Btn_Click()
 ReDim Lstgprarr(1 To ListView1.ListItems.Count)
 With MyChart1
   .Legend.Location.Visible = True

   Lstgprarr(1) = Val(ListView1.ListItems(1).ListSubItems(2).Text)
   Lstgprarr(2) = Val(ListView1.ListItems(2).ListSubItems(2).Text)
   Lstgprarr(3) = Val(ListView1.ListItems(3).ListSubItems(2).Text)

   .Plot.SeriesCollection(1).LegendText = "KNO: " & ListView1.ListItems(1).ListSubItems(2).Text
   .Plot.SeriesCollection(2).LegendText = "D_NM: " & ListView1.ListItems(2).ListSubItems(2).Text
   .Plot.SeriesCollection(3).LegendText = "Percent: " & ListView1.ListItems(3).ListSubItems(2).Text

   .TitleText = "My Graph"
   'array add record to chart
   .ChartData = Lstgprarr
 End With
End Sub
When you run application, and press on “LSTShowDT_Btn” button. You will find that all records from Listview will be present in Graph Plot such as given bellow figure.
Listview Data Show in Graph Plot or Chart
Listview record in Graph Plot

 (b) Show data from MSHFlexGrid  to Chart Control 
Suppose, MSHFlexGrid containing some column header with records such as (KNO, PNM, P_Price). Like Listview, you have to add some record in MSHFlexGrid. Suppose, we add 4 records in MSHFlexGrid.

Note: MSHFlexGrid and ListView code process is totally different. Both have its own process to get or display record.

Now, we drag a Command Button with change Name MSHFShowDT_Btn”. Write code in its Click() event such as bellow:
Private Sub MSHFShowDT_Btn_Click()
 ReDim Flxgrparr(1 To MSHFlexGrid1.Rows - 2)

 With MyChart1
   .Legend.Location.Visible = True

   'arrprices describes every plot value
   Flxgrparr(1) = Val(MSHFlexGrid1.TextMatrix(1, 2))
   Flxgrparr(2) = Val(MSHFlexGrid1.TextMatrix(2, 2))
   Flxgrparr(3) = Val(MSHFlexGrid1.TextMatrix(3, 2))
   Flxgrparr(4) = Val(MSHFlexGrid1.TextMatrix(4, 2))

   'SeriesCollection describes plot's series description
   .Plot.SeriesCollection(1).LegendText = MSHFlexGrid1.TextMatrix(1, 1) & " : " & MSHFlexGrid1.TextMatrix(1, 2)
   .Plot.SeriesCollection(2).LegendText = MSHFlexGrid1.TextMatrix(2, 1) & " : " & MSHFlexGrid1.TextMatrix(2, 2)
   .Plot.SeriesCollection(3).LegendText = MSHFlexGrid1.TextMatrix(3, 1) & " : " & MSHFlexGrid1.TextMatrix(3, 2)
   .Plot.SeriesCollection(4).LegendText = MSHFlexGrid1.TextMatrix(4, 1) & " : " & MSHFlexGrid1.TextMatrix(4, 2)

   .TitleText = "My Graph"
   'array add record to chart
   .ChartData = Flxgrparr 
  End With

End Sub
Let’s take a look of output during run time of application in bellow figure.
MSHFlexGrid Data Show in Graph Plot or Chart
MSHFlexGrid record in Graph Plot
So, you can easily display records in Chart control through Textbox, ListView and MSHFlexGrid. There is some more way to display records through Listbox, SQL DB, Oracle, Excel etc.


If you will understand these steps, you can put your logical point of view to design this type of application. 

Now, you can try to learn How to show data in Chart control or Graph in VB6.0 easy tips with SKOTechLearn.

0 comments: