You are viewing documentation for an older version. For current documentation - click here.
Using FusionCharts ASP Class - Basic Examples

FusionCharts XT can effectively be used with ASP to plot dynamic data-driven charts. With FusionCharts ASP Class chart rendering becomes even easier. Let's see how to make use of FusionCharts ASP Class functions and create charts in few easy steps.

Even when used with ASP Class, FusionCharts XT internally uses JavaScript and XML/JSON to render the charts. The ASP Class code actually helps you output this JavaScript and XML/JSON. To aid your understanding of this section, we will recommend you to go through the following sections of documentation (if you have not already read them):

In this section, we will show a few basic examples to help you get started.

We will cover the following examples here:

  1. Creating a simple chart using FusionCharts ASP Class
  2. Creating a chart with external XML file created using FusionCharts ASP Class
  3. Creating a simple chart using JavaScript renderer
  4. Set managed printing for Mozilla browsers
All code discussed here is present in Download Package > Code > ASPClass > BasicExample folder.
 
Setting up the charts for use

In our code, we have used the charts and FusionCharts.js contained in Download Package > Code > FusionCharts folder. We have kept FusionCharts_Gen.asp in Download Package > Code > ASPClass > Includes folder. When you run your samples, you need to make sure that all the files are in proper location.
Creating a simple chart

Let's now start building our first chart. In this example, we will create a "Monthly Unit Sales" chart. 

<%@LANGUAGE="VBSCRIPT"%>
  <% option explicit %>
   <%
      'We have included ../Includes/FusionCharts_Gen.asp, which contains FusionCharts ASP Class
      'to help us easily embed the charts.
   %>
<!--#include file="../Includes/FusionCharts_Gen.asp"-->
<HTML>
     <HEAD>
         <TITLE>FusionCharts XT - Simple Column 3D Chart</TITLE>
         <%
            'You need to include the following JS file, if you intend to embed the chart using JavaScript.
            'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
            'When you make your own charts, make sure that the path to this JS file is correct. Else, you will get JavaScript errors.
         %> 
         <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      </HEAD>
      <BODY>
         <h4>Simple Column 3D Chart</h4>
               <%
                'This page demonstrates the ease of generating charts using FusionCharts ASPClass.
                'For this chart, we have created a chart  object used FusionCharts ASP Class
                'supply chart data and configurations to it and render chart using the instance
                'Here, we have kept this example very simple.
                dim FC
                'Create FusionCharts ASP class object
                set FC = new FusionCharts
                ' Set chart type to Column 3D
                call FC.setChartType("Column3D")
                ' Set chart size 
                 call FC.setSize("600","300")
                ' Set Relative Path of SWF file.
                 Call FC.setSWFPath("../../FusionCharts/")
                 dim strParam
                ' Define chart attributes
                strParam="caption=Monthly Unit Sales;xAxisName=Month;yAxisName=Units"

                ' Set Chart attributes
                 Call FC.setChartParams(strParam)
                ' Add chart data values and category names
                 Call FC.addChartData("462","label=Jan","")
                 Call FC.addChartData("857","label=Feb","")
                 Call FC.addChartData("671","label=Mar","")
                 Call FC.addChartData("494","label=Apr","")
                 Call FC.addChartData("761","label=May","")
                 Call FC.addChartData("960","label=Jun","")
                 Call FC.addChartData("629","label=Jul","")
                 Call FC.addChartData("622","label=Aug","")
                 Call FC.addChartData("376","label=Sep","")
                 Call FC.addChartData("494","label=Oct","")
                 Call FC.addChartData("761","label=Nov","")
                 Call FC.addChartData("960","label=Dec","")
                ' Render Chart with JS Embedded Method
                 Call FC.renderChart(false)

              %>      
       </BODY>
</HTML>

What we did in this program

  • Included the FusionCharts_Gen.asp class and FusionCharts.js class
  • Created the FusionCharts ASP class object FC for a Column 3D chart with 600 pixels width and 300 pixels height
  • Set the relative path of chart SWF file using setSwfPath
  • Stored the delimiter separated chart attributes in a variable strParam
  • Set these chart attributes to our chart using setChartParams
  • Added chart values and category names that are to be plotted on the Column 3D chart ,
  • Finally rendered the chart using renderChart

