Using AnyChart in Flex applications.

AnyChart Flash Charting Component is a flexible Adobe Flash based solution that allows you to create interactive and great looking flash charts and dashboards. It is a cross-browser and cross-platform charting solution intended for everybody who deals with creation of dashboard, reporting, analytics, statistical, financial or any other data visualization solutions.

Please see more information about AnyChart at:

A lot of technologies allow developers to use Flash based products, but there are specific issues in each case. AnyChart Team have tried to creates samples that make the start of implementation of AnyChart easier and understandable. This particular sample explains how to use AnyChart Flash Charts, Maps, Gauges and Dashboards with Adobe Flex.

Introduction

Flex application's range of use is very wide, but the maximum effect this platform has introduced to Business Analytics. On using Flex it became available to create convenient and interactive dashboards for BI. One of the key moments of dashboards are charts, and their functionality and obviousness affects most of all on comfort of the whole dashboard. AnyChart perfectly fits these criteria, this component greatly surpasses the default Flex Charting Component in functionality and appearance. Earlier AnyChart was intended for use in HTML-pages and its integration in Flex components was quite a problem, but now we've created a Flex component, which gives the amusing results in connection with XML tools in Flex application.

All you need is a .SWC component library. This component gets data and settings of the chart in XML format. This fact gives you the opportunity to use all AnyChart functionality. You may use any data source for the creation of your own XML.

Using AnyChart XML format you can take one of the examples from the gallery you liked and, as it is already adjusted, use it in your application, changing only data. AnyChart is very flexible in things concerning visual effects and options, tune up each elements according to your taste using detailed User's Guide. Full listing of XML Nodes and attributes can be found in the XML Reference.

Licensing: this tutorial uses trial version of AnyChart Flex component - if you'd like to use AnyChartFlexComponent.swc in your Flex projects you need to purchase a proper license of AnyChart.

to top

How to add the component to a project and to a stage.

First of all you have to download SWC components (one for Gauges and one for Charts and Maps).

Please download from this location: download AnyChartFlexComponent.zip

Note: below you will see a number of samples, you can view them online, view source and download each sample.

Then drag the file from the where you saved the downloaded component to the "libs" folder of your project:

When "AnyChartFlex" component appears in "Components" tab of the "Custom" section - just drag it to the stage(1), and then press the "Refresh" button(2):

And so, after all these operations, the newly-added chart is ready for work . AnyChart Flex Component doesn't support Design Time mode, and on the stage it will look like AnyChart logo with gray background, as it is shown on the screenshot below:

to top



Your first chart.

When component is added to the stage you can start working with it.

As it was mentioned above AnyChart receives all settings and data in special XML format. There is no direct opportunity to tune chart appearance and point data with the means of MXML - all settings and data are set using AnyChartFlex.anychartXML property.

The charts's creation consists of three steps:

1) Tuning up general settings, such as choosing a chart type, adjusting labels, axes labels, etc. Below you can see a piece of XML code that sets up these options:

<chart plot_type="CategorizedVertical">
	<chart_settings>
	  <title>
		  <text>ACME Corp. Sales</text>
	  </title>
	  <axes>
		  <x_axis>
			  <title>
				  <text>Year</text>
			  </title>
		  </x_axis>
		  <y_axis>
			  <title>
				  <text>Sales (USD)</text>
			  </title>
		  </y_axis>
	  </axes>
  </chart_settings>
</chart>

2) Preparing data and converting them in XML format:

In this example we will show how to create Single-Series Column chart. To create a chart you need data, and for this example we will take the sales of ACME Corp for 5 years from 2004 to 2008. Here is a table with the sales amount:

Year Sales
2004 $63716
2005 $72163
2006 $94866
2007 $56866
2008 $90.000

For this example we will just convert the sales table in XML for this chart type. AnyChart XML for this table looks as follows:

<data>
	<series name="Product Sales" type="Bar">
		<point name="2004" y="63716" />
		<point name="2005" y="72163" />
		<point name="2006" y="94866" />
		<point name="2007" y="56866" />
		<point name="2008" y="19000" />
	</series>
</data>

3) Setting configured XML to the component:

And now, when the general settings of the chart and data are ready, complete XML will look as follows:

