VB6 Animated Charts (With FusionCharts)
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.
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:
Control |
Name |
Caption |
Command1 |
cmdIndividualData |
&Individual data |
Command2 |
cmdXMLString |
XML &String |
Command3 |
cmdExit |
E&xit |
6. Switch to the code view and enter the following code in the code window.
Private Sub cmdExit_Click()<br />
End<br />
End Sub<br />
<br />
Private Sub cmdIndividualData_Click()<br />
FusionCharts1.ChartType = pie3d<br />
FusionCharts1.Data.setChartParams "caption=Match Score; xAxisName=Player Name;yAxisName=Score"<br />
FusionCharts1.Data.addChartData "90", "label=David"<br />
FusionCharts1.Data.addChartData "70", "label=Josh"<br />
FusionCharts1.Data.addChartData "80", "label=Brain"<br />
FusionCharts1.RenderChart<br />
End Sub<br />
<br />
Private Sub cmdXMLString_Click()<br />
Dim XML As String<br />
XML = "<chart caption='Match Score' xAxisName='Player Name' yAxisName='Score'><set value='90' label='David' /><set value='70' label='Josh' /><set value='85' label='Brain' /></chart>"<br />
FusionCharts1.ChartType = pie3d <br />
FusionCharts1.setDataXML = XML<br />
End Sub7. 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.
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:
Control |
Name |
Caption |
Command1 |
cmdArrayData |
&Using Array |
Command2 |
cmdExit |
E&xit |
3. Switch to the code view and enter the following code in the code window.
Private Sub cmdArrayData_Click()<br /> ' Array to store category names<br /> Dim arrCatName(0 To 5) As String<br /> <br /> ' Array to store datasets and chart data<br /> Dim arrDataArray(0 To 1, 0 To 7) As String<br /> <br /> ' Variable to store chart parameters<br /> Dim chartParameters As String<br /> ' Assigning chart parameters<br /> chartParameters = "ShowValues=0;caption=Business Results 2008 v 2007;xAxisName=Month;yAxisName=Revenue;numberPrefix=$"<br /> <br /> ' Assigning Category names<br /> arrCatName(0) = "Jan"<br /> arrCatName(1) = "Feb"<br /> arrCatName(2) = "Mar"<br /> arrCatName(3) = "Apr"<br /> arrCatName(4) = "May"<br /> arrCatName(5) = "Jun"<br /> <br /> ' Assigning First Dataset seriesnames<br /> arrDataArray(0, 0) = "2008"<br /> <br /> ' Assigning Second Dataset seriesnames<br /> arrDataArray(1, 0) = "2007"<br /> <br /> ' Assigning chart data to First Dataset<br /> arrDataArray(0, 2) = "27400"<br /> arrDataArray(0, 3) = "29800"<br /> arrDataArray(0, 4) = "25800"<br /> arrDataArray(0, 5) = "26800"<br /> arrDataArray(0, 6) = "29600"<br /> arrDataArray(0, 7) = "32600"<br /> <br /> ' Assigning chart data to Second Dataset<br /> arrDataArray(1, 2) = "10000"<br /> arrDataArray(1, 3) = "11500"<br /> arrDataArray(1, 4) = "12500"<br /> arrDataArray(1, 5) = "15000"<br /> arrDataArray(1, 6) = "11000"<br /> arrDataArray(1, 7) = "9800"<br /> <br /> ' Sets chart's parameters<br /> Call FusionCharts1.Data.setChartParams(chartParameters)<br /> ' Passing array to the FusionCharts component<br /> Call FusionCharts1.Data.addChartDataFromArray(arrDataArray, arrCatName)<br /> ' Sets Chart Type<br /> FusionCharts1.ChartType = mscolumn3d<br /> ' Calling Chart Rendering Method<br /> FusionCharts1.RenderChart<br /> <br /> End Sub<br /> <br /> Private Sub cmdExit_Click()<br /> End<br /> 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:
Control |
Name |
Caption |
Command1 |
cmdDatabase |
&Data from Database |
Command2 |
cmdExit |
E&xit |
Adodc1 |
Adodc1 |
|
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()<br /> <br /> ' Configures ADODC control<br /> Adodc1.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & App.Path & "\FactoryDB.mdb" & ";Persist Security Info=False"<br /> Adodc1.CommandType = adCmdTable<br /> Adodc1.RecordSource = "MSCommon"<br /> Adodc1.Refresh<br /> <br /> ' Variable to store chart parameters<br /> Dim chartParameters As String<br /> <br /> ' Dataset parameters array<br /> Dim arrDatasetParams(0 To 2) As String<br /> arrDatasetParams(1) = "renderAs=Area;showValues=0"<br /> arrDatasetParams(2) = "renderAs=Line;showValues=0"<br /> <br /> chartParameters = "showValues=0;caption=Business Results 2007 v 2008;xAxisName=Month;yAxisName=Revenue;numberPrefix=$"<br /> <br /> ' Passing Chart's Parameters<br /> Call FusionCharts1.Data.setChartParams(chartParameters)<br /> <br /> ' Changes Chart Type to Combination3D<br /> FusionCharts1.ChartType = mscombi3d<br /> <br /> ' Sets ADODC recordset reference and database parameters<br /> Call FusionCharts1.Data.addDatasetsFromDatabase(Adodc1.Recordset, "Months", "2008;2007;Quantity", arrDatasetParams)<br /> <br /> ' Calls render chart method<br /> FusionCharts1.RenderChart<br /> End Sub<br /> <br /> Private Sub cmdExit_Click()<br /> End<br /> 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.
Control |
Name |
Caption |
Command1 |
cmdCaptureImage |
Capture &Image |
Command2 |
cmdSaveImage |
&Save Image |
Picture1 |
Picture1 |
|
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()<br /> FusionCharts1.SaveAsImage (True)<br /> End Sub<br /> <br /> Private Sub cmdCaptureImage_Click()<br /> Picture1.Picture = FusionCharts1.GetPicture<br /> 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.
Control |
Name |
Caption |
FusionCharts |
FusionCharts1 |
Capture &Image |
FusionCharts |
FusionCharts1 |
&Save Image |
CommandButton |
cmdExit |
E&xit |
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()<br /> End<br /> End Sub<br /> <br /> Private Sub SetFirstChart()<br /> FusionCharts1.ChartType = column3d<br /> Dim sChartParameters As String<br /> ' Setting chart parameters. <br /> sChartParameters = "caption=Half Yearly Sales Summary;subcaption=For the year 2008 - First Half;xAxisName=Month;yAxisName=Sales; numberPrefix=$"<br /> ' Adding data to the chart,<br /> ' And at set parameter we are using <strong>link</strong> attribute with "J-" parameter, which helps us<br /> ' to track the click event.<br /> ' We are passing single parameter.<br /> Call FusionCharts1.Data.addChartData("500", "label=Factory 1;link=J-CallFunctionOne-SingleParameter")<br /> ' We are passing two parameters separated by comma (,).<br /> Call FusionCharts1.Data.addChartData("400", "label=Factory 2;link=J-CallFunctionTwo-1st Parameter,2nd Parameter")<br /> ' Passing without any parameter.<br /> Call FusionCharts1.Data.addChartData("350", "label=Factory 3;link=J-CallFunctionThree")<br /> ' Finally render the chart.<br /> Call FusionCharts1.RenderChart<br /> End Sub
Private Sub Form_Load()<br /> ' Generates chart data and renders chart.<br /> Call SetFirstChart<br /> End Sub<br /> <br /> Private Sub FusionCharts1_DrillDown(ByVal ActionName As String, ByVal ActionParameter As Variant)<br /> ' At ActionName, we will get the value which is given just after J-<br /> ' At ActionParameter, we will get the value which is given just after J-ActionName-<br /> ' XML String variable<br /> Dim XML As String<br /> ' Applying Select statement with ActionName<br /> Select Case ActionName<br /> ' If ActionName is CallFunctionOne<br /> Case "CallFunctionOne":<br /> ' Creates XML<br /> XML = "<chart caption='Half Yearly Sales Summary' subcaption='Factory 1' xAxisName='Month' yAxisName='Sales' numberPrefix='$' >"<br /> XML = XML & "<set label='Jan' value='17400' />"<br /> XML = XML & "<set label='Feb' value='19800'/>"<br /> XML = XML & "<set label='Mar' value='21800'/>"<br /> XML = XML & "<set label='Apr' value='23000'/>"<br /> XML = XML & "<set label='May' value='29000'/>"<br /> XML = XML & "<set label='Jun' value='27600'/>"<br /> XML = XML & "</chart>"<br /> ' If ActionName is CallFunctionTwo<br /> Case "CallFunctionTwo":<br /> ' Creates XML<br /> XML = "<chart caption='Half Yearly Sales Summary' subcaption='Factory 2' xAxisName='Month' yAxisName='Sales' numberPrefix='$' >"<br /> XML = XML & "<set label='Jan' value='1400' />"<br /> XML = XML & "<set label='Feb' value='1800' />"<br /> XML = XML & "<set label='Mar' value='2800' />"<br /> XML = XML & "<set label='Apr' value='2000' />"<br /> XML = XML & "<set label='May' value='2000' />"<br /> XML = XML & "<set label='Jun' value='2600' />"<br /> XML = XML & "</chart>"<br /> ' If ActionName is CallFunctionThree<br /> Case "CallFunctionThree":<br /> ' Creates XML<br /> XML = "<chart caption='Half Yearly Sales Summary' subcaption='Factory 3' xAxisName='Month' yAxisName='Sales' numberPrefix='$' >"<br /> XML = XML & "<set label='Jan' value='400' />"<br /> XML = XML & "<set label='Feb' value='800' />"<br /> XML = XML & "<set label='Mar' value='800' />"<br /> XML = XML & "<set label='Apr' value='300' />"<br /> XML = XML & "<set label='May' value='900' />"<br /> XML = XML & "<set label='Jun' value='700' />"<br /> XML = XML & "</chart>"<br /> End Select<br /> ' Changing chart type to column2d<br /> FusionCharts2.ChartType = column2d<br /> ' Providing XML to the chart.<br /> FusionCharts2.setDataXML = XML<br /> 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:.
FusionCharts for VB - Highlights
- 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:
- Individual data input
- Data from XML string.
- Data from Array.
- Data from a database.
- Extremely easy to implement.
Fusion chart for VB from csv files
Please could you tell me if there is a tutorial to create a fusion chart from a .csv file?
Also, I have tried to work the tutorial above- creating fusion charts from a database. Would you be able to provide a shot of what the database looks like? I don't know if the code works because I don't have the right database.
Thanks
vb6 USER
VERY GOOD FOR VB6 REPORTING
Query
I am evaluating your trial version of fusion chart please tell me can we increase vertical block in or rows in line2d chart in vb6 if we can, then please guide me .
thanks and regard
HLEP NU
IS NOT GOOD I HAEV PROLBEM
IN C HOTWO CLEAR ARRAY OF BITES,,??,
I DEOSN4T KNOW HOW I CAN CLAER ARAY HOW HOW??
I KNOW I CALL HERE BUT HOW TO GIVE ARRAY EZMPIE,,,???
GOGOGO POST SOLUTOIN88!!!!
I WILL HAVE TO NO??
YEEESSSS
GHOGOGOGOGOG9SSD888!!!!!
Need database file
plz can you send me the FactoryDB.mdb database file . I have no idea how to work with database. thany you!!!!!!!!!! email = lonely550442072@hotmail.com
nice tutorial sir keep it up
nice tutorial sir keep it up thanks for sharing
Technical reviewer for FusionCharts: Beginner’s Guide
If interested in reviewing "FusionCharts: Beginner’s Guide" for Packt Publishing, contact alkan@packtpub.com
Inquiry About OCX
I am very much interested in byuing this great ocx however I like to know if there is a way to embed the Ocx inside my program where it will be built in and no need for distriputig it and installination
Appreciate your feed back
Thanks
send me vb 6 project on my id
hello
send me plz project on vb on my id:vasavadakirtan@gmail.com
microsoft.jet oledb 3.51 connection
can i connect using the service provider microsoft jet oledb 3.51
I am failed to fetch the chart
please help me..
How can we create help file in vb6.0
Sir, Please help for creating help file in vb6.0
Creating a combination chart using data drawn from a database
where is the database? what should the database named FactoryDB.mdb contains?
Post new comment