Please go through the FusionCharts ASP Class API Reference section to know more about the functions used in the above code.

When you now run this page, you will see a chart like the one below.

If you do not see a chart like the one below, please follow the steps listed in the Debugging your Charts section of this documentation.

So, you just saw how simple it is to create a chart using FusionCharts ASP Class functions.
Creating a chart with external XML file

Now, we will create the same chart in a different way. Here, we will be using two different programs. One program creates the chart XML using FusionCharts ASP Class and the other uses this XML to render the chart using the Data URL method. Code written inside Data.asp file creates the XML and SimpleChart.asp file uses the XML to render chart.

All code discussed here is present in Download Package > Code > ASPClass > BasicExample folder and Download Package > Code > ASPClass > BasicExample > Data folder.

Let's consider the code in Data.asp file first. This code is similar like the code in the above example; the only difference is it does not render the chart but streams XML to SimpleChart.asp file. 

<%@LANGUAGE="VBSCRIPT"%>
      <% option explicit %>
      <%
         'We have included ../../Includes/FusionCharts_Gen.asp - FusionCharts ASP Class
         'to help us easily embed the charts.
      %>
<!--#include file="../../Includes/FusionCharts_Gen.asp"-->
    <%
    'This page demonstrates the ease of generating charts using FusionCharts ASPClass.
    'We created a FusionCharts object instance
    'Set chart values and configurations and returns the XML using getXML() function
    'and write it to the response stream to build the XML
    'Here, we have kept this example very simple.
      dim FC
     ' Create FusionCharts ASP class object
      set FC = new FusionCharts
     ' Set chart type to column 3d
      call FC.setChartType("column3D")
      dim strParam
     ' Define chart attributes
      strParam="caption=Monthly Unit Sales;xAxisName=Month;yAxisName=Units;decimals=0; formatNumberScale=0;showLabels=1"
     ' Set chart attributes
      call FC.setChartParams(strParam)
     ' Add chart data values and category names
      call FC.addChartData("462","label=Jan","")
      call FC.addChartData("857","label=Feb","")
      call FC.addChartData("671","label=Mar","")
      call FC.addChartData("494","label=Apr","")
      call FC.addChartData("761","label=May","")
      call FC.addChartData("960","label=Jun","")
      call FC.addChartData("629","label=Jul","")
      call FC.addChartData("622","label=Aug","")
      call FC.addChartData("376","label=Sep","")
      call FC.addChartData("494","label=Oct","")
      call FC.addChartData("761","label=Nov","")
      call FC.addChartData("960","label=Dec","")
     'set content type as XML
      Response.ContentType ="text/xml"
     'Return the chart XML for Column 3D Chart 
      Response.Write(FC.getXML())
    %>

What we did here:

  • Included the FusionCharts_Gen.asp class and FusionCharts.js class
  • Created the FusionCharts ASP class object FC for a Column 3D chart with 600 pixels width and 300 pixels height
  • Set the relative path of chart SWF file
  • Stored the delimiter separated chart attributes in a variable strParam
  • Set these chart attributes to our chart
  • Added the chart data that are to be plotted on the Column 3D chart
  • Finally returned the XML and wrote it to the response stream

Let's now look at SimpleChart.asp function: 

<%@LANGUAGE="VBSCRIPT"%>
  <% option explicit %>
  <%
     'We have included ../Includes/FusionCharts.asp, which contains functions
     'to help us easily embed the charts.
  %>
  <!--#include file="../Includes/FusionCharts.asp"-->
   <HTML>
       <HEAD>
         <TITLE>FusionCharts XT - Simple Column 3D Chart using Data URL method</TITLE>
         <%
                'You need to include the following JS file, if you intend to embed the chart using JavaScript.
                'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
                'When you make your own charts, make sure that the path to this JS file is correct. Else, you 
                'will get JavaScript errors.
         %> 
         <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      </HEAD>
      <BODY>
         <h4>Simple Column 3D Chart using Data URL method</h4>
       <%
         'This page demonstrates the ease of generating charts using FusionCharts ASP Class.
         'For this chart, we have used a Data.asp which uses FusionCharts ASP Class (contained in /Data/ folder)
         'This file will generate the chart  XML and pass it to the chart
         'We will use the  FusionCharts ASP function - renderChart() to render the chart using the XML
         'For a head-start, we have kept this example very simple.
         'Create the chart - Column 3D Chart with data from Data/Data.xml
         Response.Write(renderChart("../../FusionCharts/Column3D.swf",
         "Data/Data.asp", "", "myFirst", 600, 300, false, false,false))
       %>
    </BODY>