<anychart>
  <charts>
		<chart plot_type="CategorizedVertical">
		  <data>
			<series name="Product Sales" type="Bar">
			  <point name="2004" y="63716" />
			  <point name="2005" y="72163" />
			  <point name="2006" y="94866" />
			  <point name="2007" y="56866" />
			  <point name="2008" y="19000" />
			</series>
		  </data>
		  <chart_settings>
			  <title>
				  <text>ACME Corp. Sales</text>
			  </title>
			  <axes>
				  <x_axis>
					  <title>
						  <text>Year</text>
					  </title>
				  </x_axis>
				  <y_axis>
					  <title>
						  <text>Sales (USD)</text>
					  </title>
				  </y_axis>
			  </axes>
		  </chart_settings>
		</chart>
  </charts>
</anychart>;

All we have to do now is to set this XML to the chart by setting the XML-object to AnyChartFlex.anychartXML property, to an actual component on the stage. Here is a full listing of example's code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" xmlns:ns1="com.anychart.*" 
                viewSourceURL="srcview/index.html"
                creationComplete="onCreationComplete();">
                
    <ns1:AnyChartFlex x="10" y="10" width="570" height="450" id="sampleChart"/>
    
    <mx:Script>
        <![CDATA[
            private function onCreationComplete():void
            {
                var xmlData:XML=<anychart>
                  <charts>
                    <chart plot_type="CategorizedVertical">
                      <data>
                        <series name="Product Sales" type="Bar">
                          <point name="2004" y="63716" />
                          <point name="2005" y="72163" />
                          <point name="2006" y="94866" />
                          <point name="2007" y="56866" />
                          <point name="2008" y="19000" />
                        </series>
                      </data>
                      <chart_settings>
                          <title>
                              <text>ACME Corp. Sales</text>
                          </title>
                          <axes>
                              <x_axis>
                                  <title>
                                      <text>Year</text>
                                  </title>
                              </x_axis>
                              <y_axis>
                                  <title>
                                      <text>Sales (USD)</text>
                                  </title>
                              </y_axis>
                          </axes>
                      </chart_settings>
                    </chart>
                  </charts>
                </anychart>;
                
                sampleChart.anychartXML=xmlData;
            }
        ]]>
    </mx:Script>
</mx:Application>

Finally, we get the result:

View Sample
View Source

to top

Working with data

Preparing data for the chart is a very significant moment, so we will pay more attention to it . For setting data to the chart, you need to transfer them from data sources, usual for Flex-developers, such as ArrayCollection, Array, XMLList and XMLListCollection into special XML format. Its syntax depends on the chart type.

All data for all types of charts in AnyChart is passed in series. Each series is a set of so-called "points". Data point represents an element of data on the chart. For example, it is one value in a line or a region on a map. The point carries all data and additional information, that is necessary for building series on the chart. Chart type in AnyChart architecture depends on the type of Plot and type of series. These two things define format of point XML, that must be passed to the component.

Here is a table, arranged by type of the Plot and by the series type, that are used with this plot. There are examples of proper XML points in series, you need it in order to create a chart:

Plot: CategorizedVertical, CategorizedHorizontal, CategorizedBySeriesVertical, CategorizedBySeriesHorizontal
Series Type Point XML Format Sample
Bar
Line
Spline
Marker
Area
SplineArea
StepLineForward
StepLineBackward
StepLineForwardArea
StepLineBackwardArea
<series type="Bar|Line|Spline|...">
<point name="P1" y="100"/>
<point name="P2" y="190"/>
<point name="P3" y="150"/>
</series>
Bubble <series type="Bubble">
<point name="P1" y="100" size="10"/>
<point name="P2" y="190" size="13"/>
<point name="P3" y="150" size="25"/>
</series>
RangeBar
RangeArea
RangeSplineArea
<series type="RangeBar|RangeArea|RangeSplineArea">
<point name="P1"start="100" end="190"/>
<point name="P2"start="110" end ="210"/>
<point name="P3"start="115" end ="160"/>
</series>
Candlestick
OHLC
<series type="Candlestick|OHLC">
<point name="P1" open="10" high="12" low="9" close="11" />
<point name="P2" open="12" high="14" low="10" close="13" />
<point name="P3" open="11" high="18" low="3" close="15" />
</series>

