Chart Control Tutorial.

The GoDB Chart Control can Display Charts from data in Arrays or Data from SQL Statements using DB_RSARRAY.

Click here to refer Chart Object


Example 1:
When the Chart Control Is Dropped on the Form

To add the data to the Chart We need to use the Setdata Method of the chart Control
This array should be of type float and should have the page scope (Declared before the
main End Statement). This is because the Chart Control uses the Variables memory directly
for data and local variables are destroyed when the subroutine returns.

	
	DimF a(10)
	 
	end
	
	Sub HelloBtn_Click
		for i=0 to 9
			a(i)=i*10+10
		next
		#chart1.charttypeall=1' Set the chart to BarCharts
		#chart1.setdata(a)
	End Sub

When This program is run and The button clicked the chart that is generated looks like

Line Chart

	DimF a(10)
	 
	end
	
	Sub HelloBtn_Click
		for i=0 to 9
			a(i)=i*10+10
		next
		#chart1.charttypeall=2' Set the chart to LineChart
		#chart1.thickness=2' Line Thickness to 2
		#chart1.setdata(a)
	End Sub

When This program is run and The button clicked the chart that is generated looks like

Line Chart

Line Chart With Dot Chart

	DimF a(10)
	 
	end
	
	Sub HelloBtn_Click
		for i=0 to 9
			a(i)=i*20+10' Change the Data a bit
		next
		#chart1.charttypeall=2+4' Set the chart to Line and Dot Chart
		#chart1.thickness=2' Line Thickness to 2
		#chart1.Gap=5' Width of the Dots 
		#chart1.setdata(a)
	End Sub

When This program is run and The button clicked the chart that is generated looks like

Chart With X Legend Texts

	DimF a(10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(i)=i*20+10' Change the Data a bit
		next
		#chart1.charttypeall=2+4' Set the chart to Line and Dot Chart
		#chart1.thickness=2' Line Thickness to 2
		#chart1.Gap=5' Width of the Dots 
		#chart1.setdata(a,XLeg$)' Set the XData Array and the XLegend Texts
	End Sub

When This program is run and The button clicked the chart that is generated looks like
Note: The sizes of the XLegend Text array should match that of the Data.

Charts With Multiple Data Streams

	DimF a(2,10)  'TwoDataSeries
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct" 

		for i=0 to 9 
			a(0,i)=i*20+10     'Data For First Series 
			a(1,i)=200-i*20+10 'Data For Second Series 
		next 
		
		#chart1.charttypeall=2+4 
		#chart1.thickness=2 
		#chart1.gap=7 
		#chart1.setdata(a,XLeg$) 
	EndSub 

When This program is run and The button clicked the chart that is generated looks like

X/Y Charts

	
	DimF a(2,10) ' Two Data Series
	    
	end
	
	Sub HelloBtn_Click
	
		for i=0 to 9
			a(0,i)=i*20+10 ' Data For X Values Series
			a(1,i)=200-i*20+10' Data For Y Values
		next
		
		#chart1.charttypeall=2+4
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a)
		
		#chart1.xhasvalues=1
		
	End Sub

When This program is run and The button clicked the chart that is generated looks like


X/Y Charts require two data arrays for One chart the Index 0 is used for Y and
the Index 1 is used for X. Multiple such charts can be specified where all Even indices
(0,2,4) will be used for Y and all ODD Indices (1,3,5) will be used for Y Values

Bar Charts With Multiple Data Streams

	DimF a(2,10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
	
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(0,i)=i*20+10 ' Sample Data
			a(1,i)=i*40+10 ' Sample Data
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$)
	End Sub

For Bar Charts, The Gap Property determines the Gap Between the BarCharts
and the Thickness Property determines the thickness of the Bar Border.

Horizontal Bar Charts

	DimF a(10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(i)=i*20+10 ' Sample Data
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$)
		#chart1.flipxy=1
	EndSub

To get Horizontal Bar charts the flipxy property needs to be set to 1.
This applies to other types of chart except Pie Charts.

Horizontal Bar Charts With Multiple Data Streams

	DimF a(2,10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
	
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(0,i)=i*20+10 ' Sample Data
			a(1,i)=i*40+10 ' Sample Data
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$)
		#chart1.flipxy=1
	End Sub

Chart with Chart Labels, Chart Legend and Chart Event handling

	DimF a(2,10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_ClickXLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(0,i)=i*20+10
			a(1,i)=i*40+10
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$)
	
		#chart1.ChartColor(0,2016+shl(1024,16)) ' Combining Chart Bar color (2016) and Bar Border Color (1024)
		#chart1.ChartColor(1,64520+shl(33280,16))
	
		#chart1.ChartLabel(0,"Comp1") ' Setting the Chart Legend Label For Data Series 1
		#chart1.ChartLabel(1,"Comp2") ' Setting the Chart Legend Label For Data Series 2
		#chart1.showchartleg=1		  ' Show the Chart Legend.
		#chart1.chartlegpos=2		  ' Chart Legend Position	
	End Sub

	sub chart1_Click
		print  #chart1.clickedseries ; #chart1.clickedx; #chart1.clickedy
		i=#chart1.clickedseries
		j=#chart1.clickedx
			if i<>-1 andj<>-1 then
			print "Y Array Value" ; a(i,j)
		endif
	End Sub
	

