XML/SWF Charts| CSS/XML Timeline Eons(New)| Timeline Eons| SlickBoard

 < previousnext > 

 

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>

 

 < previousnext > 


Copyright © 2003-2017, maani.us