Plot: Scatter
Series Type Point XML Format Sample
Line
Spline
Marker
Area
SplineArea
StepLineForward
StepLineBackward
StepLineForwardArea
StepLineBackwardArea
<series type="Line|Spline|Bubble|...">
<point x="120" y="100"/>
<point x="180" y="190"/>
<point x="145" y="150"/>
</series>
Bubble <series type="Bubble">
<point x="145" y="100" size="10"/>
<point x="180" y="190" size="13"/>
<point x="220" y="150" size="25"/>
</series>
RangeArea
RangeSplineArea
<series type="RangeArea|RangeSplineArea">
<point x="34" start="100" end="190"/>
<point x="50" start="110" end ="210"/>
<point x="123" start="115" end ="160"/>
</series>
Candlestick
OHLC
<series type="Candlestick|OHLC">
<point x="150" open="10" high="12" low="9" close="11" />
<point x="230" open="12" high="14" low="10" close="13" />
<point x="340" open="11" high="18" low="3" close="15" />
</series>

Plot: Pie/Doughnut
Series Type Point XML Format Sample
N/A <point name="P1" y="100"/>

Plot: Map
Series Type Point XML Format Sample
MapRegions <series>
<point name="Finland" y="5.92"/>
<point name="Germany" y="6.85"/>
<point name="Greece" y="5.75"/>
</series>
Marker <series type="Marker">
<point x="-94.19" y="58.571" name="Marker 1"/>
<point x="-121.554" y="28.722" name="Marker 2"/>
</series>
Bubble <series type="Bubble">
<point x="-77.61" y="43.16" size="231"/>
<point x="-122.2" y="37.77" size="372"/>
<point x="-97.51" y="35.46" size="444"/>
</series>
Line <series type="Line">
<point x="-94.19" y="58.571"/>
<point x="-121.554" y="28.722"/>
</series>
Connector <series type="Connector">
<point x="-92.19" y="38.571"/>
<point x="-92.354" y="34.722"/>
</series>

As you can see from the table, many types of series can be combined within the same plot type. For example, you can create a chart in a CategorizedVertical plot type and add several series of different type, for instance: Bar, Line, Spline, Area and OHLC.

Forming XML

The most widespread mechanism of storing data for Flex-developer while working with charts - is ArrayCollection. Let's take a look at an example, which uses createSeriesFromAC function, converting random ArrayCollection into AnyChart XML Format. This function is very simple. All you need is point the field of category and value field for the series, and also type series name, that can be used in a legend or during label/tooltip formatting:

View Sample
View Source

In the example given we use CategorizedVertical plot type and Bar series type. To create another type of chart, you have to refer to reference-table, modify createSeriesFromAC function a little bit and get the required result. For example let's take a look at the application, that builds Bubble chart on Scatter plot. Series point syntax for this chart looks like that: <point x="10" y="10" size="45"/>. To create the necessary XML we need to write another procedure of data collection from the example of ArrayCollection class.

View Sample
View Source

Using Custom attributes

Custom attributes are very useful tool for a developer. They let you add additional information to data points, that can be used in label and tooltip text formatting, and also for point identification for its later use in point's event handlers.

Let's take a look at a typical example of custom attributes using. We have a data table, that reflects company KPIs monthly, including profit, expenses and amount of employees in every period:

Month Profit Expenses ENo
January 2000000 1500000 100
February 1000000 200000 80
March 1500000 500000 110

We need to build a Horizontal Bar Chart with one series, the categories will be represented by Month column, and values - by Profit column. Besides, in the tooltip of every point, you need to display not only profit value, but the amount of expenses and number of working employees in an actual month. For the component to be able to display the required data in tooltip, we need to define a list of custom attributes for each point. The syntax of custom attributes to a point is the following:

	<point name="January" y="2000000">
		<attributes>
			<attribute name="attributeName">attributeValue</attribute>
		</attributes>
	</point>

AttributeName - is an attribute identifier, that is used in the tooltip/label formatting string. AttributeValue - is the actual value of this attribute.

Table converted in XML with defined custom attributes:

<series name="Profit">
	<point name="January" y="2000000">
		<attributes>
			<attribute name="Expenses">1500000</attribute>
			<attribute name="ENo">100</attribute>
		</attributes>
	</point>
	<point name="February" y="1000000">
		<attributes>
			<attribute name="Expenses">200000</attribute>
			<attribute name="ENo">80</attribute>
		</attributes>
	</point>
	<point name="March" y="1500000">
		<attributes>
			<attribute name="Expenses">500000</attribute>
			<attribute name="ENo">110</attribute>
		</attributes>
	</point>
