FusionCharts Free Documentation

Using FusionCharts with VB.NET (ASP.NET) > Charting data from Array

In this section, we'll show you how to use FusionCharts with ASP.NET to plot charts from data contained in ASP.NET arrays. We'll cover the following examples here:

Creating a single series chart from data contained in arrays
Creating a multi-series chart from data contained in arrays

Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.

The code examples contained in this page are present in Download Package > Code > VBNET > ArrayExample folder.

The code to create a single series chart is contained in SingleSeries.aspx and can be listed as under:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SingleSeries.aspx.vb" Inherits="ArrayExample_SingleSeries" %>

<HTML>
  <HEAD>
    <TITLE>
      FusionCharts Free - Array Example using Single Series Column 3D Chart
    </TITLE>
  <%
    'You need to include the following JS file, if you intend to embed the chart using JavaScript.
  %>
  <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT>
  </HEAD>
  <BODY>
    <asp:Literal ID="FCLiteral" runat="server"></asp:Literal>
  </BODY>
</HTML>

In the above code, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We have also added an ASP literal server control which acts as a fusion charts container.

Let's see the code of the code behind file SingleSeries.aspx.vb:

Imports Utilities
Imports InfoSoftGlobal
Partial Class ArrayExample_SingleSeries
Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' Generate chart in Literal Control
    FCLiteral.Text = CreateCharts()
  End Sub

Public Function CreateChart() As String

  'In this example, we plot a single series chart from data contained
  'in an array. The array will have two columns - first one for data label
  'and the next one for data values.

  'Let's store the sales data for 6 products in our array). We also store
  'the name of products.
  Dim arrData(6, 2) As String
  'Creating util Object
  Dim util As New Util()
  'Store Name of Products
  arrData(0, 1) = "Product A"
  arrData(1, 1) = "Product B"
  arrData(2, 1) = "Product C"
  arrData(3, 1) = "Product D"
  arrData(4, 1) = "Product E"
  arrData(5, 1) = "Product F"
  'Store sales data
  arrData(0, 2) = "567500"
  arrData(1, 2) = "815300"
  arrData(2, 2) = "556800"
  arrData(3, 2) = "734500"
  arrData(4, 2) = "676800"
  arrData(5, 2) = "648500"

  'Now, we need to convert this data into XML. We convert using string concatenation.
  Dim strXML As String, i As Integer
  'Initialize <graph> element
  strXML = "<graph caption='Sales by Product' numberPrefix='$' formatNumberScale='0' decimalPrecision='0'>"

  'Convert data to XML and append
  For i = 0 To UBound(arrData) - 1
    'add values using <set name='...' value='...' color='...'/>
    strXML = strXML & "<set name='" & arrData(i, 1) & "' value='" & arrData(i, 2) & "' color='" & util.getFCColor() & "' />"
  Next
  'Close <graph> element
  strXML = strXML & "</graph>"

  'Create the chart - Column 3D Chart with data contained in strXML
  Return FusionCharts.RenderChart("../FusionCharts/FCF_Column3D.swf", "", strXML, "productSales", "600", "300", False, False)

  End Function
End Class

In the above example, we first include Utilites and InfoSoftGlobal namespace.
Then we define the CreateChart() function.
Inside the function, we declare an array arrData to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values.
We define a variable strXML to store the entire XML data. To build the XML, we iterate through the array and using string concatenation.
Finally, we render the chart using RenderChart() function and pass strXML as dataXML.

We included Utilities namespace, which contains the default color set for the FusionCharts. These colors in Hex code are optimized to give a snazzy look to the charts. The getFCColor() function in cyclic iteration returns these color values.

When you view the chart, you'll see a chart as under:

Let us now create a multi-series chart from data contained in arrays. We create a file MultiSeries.aspx with the following code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MultiSeries.aspx.vb"
Inherits="ArrayExample_MultiSeries" %>

<HTML>
  <HEAD>
    <TITLE>
      FusionCharts Free - Array Example using Multi Series Column 3D Chart
    </TITLE>
    <%
      'You need to include the following JS file, if you intend to embed the chart using JavaScript.
    %>
    <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT>
  </HEAD>

  <BODY>
    <asp:Literal ID="FCLiteral" runat="server"></asp:Literal>
  </BODY>
