Introduction
In VB, when it comes to visualizing data in the form of charts, developers seldom think beyond MSChart. The MSChart component may seem adequate, but the fact is - it has some serious limitations. Some of the most significant limitations of MSChart are that it is not interactive, doesn’t support animation and drill-down. So with MSChart, it is only possible to incorporate monotonous static charts in Visual Basic applications.
In this tutorial, you will be introduced to FusionCharts for VB – a charting component that helps you develop Flash-based animated and interactive charts for VB applications. No knowledge whatsoever of Flash is required to be able to use the component. The only requirement is for Adobe Flash Player 9 plugin to be installed. The plugin is widespread and can be downloaded from here.
Creating Charts for VB Applications
It is extremely easy to implement FusionCharts for VB. We will take a step-by-step approach to first see how to incorporate a chart in a VB application and then set up advanced features like drill-down and saving the chart as an image.
FusionCharts for VB can be downloaded from the FusionCharts Website. To install the component – just double click the setup.exe file and follow the instructions displayed on the dialog box.
So you are all set. Let's get started.
A simple example: Creating a pie chart
1. Create a Visual Basic project.
2. Open the component window using CTRL + T or by selecting the ‘Component’ option from the ‘Project’ menu. Next, select FusionCharts for VB, and then click ‘Apply’ and finally the ‘OK’ button. 
3. Notice, that a FusionCharts icon has now been added to the toolbox.
4. Double click the FusionCharts icon – a chart control will be added to the Form, with a 3D column chart displayed by default.
FusionCharts for VB supports multiple data input methods - from XML string (called dataXML method), XML file (called dataURL method), using individual data input, arrays and from databases too.
Since I said this will be a simple example, we will be taking a look at only the dataXML and Individual Data input method. And we will use the other methods in other examples later on in the tutorial.
5. Add the following three buttons to the Form:
6. Switch to the code view and enter the following code in the code window.
Private Sub cmdExit_Click()
End
End Sub
Private Sub cmdIndividualData_Click()
FusionCharts1.ChartType = pie3d
FusionCharts1.Data.setChartParams "caption=Match Score; xAxisName=Player Name;yAxisName=Score"
FusionCharts1.Data.addChartData "90", "label=David"
FusionCharts1.Data.addChartData "70", "label=Josh"
FusionCharts1.Data.addChartData "80", "label=Brain"
FusionCharts1.RenderChart
End Sub
Private Sub cmdXMLString_Click()
Dim XML As String
XML = "
FusionCharts1.ChartType = pie3d
FusionCharts1.setDataXML = XML
End Sub
7. Press F5 to run the project - the following screen will be displayed. The screen doesn’t display a chart as data is yet to be loaded.
8. Click on ‘Using Function’ or ‘XML String’ button – a 3D pie chart will be displayed.
Wowed? Let's try out a different chart type now.
Creating a multi-series column chart using data arrays
1. Create a new project and add the FusionCharts control to the form (steps 1 - 4 of instructions for creating a single-series chart).
2. Add the following controls to the form:
3. Switch to the code view and enter the following code in the code window.
Private Sub cmdArrayData_Click()
' Array to store category names
Dim arrCatName(0 To 5) As String
' Array to store datasets and chart data
Dim arrDataArray(0 To 1, 0 To 7) As String
' Variable to store chart parameters
Dim chartParameters As String
' Assigning chart parameters
chartParameters = "ShowValues=0;caption=Business Results 2008 v 2007;xAxisName=Month;yAxisName=Revenue;numberPrefix=$"
' Assigning Category names
arrCatName(0) = "Jan"
arrCatName(1) = "Feb"
arrCatName(2) = "Mar"
arrCatName(3) = "Apr"
arrCatName(4) = "May"
arrCatName(5) = "Jun"
' Assigning First Dataset seriesnames
arrDataArray(0, 0) = "2008"
' Assigning Second Dataset seriesnames
arrDataArray(1, 0) = "2007"
' Assigning chart data to First Dataset
arrDataArray(0, 2) = "27400"
arrDataArray(0, 3) = "29800"
arrDataArray(0, 4) = "25800"
arrDataArray(0, 5) = "26800"
arrDataArray(0, 6) = "29600"
arrDataArray(0, 7) = "32600"
' Assigning chart data to Second Dataset
arrDataArray(1, 2) = "10000"
arrDataArray(1, 3) = "11500"
arrDataArray(1, 4) = "12500"
arrDataArray(1, 5) = "15000"
arrDataArray(1, 6) = "11000"
arrDataArray(1, 7) = "9800"
' Sets chart's parameters
Call FusionCharts1.Data.setChartParams(chartParameters)
' Passing array to the FusionCharts component
Call FusionCharts1.Data.addChartDataFromArray(arrDataArray, arrCatName)
' Sets Chart Type
FusionCharts1.ChartType = mscolumn3d
' Calling Chart Rendering Method
FusionCharts1.RenderChart
End Sub
Private Sub cmdExit_Click()
End
End Sub
4. Press F5 to run the code and then click the ‘Using Array’ button to render the chart.
Creating a combination chart using data drawn from a database
1. Create a new project and add the FusionCharts control to the form (steps 1 - 4 of instructions for creating a single-series chart).
2. Next, add the following controls to the form:
3. Open the component window using CTRL + T or by selecting the ‘Component’ option from the ‘Project’ menu. Next, select ‘Microsoft ADO Data’, and then click ‘Apply’ and finally click the ‘OK’ button. Once the control is added to the form, drag it out of the visible area of the form – in order to make it invisible to the user.
4. Switch to the code view and enter the following code in the code window.
Private Sub cmdDatabase_Click()
' Configures ADODC control
Adodc1.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & App.Path & "\FactoryDB.mdb" & ";Persist Security Info=False"
Adodc1.CommandType = adCmdTable
Adodc1.RecordSource = "MSCommon"
Adodc1.Refresh
' Variable to store chart parameters
Dim chartParameters As String
' Dataset parameters array
Dim arrDatasetParams(0 To 2) As String
arrDatasetParams(1) = "renderAs=Area;showValues=0"
arrDatasetParams(2) = "renderAs=Line;showValues=0"
chartParameters = "showValues=0;caption=Business Results 2007 v 2008;xAxisName=Month;yAxisName=Revenue;numberPrefix=$"
' Passing Chart's Parameters
Call FusionCharts1.Data.setChartParams(chartParameters)
' Changes Chart Type to Combination3D
FusionCharts1.ChartType = mscombi3d
' Sets ADODC recordset reference and database parameters
Call FusionCharts1.Data.addDatasetsFromDatabase(Adodc1.Recordset, "Months", "2008;2007;Quantity", arrDatasetParams)
' Calls render chart method
FusionCharts1.RenderChart
End Sub
Private Sub cmdExit_Click()
End
End Sub
5. Press F5 to run the code and then click the ‘Data from Database’ button – to render the chart.
Now that we have explored a number of chart types, we will look at how to improve the functionality of the chart.
Saving chart as image
For this example we’ll build upon the combination chart project itself.
1. Add the following controls to the form.
2. Arrange the form as shown below.
3. Switch to the code view and enter the following code in the code window.Private Sub cmdSaveImage_Click()
FusionCharts1.SaveAsImage (True)
End Sub
Private Sub cmdCaptureImage_Click()
Picture1.Picture = FusionCharts1.GetPicture
End Sub
4. Press F5 to run the application and then click the ‘Data from Database’ button to render the chart.
5. Click the ‘Capture Image’ button the image of the chart will now be displayed in the Picture Box.
6. Next, click the ‘Save’ button, and in the ‘Save As’ dialog box specify the location where you wish to save the image of the chart.
Creating a chart with drilldown functionality
1. Create a new project and add the FusionCharts control to the form (steps 1 - 4 of instructions for creating a single-series chart).
2. Add the following controls to the form.
3. Arrange the form in the following manner.
4. Switch to the code view and enter the following code in the code window.
Private Sub cmdExit_Click()
End
End Sub
Private Sub SetFirstChart()
FusionCharts1.ChartType = column3d
Dim sChartParameters As String
' Setting chart parameters.
sChartParameters = "caption=Half Yearly Sales Summary;subcaption=For the year 2008 - First Half;xAxisName=Month;yAxisName=Sales; numberPrefix=$"
' Adding data to the chart,
' And at set parameter we are using link attribute with "J-" parameter, which helps us
' to track the click event.
' We are passing single parameter.
Call FusionCharts1.Data.addChartData("500", "label=Factory 1;link=J-CallFunctionOne-SingleParameter")
' We are passing two parameters separated by comma (,).
Call FusionCharts1.Data.addChartData("400", "label=Factory 2;link=J-CallFunctionTwo-1st Parameter,2nd Parameter")
' Passing without any parameter.
Call FusionCharts1.Data.addChartData("350", "label=Factory 3;link=J-CallFunctionThree")
' Finally render the chart.
Call FusionCharts1.RenderChart
End Sub
Private Sub Form_Load()
' Generates chart data and renders chart.
Call SetFirstChart
End Sub
Private Sub FusionCharts1_DrillDown(ByVal ActionName As String, ByVal ActionParameter As Variant)
' At ActionName, we will get the value which is given just after J-
' At ActionParameter, we will get the value which is given just after J-ActionName-
' XML String variable
Dim XML As String
' Applying Select statement with ActionName
Select Case ActionName
' If ActionName is CallFunctionOne
Case "CallFunctionOne":
' Creates XML
XML = "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
' If ActionName is CallFunctionTwo
Case "CallFunctionTwo":
' Creates XML
XML = "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
' If ActionName is CallFunctionThree
Case "CallFunctionThree":
' Creates XML
XML = "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
XML = XML & "
End Select
' Changing chart type to column2d
FusionCharts2.ChartType = column2d
' Providing XML to the chart.
FusionCharts2.setDataXML = XML
End Sub
The drill down functionality enables a click event on any of the column/bars of the chart to further enhance that data set and display another chart. For this we use a link attribute with J- parameter followed by function name (CallFunction(one/two/three)), and the necessary function parameters. Now when we drill down into any of the column/bars, it invokes FusionCharts1_DrillDown event. Here we specify the XML for each of the new charts.
5. Press F5 to run the project and then click ‘XML String’ button to render the chart.
6. Click on any of the columns of the chart – this causes another chart to be displayed in the ‘Detail Report’ window.
In these examples, you have seen how you can easily create exciting charts in VB. The examples demonstrated only few of the features of FusionCharts for VB. Some of the other highlights are:.
Great chart cosmetics, with gradients and 3D lighting.About 37 chart types with both 2D and 3D charts.Supports custom animation.Supports user-end interactivity in the form of tooltips and allows client-side rotation, slicing and scaling of charts.Allows advanced drill-down.Multiple modes of data configuration, which includes:Data from XML string.Data from Array.Data from a database.
No comments:
Post a Comment