</series>

As you can see from the listing, all information that deals with expenses and amount of employees in actual month is now in custom attributes. While converting data to XML we also use ArrayCollection as a data source, and a simple function for data conversion and mapping. Executable sample:

View Sample
View Source

to top

Dynamic chart refresh

To update chart dynamically you need to to all the same you did in Your first chart. Just change an XML with data and assign it to AnyChartFlex.anychartXML property.

Below you can see the complete listing and a very simple application, which uses dynamic data refresh of Doughnut Chart:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.anychart.*" 
                creationComplete="updateChart();" viewSourceURL="srcview/index.html">

<ns1:AnyChartFlex x="10" y="10" id="sampleChart" height="363" width="437"/>
<mx:Button x="455" y="31" label="Random Data" width="134" height="35" click="updateChart();"/>

<mx:Script>
	<![CDATA[
		private function updateChart():void
		{
			var xmlData:XML=
			<anychart>
				<charts>
					<chart plot_type="Doughnut">
						<data>
							<series>
								<point name="P1" y={10+Math.random()*20}/>
								<point name="P2" y={10+Math.random()*20}/>
								<point name="P3" y={10+Math.random()*20}/>
								<point name="P4" y={10+Math.random()*20}/>
							</series>
						</data>
					</chart>
				</charts>
			</anychart>;
			
			sampleChart.anychartXML=xmlData;
		}
	]]>
</mx:Script>
</mx:Application>

Executing example for this code:

View Sample
View Source

Here is one more example of dynamic chart update. This example demonstrates the possibility of changing the type of series and updating chart data with the random values:

View Sample
View Source

to top

Handling chart events

In Anychart Flex Component event handling is the same for all chart types, whether it is a Line Chart or the even a Map. When user clicks or hovers a point you can get all the information about it, such as the name of the category, Y-value, name of the series, and the full list of all custom attributes.

You can handle the following events:

  • pointClick - occurs when the user clicks the point.
  • pointMouseOver - occurs when the user moves the mouse cursor over the point.
  • pointMouseOut - occurs when the user moves the mouse cursor away from the point.