</HTML>

In the above code, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We then call method CreateChart() from the code behind to generate code for chart.

Take a look at the code behind file MultiSeries.aspx.vb:

Imports InfoSoftGlobal
Partial Class ArrayExample_MultiSeries
Inherits System.Web.UI.Page

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      ' Generate chart in Literal Control
      FCLiteral.Text = CreateChart()
   End Sub

Public Function CreateChart() As String

    'In this example, we plot a multi series chart from data contained
    'in an array. The array will have three columns - first one for data label (product)
    'and the next two for data values. The first data value column would store sales information
    'for current year and the second one for previous year.

    'Let's store the sales data for 6 products in our array. We also store
    'the name of products.
    Dim arrData(6, 3) As String
    'Store Name of Products
    arrData(0, 1) = "Product A"
    arrData(1, 1) = "Product B"
    arrData(2, 1) = "Product C"
    arrData(3, 1) = "Product D"
    arrData(4, 1) = "Product E"
    arrData(5, 1) = "Product F"
    'Store sales data for current year
    arrData(0, 2) = "567500"
    arrData(1, 2) = "815300"
    arrData(2, 2) = "556800"
    arrData(3, 2) = "734500"
    arrData(4, 2) = "676800"
    arrData(5, 2) = "648500"
    'Store sales data for previous year
    arrData(0, 3) = "547300"
    arrData(1, 3) = "584500"
    arrData(2, 3) = "754000"
    arrData(3, 3) = "456300"
    arrData(4, 3) = "754500"
    arrData(5, 3) = "437600"

    'Now, we need to convert this data into multi-series XML.
    'We convert using string concatenation.
    'strXML - Stores the entire XML
    'strCategories - Stores XML for the <categories> and child <category> elements
    'strDataCurr - Stores XML for current year's sales
    'strDataPrev - Stores XML for previous year's sales
    Dim strXML As String, strCategories As String, strDataCurr As String, strDataPrev As String, i As Integer

'Initialize <graph> element
strXML = "<graph caption='Sales by Product' numberPrefix='$' decimalPrecision='0' >"

'Initialize <categories> element - necessary to generate a multi-series chart
strCategories = "<categories>"

    'Initiate <dataset> elements
    strDataCurr = "<dataset seriesName='Current Year' color='AFD8F8'>"
    strDataPrev = "<dataset seriesName='Previous Year' color='F6BD0F'>"

    'Iterate through the data
    For i = 0 To UBound(arrData) - 1
      'Append <category name='...' /> to strCategories
      strCategories = strCategories & "<category name='" & arrData(i, 1) & "' />"
      'Add <set value='...' /> to both the datasets
      strDataCurr = strDataCurr & "<set value='" & arrData(i, 2) & "' />"
      strDataPrev = strDataPrev & "<set value='" & arrData(i, 3) & "' />"
    Next

'Close <categories> element
strCategories = strCategories & "</categories>"

  'Close <dataset> elements
  strDataCurr = strDataCurr & "</dataset>"
  strDataPrev = strDataPrev & "</dataset>"

'Assemble the entire XML now
strXML = strXML & strCategories & strDataCurr & strDataPrev & "</graph>"

'Create the chart - MS Column 3D Chart with data contained in strXML
Return FusionCharts.RenderChart("../FusionCharts/FCF_MSColumn3D.swf", "", strXML, "productSales", "600", "300", False, False)

End Function
End Class

In the above code we import InfoSoftGlobal namespace first.
Then we define the CreateChart () function.
We declare an array arrData to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year.
We define a variable strXML to store the entire XML data.
We also define strCategories, strDataCurr and strDataPrev variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation.
We concatenate the entire XML in strXML.
Finally, we return the chart HTML using RenderChartHTML() method present in InfoSoftGlobal.FusionCharts class. RenderChart()is called form the Page_Load event listener.

When you view the chart, you'll see a chart as under:

In Download Package > Code > VBNET > ArrayExample, we've more example codes to create Stacked and Combination Charts too, which we have not explained here, as they're similar in concept. You can directly see the code if you want to.