.netCHARTING v7.0 Documentation Send comments on this topic.
Micro Charts
Getting Started > General Tutorials > Chart Type Anatomy 101 > Micro Charts

Glossary Item Box

 

Introduction

MicroCharts are miniature versions of actual charts, designed to help viewers understand complex relationships between data in repetitive scenarios such as data grids or InfoGrids. MicroCharts are optimized to use very little space and are ideal for data grids, info grids or use as parts of labels within charts. MicroCharts are defined using a markup language inside the chart label text. This means that anywhere a label is used, a microChart can easily be embedded. With the use of tokens, microCharts can be setup using default properties and will automatically represent the label's parent objects token values. InfoGrids are similar to traditional data grids but are generated entirely within chart labels. MicroCharts and InfoGrids are two unique technologies that are ideally suited for each other; MicroCharts enrich InfoGrids with concise data visualizations. Please see the tutorial on InfoGrids for additional information on data grid and dashboard usage.
 

Basic Usage

To use a microChart in a label, use a syntax that starts with <Chart: then the type of microChart and other options ending with a closing '>' character. Parameters must be specified using a format like param='value' using single quotes around the value as shown below:

[C#]

Chart.TitleBox.Label.Text = "<Chart:Bar value='5' max='10'>";
[Visual Basic]

Chart.TitleBox.Label.Text = "<Chart:Bar value='5' max='10'>"

 MicroChart Types

Each microChart type has a number of options available. Similar types work alike but all share the same syntax.

  • Bar
    <Chart:Bar value='5' max='10'>
    Draws a basic bar. Usually used with a max attribute so it lines up with other bars in a grid format.
  • BarGauge
    <Chart:BarGauge value='5' max='10'>
    This type is similar to Bar except a full width translucent version of the bar is drawn underneath like GaugeType.Bars on normal Charts.
  • BarFull
    <Chart:BarFull values='5,4,3' >
    Values specified for this type are placed on a 100% stacked axis.
  • Column
    <Chart:Column values='5,4,3' >
    Creates a series of columns based on specified values. This type is different (in appearance) than regular combo column charts because it's optimized for small sizes and does not support shading effects.
  • WinLose
    <Chart:WinLose values='1,1,1,1,-1,-1,-1'>
    This type is similar to Column except it only takes values -1,0,or 1 to represent a loss, tie, or win respectively. It is also useful in showing the status of something like a server functioning normally or being down over time.
  • Progress
    <Chart:Progress value='5' max='10'>
    This type is similar to Bar except the bar is drawn in segments.
  • ProgressGauge
    <Chart:ProgressGauge value='5' max='10'>
    This type is similar to BarGauge except the bar is drawn in segments.
  • Bullet
    <Chart:Bullet values='20,18,8,13' max='25'>
    The bullet type shows a value (bar) a target (vertical line segment) and AxisMarker bands indicate additional target or status.
  • Sparkline
    <Chart:Sparkline values='5,4,3' >
    A sparkline is similar to a line chart but without the extras like grid lines.
  • Arealine
    <Chart:AreaLine values='5,4,3' >
    Similar to an AreaLine chart but without the extras like axes.
  • Scale and ScaleB
    <Chart:Scale min='0' max='100'>
    The scale micro chart is designed to be used in a header of a column that will show micro charts based on that scale range. By specifying the same width for the scale and subsequent charts, it will ensure the charts in that column line up with each other and the scale. Using a scale also requires that the same max parameter value is set for all the charts so the values of each chart correspond to the values indicated by the scale. In some cases, the min parameter may also be required. ScaleB works the same as Scale, except it faces upward instead of facing down like Scale does.
  • Pie
    <Chart:Pie values='5,4,3' >
    Simple pie microChart
  • Pie3D
    <Chart:Pie3D values='5,4,3' >
    Same as pie but uses the 3D effect.
  • Marker
    <Chart:Marker type='square' color='crimson'>
    Draws any available ElementMarkerType. In addition, the circle (default) marker type also supports bubble shading effects when specified.
  • Image
    <Chart:Image src='image.png' rotate='45'>
    Drawn the specified image. Options such as image rotation and sizing are possible with this tag.
  • Spacer
    <Chart:Spacer size='230x15'>
    Acts as a transparent placeholder or spacer. It is useful in a number of scenarios to control layout.

 

A sample is available for each type of microChart demonstrating all the options available for those given types. These samples are located in the gallery under Chart Types/MicroCharts.

Available Parameters

Sizing MicroCharts

All microCharts have predefined default sizes. Types like Pie, Pie3D use 30x30 and Marker uses 20x20. All other except for Column and WinLose use 100x20. The Column and WinLose types size automatically depending on the number of values specified. This way stacking multiple column microCharts with different number of elements will allow the columns to be the same width. Column types will also automatically left align to support this. The column widths can be controled by specifying only the height parameter, however, using both width and height or just width is also supported.

Shading MicroCharts

A number of micro charts support shading effect modes. These can be specified with the 'shading' parameter which takes a number from 1 to 7 indicating the shading effect mode to use. The micro charts that support shading are:


Setting Axis Range

The scale micro chart provides a means to describe other horizontal based micro charts. When other micro charts are stacked vertically with a scale in the header row then must sync the scales in order to visualize the information correctly. The scale range can be specified through the Min and Max attributes. The default value of the Min attribute is always 0. The following micro chart types support the min/max axis range attributes:

The scale can also be used with other microCharts in some situations. For example, if using SparkLines to represent sales in january, a static scale with two labels: "Jan", "Feb" can be used to indicate the range represented by the sparklines.

Values and Colors

While most parameters apply to every type of microChart in a similar fashion, the value(s) and color(s) parameters vary depending on the type of microChart used. The following grid matrix explains how value and color parameters are used with the corresponding type of microChart.

NOTE: While value and color parameters take a single string value, the values and colors parameters (plural) accept a comma delimited list of the same values.

Type Value / Values Colors
Bar Value parameter indicates the bar value.

Color: Sets the bar color. 

Colors:
1st color sets the bar
2nd color sets the background

BarGauge Value parameter indicates the bar value. Color: Sets the bar color. 
Progress Value parameter indicates the bar value.

Color: Sets the bar color. 

Colors:
1st color sets the bar
2nd color sets the background

ProgressGauge Value parameter indicates the bar value. Color: Sets the bar color. 
BarFull Values parameter is used to pass a comma delimited list of values.

Colors: a list of colors for each bar.
Color: SimpleColor Feature

Bullet

Values: the sequence of values specify: Value, Target, 1st, and 2nd axis marker positions.

If the 3rd value is larger than the 4th. The axis marker colors fill in the opposite direction.

Colors:
1st Color: Bar
2nd Color: Target
3rd Color: Shade 1
4th Color: Shade 2
5th Color: Background
Color: SimpleColor Feature
SparkLine Values parameter is used to pass a comma delimited list of values.

Colors
1st Color: Line
2nd Color: Line ends
3rd Color: Max/Min
4th Color: AxisMarker

The word 'Transparent' can be used to omit specifying a color in the colors array.

AreaLine Values parameter is used to pass a comma delimited list of values.

Colors
1st Color: Line
2nd Color: Line ends
3rd Color: Max/Min
4th Color: AxisMarker

The word 'Transparent' can be used to omit specifying a color in the colors array.

Scale & ScaleB

Value: sets the default axis tick label text. ex. '<%Value,Currency>'

Values: a comma delimited list of string labels to place on the axis. ex: 'Bad,Good,Great' Because each value will be processed by the chart itself, markup can be used as well such as including images. This is demonstrated in the MicroScaleOptions sample.

Color: Specifies the color for axis and labels

Colors:
1st color: labels
2nd color: axis line

Pie Values parameter is used to pass a comma delimited list of values. Colors reflect element colors
Color: SimpleColor Feature
Pie3D Values parameter is used to pass a comma delimited list of values. Colors reflect element colors
Color: SimpleColor Feature
Marker N/A Color: marker color.
Column Values parameter is used to pass a comma delimited list of values.

Color: (+)columns

Colors:
1st: (+)columns
2nd: (-)columns
3rd: AxisMarker

WinLose Values parameter is used to pass a comma delimited list of values. The options are -1 = lose, 0 = tie, and 1 = win.

Color: (win)columns

Colors:
1st: (win)columns
2nd: (loss)columns
3rd: AxisMarker

 

SimpleColor Feature
By setting the color parameter for charts that support this feature, multiple colors will be created for all elements based on the specified color. This can allow the ability to quickly apply a primary color of your page to ensure the MicroCharts fit.

 

Using MicroCharts

Because micro charts can be used anywhere a label appears on a chart, there are an endless number of possibilities, however, below are a number of scenarios in which microCharts can be especially useful.

Scenario Example
In Labels on charts Code: Chart.TitleBox.Label.Text = "<Chart:Bar value='5' max='10'>";
In Element Labels Sample: Dashboards And InfoGrids/ChartMicroPie
On Axis Tick labels Sample: Dashboards And InfoGrids/ChartMicroAxis
In legend box entries Sample: Legend Box/LegendSparkLines
In Empty legend box headerLabel. Sample: Dashboards And InfoGrids/AnnotationInfoGrid1
Inside annotations Sample: Dashboards And InfoGrids/InfoGridMulti
By themselves as a chart control. Sample: Dashboards And InfoGrids/InfoGrid1
Inside asp.net DataGrid Sample: Dashboards And InfoGrids/DataGridDash


MicroChart Helpers

A number of tokens are available to help making microCharts easier. For example, the sample [Dashboards And InfoGrids/ChartMicroSubValues] uses the element token %SubValueList which can be used in the element label inside a microChart tag. Other useful tokens include:

Type Tokens
Element %SubValueList - a comma delimited list of sub values.
Series

%YValueList - a list of element y values

SeriesCollection

%YSeriesSumList - a list of of each series y value sum.
%YGroupSumList - a list of y value sums for each element group.
%ColorList - a list of colors used by the series in the collection.

 

Extending MicroChart functionality.

If the provided micro chart types do not meet the requirements of your project, custom micro charts can be built from scratch and embedded into chart labels in a similar fashion. Sample: Features/Legend Box/EmbeddedLegendCharts demonstrates this scenario. The sample inserts a Progress type MicroChart into the legend box similar to sample ('LegendCharts' located in the same section), except, the code to generates the indicator chart is stored in a separate file which can be modified.

 

©2011. All Rights Reserved.