To handle an event you have to define event handler function. This handler must receive an instance of AnyChartPointEvent class (which contains data from the point) as a parameter. Here is an example of the vent handlers definition:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.anychart.*">
	  <ns1:AnyChartFlex x="10" y="10" width="472" height="401" id="sampleChart" 
                      pointClick="onPointClick(event);" 
                      pointMouseOver="onPointMouseOver(event);"
                      pointMouseOut="onPointMouseOut(event);"/>
    <mx:Script>
        <![CDATA[
            import com.anychart.events.AnyChartPointEvent;
            private function onPointClick(event:AnyChartPointEvent):void {
                trace(event);                
            }
            
            private function onPointMouseOver(event:AnyChartPointEvent):void {
                trace(event);
            }
            
            private function onPointMouseOut(event:AnyChartPointEvent):void {
                trace(event);
            }
         ]>
    </mx:Script>
</mx:Application>

An instance of AnyChartPointEvent class, received by handler-function, contains all information about the point that sent an event. Below you can see a table of all properties, that come to the handler and corresponding XML nodes and attributes:

Property Name XML Node or Attribute Description
pointName <point name="Jan"/> type:String; Returns argument for Categorized plot types.
seriesName <series name="Product A"/> type: String; Returns name of point's series.
y <point y="215"/> type: Number; Returns value.
x <point x="56"/> type: Number; Returns argument for Scatter plot.
size <point size="0.67"/> type: Number; Returns the size of a bubble for Bubble series type.
high <point high="25.56"/> type:Number; Returns high value for OHLC and CandleStick series type.
low <point low="31.22"/> type:Number; Returns low value for OHLC and CandleStick series type.
open <point open="44.77"/> type:Number; Returns open value for OHLC and CandleStick series type.
close <point close="12.34"/> type:Number; Returns close value for OHLC and CandleStick series type.
start <point start="12.5"/> type:Number; Returns start value for Range series types: RangeBar, RangeArea and RangeSplineArea.
end <point end="45.1"/> type:Number; Returns end value for Range series types: RangeBar, RangeArea and RangeSplineArea.
pointCustomAttributes

<point>
<attributes>
<attribute name="id">45187</attribute>
</attributes>
</point>

type:Object; Returns dynamic class with fields that hold custom attributes defined in point's XML.
seriesCustomAttributes

<series>
<attributes>
<attribute name="fullName">John Scott</attribute>
</attributes>
</series>

type:Object;Returns dynamic class with fields that hold custom attributes defined in series XML.

The data that comes to the event depends on series type and type of the plot that you use in a chart, and on the event type. pointClick and pointMouseOver events always return some data, pointMouseOut event always returns blank data. For the properties of Number type NaN is returned when property is not set, for String and Object - null. Handling events is shown in the next Bar Chart example :

View Sample
View Source

Getting custom attributes in the event handler

In Working with data you can learn how to add custom attributes to the data points. Custom attributes is an additional information that you can assign to specific point or to all points in series on the chart. Custom attributes can be used in the labels and tooltips, but their primary purpose is getting additional information about the point on click or other events from this point. This method is very useful for setting unique identifier for every point. This information can be used to receive additional data for the later chart's drill-down . Besides that it is useful to store some extra-data in the points to display it in the external elements or controls.

The syntax for setting custom attributes in XML looks as follows:

<point name="Jan" y="72781">
	<attributes>
		<attribute name="productID">98761-73</attribute>
		<attribute name="productFullName">Cherry</productFullName>
		<attribute name="profitLastYear">98712</productFullName>
	</attributes>
</point>

In the fragment above only one point from the series is shown. Three custom attributes are attached: productID, productFullName, profitLastYear. This data is not on the chart, but when you get an event from this point you can get full list of attributes and their values.

To get custom attributes in AnyChartPointEvent event class pointCustomAttributes property of Object type is used. Attributes are retrieved by name set in point's XML. For example to get the value of productID field you have to use the following expression- event.pointCustomAttributes.productID.

Here is a more detailed code sample, that gets all custom attributes, and outputs values to the debug console:

private function onPointClick(event:AnyChartPointEvent):void
{
	var productID:String=event.pointCustomAttributes.productID;
	var productFullName:String=event.pointCustomAttributes.productFullName;
	var profitLastYear:String=event.pointCustomAttributes.profitLastYear;

	trace(productID);
	trace(productFullName);
	trace(profitLastYear);
}

As you can see from the code you should use name that is declared in XML. If some custom attributes are not set in some points, you should do a null-check. For instance: if(event.pointCustomAttributes.productID!=null) productID=event.pointCustomAttributes.productID;

Take a look at the sample, that contains event handling and getting point custom attributes. This example is a comparative chart of total GDP between some of the European countries. Besides GDP value in every point, there are four additional fields: Capital, Area, Density and Population. Additional information about the country is displayed in the external panel on point hover.

View Sample
View Source

to top

Multiple charts on the stage

AnyChart Flex Component behaves itself as any other component or control element. To create several charts on one form, you need to drag the required number of controls on your stage, as it is described in How to add chart to a stage section.

The next example shows the usage of several charts on a stage:

View Sample
View Source

to top

Using Drilldown in dashboards

The mechanism of Drilldown is widely used in Dashboards. This mechanism lets the users get more detailed information from the data sources. This may cover any control element that displays charts, including charts themselves. One of the typical examples of using Drilldown with two charts looks this way: You have a chart of so-called first-level, that contains some summary information in each data point. Next to it there is another chart, so called second-level chart. This chart displays more detailed information on every point selected in the first chart.

As an example let's take a look at the data from ACME Corp. We have sales data for three products: Product A, Product B and Product C for 2007. And first of all we are interested in summary quarter sales. We will place this data in the first chart. As a result we get a plain and clear chart with four columns. That's great, but what if CEO of ACME Corp., looking at this report, will see there a very small value? Of course he will want to find out - what was the reason of such low sales in the first quarter, what product was less popular and affected the final result. Or, on the contrary, when he see that the sales in the third quarter have rapidly grown, he will be eager to know which product gave such results. To satisfy curious CEO we add second chart on the stage, that will display more detailed information separated into months for all products. And clicking on every quarter column he will get the the details. Below we show an example of such dashboard. First quarter is selected in the first-level chart by default, and in the second-level chart you can see detailed information on the first quarter. This example's shows how to get pointClick event from the first-level chart, select quarter index from it and and refresh second-level chart taking into consideration actual quarter data:

drilldown

View Sample
View Source

Another example demonstrates how to use multiple drilldown. We have a first-level chart, monthly sales of ACME Corp. for 2007. In two second-level Pie-Charts we display sales of Product A, Product B and Product C in eastern and western regions. When column is selected in the first chart the second-level charts will be refreshed with actual data for this month. This example uses the same idea as the previous one, except the fact that we refresh two second-level charts.

multi_drill_down

View Sample
View Source

Very often dashboard's layout doesn't allow to use two or more charts for the drilldown because of the lack of free space. In this situation you can use so-called Self-Drilldown, when we get more detailed graphic in the same place. The next example demonstrates this option. When you click the point on first-level chart, you choose the corresponding quarter, and get the detailed information on all months and products in the same chart. If you wish to go back to look the quarter information again, just click "Back"button.

View Sample
View Source

to top

Using Maps

Whether you design dashboards or reports - the primary goal is to show data in the most convenient and clear way. AnyChart gives you an opportunity to show complex geographical data in a very plain view. None of the data display methods that deal with regional or geographic information can compete with such natural thing as map.

Your First Map

The architecture of working with maps in AnyChart looks this way. Unlike other components AnyChart doesn't store data for drawing a map inside executable .SWF file. It is loaded from outside in a special .AMAP format, that stores a set of polygons for drawing and data that deals with regions. This fact gives more flexibility to a developer, as one may use any number of maps in his project and do not beware of .SWF file and an application growing huge.

Maps, like charts, receive settings and data in XML format, the only difference is that for maps it is obligatory to have a map source, i.e. a path to .amap file, containing map that you are going to use. Let's look the simplest sample of map usage. In this example we don't use binding data to regions, but simply display the map .

For this we need to:

1) Choose a map from the collection of maps that goes with AnyChart package. For this example we choose map of Australia (australia.amap).