The chart1_Click event is received when the user clicks on the chart or the
Chart Legend. The clickedseries,clickedx and clickedy properties specify
where the chart was clicked. These properties return -1 incase the value is not applicable.
Even when the Charts are flipped using FlipXY property the clickedseries,clickedx and clickedy return the same values.

Different Chart Types for Different Data Streams

The Chart Types of Individual Data Streams can be set using the ChartType Property.

	DimF a(2,10)
	
	DimS XLeg$(10)
	
	end
	
	Sub HelloBtn_Click
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(0,i)=i*20+10
			a(1,i)=i*40+10
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$)
		
		#chart1.ChartColor(0,2016+shl(1024,16)) ' Combining Chart Bar color (2016) and Bar Border Color (1024)
		#chart1.ChartColor(1,64520+shl(33280,16))
		
		#chart1.ChartLabel(0,"Comp1") ' Setting the Chart Legend Label For Data Series 1
		#chart1.ChartLabel(1,"Comp2") ' Setting the Chart Legend Label For Data Series 2
		#chart1.showchartleg=1		  ' Show the Chart Legend.
		#chart1.chartlegpos=2		  ' Chart Legend Position
		
		#chart1.ChartType(1,1) ' Setting the Chart Type to Bar Chart for Data Series 0
		#chart1.ChartType(1,2) ' Setting the Chart Type to Line Chaert for Data Series 1
	EndSub

Chart with Colors Specified for Points
Chart Legend Displaying XLegendTexts.

	DimF a(10)
	
	DimS XLeg$(10)
	
	DimI ChartCol(10)
	
	end
	
	Sub HelloBtn_Click
	
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May":XLeg$(5)="Jun":XLeg$(6)="Jul":XLeg$(7)="Aug":XLeg$(8)="Sep":XLeg$(9)="Oct"
		for i=0 to 9
			a(i)=i*20+10
			ChartCol(i)=i*5000+3000 ' Generate Some Random Color
		next
		#chart1.charttypeall=1
		#chart1.thickness=2
		#chart1.gap=7
		#chart1.setdata(a,XLeg$,ChartCol)
		
		#chart1.showchartleg=8 ' Set the Flag that Displays the XLegnd Text on the Chart Legend.
		#chart1.chartlegpos=3 ' Change the Position of the chart legend to top.
		#chart1.showxleg=0 ' Disable the Xlegend 
	EndSub 

Pie Charts

	DimF a(5)
	
	DimS XLeg$(5)
	
	end
	
	Sub HelloBtn_Click
		XLeg$(0)="Jan":XLeg$(1)="Feb":XLeg$(2)="Mar":XLeg$(3)="Apr":XLeg$(4)="May"
		
		for i=0 to 4
			a(i)=i*20+40 ' Data For First Series
		next
		#chart1.charttypeall=8
		#chart1.thickness=1
		#chart1.gap=0
		#chart1.setdata(a,XLeg$)
		#chart1.showchartleg=1+2 ' Show the Chart Legend With % Values
		#chart1.chartlegpos=1
	EndSub

Database Driven Charts. (Chart Data sourced from tables.)

	DimS Data$
	
	END
	
	Sub Button1_Click
		' Add Handler Code Here 
		RecCount=db_rsarray("select Brandname,Rate from Product",Data$,1) ' Get Data From a Table.
		#chart1.charttypeall=1
		#chart1.setdata(Data$,,,0,RecCount)
	End Sub

DB_RSArray populates a Recordset array that can be directly passed to the SetData
method. The SQL Statement Should return atleast two Columns the First Column will be
used as X Legend Text and the Second Column will be used as Y values.
The Third Column can be specified for other Data Series or in case of an X/Y chart.

Database Driven Charts With Multiple Data Streams

	DimS Data$
	
	END
	
	Sub Button1_Click
		' Add Handler Code Here 
		RecCount=db_rsarray("select Brandname,Rate,Discount from Product",Data$,1)
		#chart1.charttypeall=1
		#chart1.setdata(Data$,,,0,RecCount)
		#chart1.chartlabel(0,"Price")
		#chart1.chartlabel(1,"Discount")
		#chart1.showchartleg=1
		#chart1.chartlegpos=5
	End Sub

Other Tips

1) You can use the XLegLabel and YLegLabel to put the Labels for X and Y Legends.
Ex:
#chart1.YLegLabel$="Sales in Lacs"
#chart1.XLegLabel$="Month"


2) When Data has large Values you can divide it.
Ex: If the Dats is in Lacs (or Millions) then Divide the data by 100000 and then Set the YLegLabel to
Denote it - Sales (In Lacs)

3) You can use BaseY and ChartType= 17 for Barcharts that have barsAbove and Below  a Base Line. 

4) Base Lines and Points can be Drawon on the Chart Using TfmX and TfmY Functions of the Chart.

	sub form_paint
		TfmX=#Chart1.TfmX(2)
		TfmY=#Chart1.TfmY(3600)

		x1=#chart1.x+#chart1.LeftMargin
		yy=#chart1.y+TfmY
		x2=#chart1.x+#chart1.LeftMargin+#chart1.ChartW

		' Draw The Base Line for value 3600
		drawline(x1,yy,x2,yy,2,1020)

		' Draw a Rect at Value (2,3600)
		fillrect(#chart1.x+TfmX,#chart1.y+TfmY,5,5,65504)
	endsub

5) Pie charts. When Displaying a lot of data in pie charts, you can group all the lower percentage items into Others so you will have only a fewer Segments in the pie. Then when the user clicks on the others segment you can display their breakup.