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

• Value
  Used by micro charts that take a single value such as Bar, BarGauge, Progress, ProgressGauge
• Values
  Specify multiple numeric values for the micro chart.
• Color
  Specifies a color for micro charts that display a single value. For some cases it is used for a simpleColor feature described in more detail below.
• Colors
  Used to specify the colors used on the chart.
• Min / Max
  Specifies the minimum and maximum scale values.
• Width / Height
  Specifies the width and height of the micro chart in pixels.
• Size
  Can be used to set the size easier than using width and height separately. Examples: size='100x20' or size='20' (for pies or markers). Setting the size parameter with a single value applies it to both width and height.
• Shading
  Takes a number between 1 and 7 and specifies the shading effect mode to use on the micro chart.
• AxisMarker
  Takes a single to draw a reference line or two values that specify a range to highlight similar to range axis markers on regular charts. Sparkline, AreaLine, and Column support this feature.
• Type
  Specifies the ElementMarkerType for use with a marker micro chart.
• Url
  Specifies a clickable URL for the microchart.
• Tooltip
  Specifies a tooltip that will appear when hovering over the micro chart.
• Src
  Image source path. Used with Chart:Image type.
• Rotate
  Specifies image rotation in degrees.  Used with Chart:Image type.

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:

• Bar
• BarGauge
• Progress
• ProgressGauge
• BarFull
• Bullet
• Pie
• Marker - (With markers, only the default 'Circle' marker type supports shading)

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:

• Bar
• BarGauge
• Progress
• ProgressGauge
• Bullet
• Scale

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.

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.

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:

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.