2) Put .amap file of the map in the directory that will contain .swf file of your application. In the development environment these will be bin-debug or bin-release folders. In our case we put the map in maps sub-folder, so that the full path to file will look like this - bin-release\maps\australia.amap.

3) Define a map source in XML settings. That's quite simple, at first you need to set the path and the folders that contains all maps, and then set map source, i.e. name of .amap file. Further there is a listing of XML that defines all these settings:

<anychart>
	<settings>
		<maps path_type="absolute" path="maps/" />
	</settings>
	<charts>
		<chart plot_type="Map">
			<data_plot_settings>
				<map_series source="australia.amap"/>
			</data_plot_settings>
			<chart_settings>
				<title>
					<text>Australia Map</text>
				</title>
			</chart_settings>
		</chart>
	</charts>
</anychart>

After setting up this XML to the component we will get the following result:

View Sample
View Source
Download

Note: Flex Builder doesn't include folders bin-debug and bin-release from the examples, using map files .amap, to the packed initial code by default. If you want to download the initial code of the example with map usage, then use "Download" link instead of "View Source -> Download source". All the examples with maps usage will contain "Download" link with all the files.

Binding Map to Regional Data

All the maps that go with AnyChart have a region layout. You can bind any value or a set of custom attributes to some region on the map. Later you can define various colors for regions according to some specific rules or conditions.

To bind data to some region we have to define a data point in series that contains a predefined identifier or a region name. For example let's take a map of the USA, divided into states, and bind a value of 2150 to California state. XML syntax for such operation looks as follows:

<data>
	<series>
		<point name="CA" y="2150"/>
	</series>
</data>

Besides one value, you can bind any number of custom attributes in addition, and then use them in labels, tooltips or event handlers.

A typical map usage with data bound to the regions is a sales monitoring. Let's look at the detailed example, using map of the USA divided into states. The value itself, bound to a state, doesn't give anything to a user. Of course, you can display value, bound with sales, as a label on a state map, but this will be identical to what the user sees in a table with full states list. In such situations the color can be used to determine the sales status quickly.

For example, let all the states that have the sales level below $10000 have red color, sales between $10000 and $40000 - yellow, and states with level of sales higher than $40000 - green. In this situation the user gets a good reference point while viewing the map. From the first glance the user sees that Texas has a non-satisfactory level of sales, and Washington has surpassed all expectations.

Executable example of application, that builds such map:

