XML/SWF Charts > Reference > chart

Introduction
Gallery
Requirement
Download
Tutorial
Reference

        chart_border
        chart_data
        chart_data effect
        chart_data label
        chart_data link
        chart_data note
        chart_data tooltip
        chart_grid_h
        chart_grid_v
        chart_guide
        chart_label
        chart_note
        chart_pref
        chart_rect
        chart_transition
        chart_type

        series
        series_color
        series_explode

        axis_category
        axis_category_label
        axis_ticks
        axis_value
        axis_value_label

        draw
        filter

        context_menu
        embed
        legend
        link
        link_data
        scroll
        tooltip
        update

        Web Page
        Multiple Charts
        Chart Size
        Scalable Chart
        Background Color
        Transparent Chart
        Alternative Content
        Performance
        Secure Server

        XML Source
        Scripting
        External Variables
        Databases
        Debugging
        Caching
        Timeout

        Full Screen
        Printing
        Chart in Flash
        Multilanguage Text
        Buttons

        Flash to Javascript
        Javascript to Flash

FAQ

Buy
Contact Us

< previous

next >

chart_type

<!-- standard chart -->
<chart_type>string</chart_type>


<!-- mixed chart -->
<chart_type>
   <string>string</string>
   <string>string</string>
   ...
</chart_type>

Description

chart_type sets the chart type. Valid values are:

line
column (default)
stacked column
floating column
3d column
image column
stacked 3d column
parallel 3d column
pie
3d pie
image pie
donut
bar
stacked bar
floating bar
area
stacked area
3d area
stacked 3d area
candlestick
scatter
polar
bubble

Standard & Mixed Charts

In standard charts, only one chart type is specified in a single string. Example:


<chart>

   <chart_type>column</chart_type>

</chart>

In mixed charts, more than one chart type are specified in multiple strings. The first chart type is applied to the first row of data (first series), the second chart type is applied to the second row of data (second series), and so on.

In mixed charts, only area, column, and line chart types are valid. The area portion of the chart is always displayed in the back layer. The column portion of the chart is displayed in the middle layer. The line portion of the chart is displayed in front layer. Example:


<chart>

   <chart_data>
      <row>
         <null/>
         <string>2006</string>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>40</number>
         <number>20</number>
         <number>65</number>
         <number>90</number>
      </row>
      <row>
         <string>Region C</string>
         <number>56</number>
         <number>35</number>
         <number>40</number>
         <number>90</number>
      </row>
   </chart_data>
   
   <chart_type>
      <string>line</string>
      <string>column</string>
      <string>column</string>
   </chart_type>

</chart>

Image Charts

The image column and image pie chart types use images to render it as charts. This can be a JPEG image, unanimated GIF, PNG, or SWF flash animation. Pass an image URL for each series in the data <row> tag like this:


<chart>

   <chart_type>image column</chart_type>
   
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row url='images/woman.jpg'>
         <string></string>
         <number>10</number>
         <number>8</number>
         <number>40</number>
      </row>
      <row url='images/man.jpg'>
         <string></string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
      </row>
   </chart_data>

</chart>

See the Gallery examples.

Joined Charts

Joining charts is a simple way to make two or more independent charts look as one. This is done by displaying multiple independent charts right next to each other on the web page (without gaps in between), and by applying the same background color to all of them to make them look as one chart. Notice that each chart has an independent source file. They are connected only visually:

<HTML>

<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>

<BODY bgcolor="#FFFFFF">

<P><table cellspacing='0'><tr><td>

<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js.");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,45,2',
			'width', '240',
			'height', '300',
			'scale', 'noscale',
			'salign', 'LT',
			'bgcolor', '#666060',
			'wmode', 'opaque',
			'movie', 'charts',
			'src', 'charts',
			'FlashVars', 'library_path=charts_library&xml_source=sample1.xml', 
			'id', 'my_chart',
			'name', 'my_chart',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
		document.write(alternateContent); 
	}
}
// -->
</script>
<noscript>
	<P>This content requires JavaScript.</P>
</noscript>

</td><td>

<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js.");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,45,2',
			'width', '240',
			'height', '300',
			'scale', 'noscale',
			'salign', 'LT',
			'bgcolor', '#666060',
			'wmode', 'opaque',
			'movie', 'charts',
			'src', 'charts',
			'FlashVars', 'library_path=charts_library&xml_source=sample2.xml', 
			'id', 'my_chart',
			'name', 'my_chart',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
		document.write(alternateContent); 
	}
}
// -->
</script>
<noscript>
	<P>This content requires JavaScript.</P>
</noscript>

</td></tr></table>


</BODY>
</HTML>

Full_Screen works with one chart at a time. Joined charts can not be viewed together. Turn off Full Screen in joined charts, or use Composite Charts instead.

See Multiple Charts and the examples in the gallery section.

Composite Charts

Composite charts are one chart drawing another independent chart in its background by using the draw image function. The XML source for the first chart looks like this:

<chart>

   <!-- make this chart a pie chart -->
   <chart_type>pie</chart_type>

   <!-- draw another chart inside this one -->
   <draw>
      <image url='charts.swf?library_path=libs/charts_library&xml_source=sample_2.xml' />
   </draw>

</chart>

Notice that the source file for the second chart is completely independent from the first one.

See the draw function for details, and the examples in the gallery section.

Custom Charts

Use draw and other functions to generate custom charts and graphs. See the examples in the gallery section.

Chart Preferences

Some chart types have preferences editable in chart_pref.

Example

<chart>

   <chart_type>stacked 3d column</chart_type>

</chart>

<chart>

   <chart_type>pie</chart_type>

</chart>

<chart>

   <chart_type>bar</chart_type>

</chart>

< previous

next >