</HTML>

Steps involved in this function:

  • Include FusionCharts.js class and FusionCharts.asp wrapper classes
  • Call renderChart() function with data from Data.asp function

Note: The renderChart() function used in this code is not the same with the one we used in the previous example, though they bear same name. This is FusionCharts ASP chart embedding function; please go through the Using with ASP > Basic Examples to know more about it.

Here is the output. As you can see, the same chart has been created but in a different way.
 
Creating a simple chart using JavaScript renderer

FusionCharts XT allows you to create pure JavaScript-only charts that does not require Flash, hence enabling your chart in browsers where Flash is not supported like that of iPhone and iPad, etc. This is achieved by calling the setRenderer function in ASP Class before you render your chart. Using this function you need to set the current renderer to javascript.

We modify the sample code which we have already used in the above simple chart implementation and added the required method. The code snippet below shows the modification:

' Create FusionCharts ASP class object
set FC = new FusionCharts      
' Set chart type to column 3d       
call FC.setChartType( "column3D" )
' Set JavaScript renderer
FC.setRenderer( "javascript" )

...

The resultant chart will look similar to the image shown below:

FusionCharts pure JavaScript chart
Set managed printing for Mozilla browsers

FusionCharts XT provides better-print feature for all Mozilla, WebKit, and Gecko based browsers like Firefox, Safari, etc. To enable this feature in ASP all you need to do is call the enablePrintManager function before rendering the chart. This will enable the print manager process print data from all the charts in a page and prepare the charts for better-quality printing. To read more on how print manager works, please go through this.

Note: Print Manager works only in browsers that supports canvas object.

The code below shows how you need to enable print manager through ASP Class. We again take the code from the simple chart implementation:

' Create FusionCharts ASP class object
set FC = new FusionCharts      
' Set chart type to column 3d       
call FC.setChartType( "column3D" )
' Enable Print Manager
FC.enablePrintManager( True )

...

Listening to Print Manager status using JavaScript

Print Manager takes a bit of time to prepare all charts present in a page for print. You can listen to Print Manager's Ready State event using the FusionCharts JavaScript class. Once the charts are ready, which can be tracked by listening to an event raised by the Print Manager, you can use the browser's File → Print menu, JavaScript's native window.print()function or Print Manager's advanced function - managedPrint(). The JavaScript code below shows how you can listen to the event and prepare for print:

<html>
...
  <body>
  <script type="text/javascript"><!-- 					
      FusionCharts.addEventListener ( 
          FusionChartsEvents.PrintReadyStateChange , 
          function (identifier, parameter) {
            if(parameter.ready){ 
               alert("Chart is now ready for printing.");
               document.getElementById('printButton').disabled = false;
            }
        });
    // --></script> 	   
    <input type="button" onclick="FusionCharts.printManager.managedPrint()"
        value="Managed Print" disabled="disabled" id="printButton" >
...
  </body> 
</html>

In the above code we have:

  • Added a JavaScript event-listener for the global event, PrintReadyStateChange, to the global JavaScript object - FusionCharts
  • Added a "Managed Print" button which will call FusionCharts.printManager.managedPrint(). The button is disabled when loaded.
  • When the event is fired, it provides the listener with event arguments. The parameters event argument contains a property ready. This returns true when the Print Manager is ready to print all charts in a page
  • Hence, in this event we can show an information alert and also enable the button, which was disabled prior to this.

Now, if you try printing from File → Print menu or using a button or function that call the window.print() function. You can also click the "Managed Print" button to print the chart.

How Print Manager Works:
  • Once a chart is rendered, it silently gathers all the image data of the present state of the chart
  • It converts the image data into image using canvas HTML object
  • It hides the canvas image below the chart
  • When print is invoked, a parallel CSS based print media layout (using @media print ) is created
  • In this print media layout the Flash chart is hidden and the canvas image is displayed
  • This layout with the canvas image is sent to the printer for print