View Sample
View Source
Download

Using Markers on a Map

In AnyChart you have a possibility to set markers on a map. A marker is an element of certain shape and size, that can be used on charts and maps. In maps markers are used to show cities or other geographical locations. AnyChart uses geographical coordinates, to define element location on the map. To add a marker on the map you need to point out latitude and longitude.

XML syntax for markers looks this way:

<series type="Marker">
	<point name="Text" x="-92" y="63"/>
	<point name="Inuvik" x="-133.7059935517" y="68.36599718311"/>
	<point name="Juneau" x="-134.4040065517" y="58.30300118311"/>
	<point name="Prince Rupert" x="-130.3099975517" y="54.32099918311"/>
</series>

The series of Marker type is declared in the listing above. It contains four points. In the point definition a significant part is only attributes of x and y, where x stands for longitude and y - for latitude. Name attribute in this case sets point name, for example - name of the city. This value can be used for formatting text of labels and tooltips, using {%Name} token, and also for point identification during event handling.

Sample of markers' usage. Markers are used to show the location cities in Canada:

View Sample
View Source
Download

Using Bubbles on a Map

Besides markers you can use bubbles. They are usually used to display some value relatively to other points. AnyChart lets you add bubbles to the map in the same way as markers. To add a bubble to the map you have to adjust point's latitude and longitude. The only difference is that for bubble it is necessary to set the size.

XML syntax for bubbles:

<series type="Bubble">
	<point name="Text" x="-92" y="632" size="63.5"/>
	<point name="Inuvik" x="-133.7059935517" y="68.36599718317" size="25.9"/>
	<point name="Juneau" x="-134.4040065517" y="58.3030011837" size="42.2"/>
	<point name="Prince Rupert" x="-130.3099975517" y="54.32099918311"17" size="39.4/>
</series>

As you can see from the listing the differences between bubbles and markers are the series type and additional size attribute. The most frequent practical use of bubbles is the visualization of statistics on cities or regions. The sample below shows the amount of site visits by unique users from cities of Canada. The bubble size is used as a percentage value of these unique users:

View Sample
View Source
Download

Using Connectors on Map

Very often you need to display some path on the map. Special type of series named Connector contains a number of path points. Unlike the Line series on a map, connector is a line that behaves as a single entity. According to this principle it sends events and shows tooltip.

XML syntax for the connector on a map:

<series type="Connector" name="Moosonee - Toronto" color="DarkRed">
<point x="-80.7300035517" y="51.33000218311"/>
<point x="-79.4126355517" y="43.72076818311"/>
</series>

Just like other types of elements on the map coordinates of connector points are also defined in geographical coordinates. In each connector you must have at least two defined points, otherwise it won't be displayed.

In the example below, connectors are used to show available flight routes from Moosonee to other cities. Besides connectors this examples also uses markers to show the cities.

View Sample
View Source
Download

Handling Map Events

Handling events from the maps is just the same thing in charts. You can get the full information about the point on the map. This can be a map region, a marker, a bubble or a connector. In Handling Chart Events section you can fins a detailed description how to work with events, get data from the point and handle custom attributes.

Using visual methods we present an example of event handling on the map. Besides event handling this example demonstrates how to use instance of XMLListCollection class as a data source:

View Sample
View Source
Download

Using Drilldown in Maps

AnyChart gives you an opportunity to create maps with drilldown. As well as all the maps are taken from external resources, you can create an application with drilldown of any depth with no problems. Drilldown with map doesn't differ from similar with charts. The technique described Using Drilldown in Dashboards section is also actual for the maps. The only difference is that with drilling into some region you have to change map source.

To demonstrate this we created a rather complicated example of self-drilldown from the map of USA to a specific state. Sample data for this example is taken from an external source - this is an XML file with a set of states' nodes, each of them contains a collection of nodes, that hold statistical information for counties in this state. A file with data named usaData.xml is in bin-debug and bin-release folders of the project. For this project we used map of USA divided into states and maps of all states divided into counties. All these .amap files are taken from standard AnyChart package. Files of maps, used in the project, are in bin-debug\maps and bin-release\maps folders.

The scheme of this example's work is rather simple. On pointClick event we get a state identifier and use it to form the name of the map file. For example, if user clicks California, we get state identifier - CA. After that we form new XML with data for this state and set new map source as "counties\CA.amap" and refresh the component.

You can download project from "Download" link under the screenshot of example, which will contain all maps including whole country map and maps of states:

View Sample
View Source
Download

to top

Using Gauges

The idea of Gauge Charts is just the same, but XML settings and functions are a little bit different.

How to update value and color

This sample shows you how change the value of the pointer in Gauge and its color. This method is applicable to all gauges and pointer types.

View Sample
View Source

How to handle events

This sample shows how to handle value change event, when pointer is editable and user can drag it and change the value. This method is applicable to all gauges and pointer types.

View Sample
View Source

Circular Gauges

Circular Gauge is as minimum a radial scale that sweeps any angle from 0 to 360 degrees and a pointer, Needle or Knob that indicates values on that scale. Gauge scale is usually colored for easy value quality distinction.

Read more about Circular Gauges XML in User's Guide:

View Sample
View Source

Semi-Circular Gauges

Semi Circular gauges are Circular Gauges with 180° sweep_angle (which can be any, actually) - they are very popular in Dashboards and used to show revenue or sales level.

Read more about setting angles for circular gauges:

View Sample
View Source

Quarter-Circular Gauges

Quarter-Circular gauges are Circular Gauges with 90° sweep_angle (which can be any, actually). Fuel gauge on your car dashboard is Quarter-Circular almost for sure.

Read more about setting angles for circular gauges:

View Sample
View Source

Tank Gauge

Tank Gauge imitates a barrel filled with some liquid. It is a simple linear gauge, but with a special pointer type. This type of gauge is very attractive and simply-adjusted, as Tank Pointer has almost the same attributes as Bar Pointer.

Read more about Tank Gauge:

View Sample
View Source

Thermometer Gauge

Thermometer gauge, as you can understand it from its name, indicates a mercurial thermometer. You can place thermometer gauge horizontally, vertically of place several thermometers on your gauge. In addition to the width of your thermometer bar you can configure your thermometer's bulb properties.It is a simple linear gauge, but with a special pointer type.

Read more about Thermometer Gauge:

View Sample
View Source

Interactive Knob Gauges

Knob Guage uses a needle pointer but it also has a cap of larger radius that imitates a gear and may use a custom marker as a needle. With the help of Knob Gauge you can imitate a massive gear or a volume control.

Read more about Knob Gauge:

View Sample
View Source

Vertical Bullet Graphs

A bullet graph is a variation of a bar graph developed by Stephen Few. Seemingly inspired by the traditional thermometer charts and progress bars found in many dashboards, the bullet graph serves as a replacement for dashboard gauges and meters. Few developed bullet graphs to overcome the fundamental issues of gauges and meters; they typically display too little information, require too much space, and are cluttered with useless and distracting decoration. The bullet graph features a single, primary measure (for example, current year-to-date revenue), compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good. The qualitative ranges are displayed as varying intensities of a single hue to make them discernible by those who are color blind and to restrict the use of colors on the dashboard to a minimum.

Bullet Graphs are simple linear gauges with two (or more) pointers - one of marker type, and another one of bar type.

Read more about Bullet Graphs

 

View Sample
View Source

Horizontal Bullet Graphs

And the same Bullet Graph Sample, but horizontally oriented. See documentation links above.

View Sample
View Source

Vertical Linear Gauges

Vertical Gauge is a slider, with a single or multiple pointers to show your data value, gauge has some scale, usually colored for easy value quality distinction.

Read more about Vertical Gauges:

View Sample
View Source

Horizontal Linear Gauges

Horizontal Gauge is a slider, with a single or multiple pointers to show your data value, gauge has some scale, usually colored for easy value quality distinction.

Read more about Horizontal Gauges:

View Sample
View Source

Gauge Dashboard

In many cases gauges may have a complex structure and one gauge may "contain" another in it (think of a wrist watches with several dials), or, for example, you may want to have several gauges placed one to one (like on car dashboard).

AnyChart allows to create such gauges using simple and understandable mechanism. Please see sample weather dashboard below and study docs on this topic:

View Sample
View Source

Afterwords

Hope you have found all the samples and explanations helpful, if you have any questions or comments - please free to contact us at: contact@anychart.com

To learn more about AnyChart, get User's Guide and XML Reference:
Download Full AnyChart Evaluation Package or View documentation online

to top


download Download Trial     buy Buy Now