This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border.
The following topics are prerequisites to understanding this topic:
igBulletGraph Overview: This topic provides conceptual information about the igBulletGraph
™ control including its main features, minimum requirements, and user functionality.
Adding igBulletGraph: This is a group of topics demonstrating how to add the igBulletGraph
control to an HTML page and to an ASP.NET MVC application.
This topic contains the following sections:
The background of the igBulletGraph
control is configurable in terms of spread and position and look-and-feel (fill and border). The spread and position are configurable in the dimension across the scale (through the backingInnerExtent
and backingOuterExtent
properties); along the scale, the background always spreads from one edge of the control to the other. The fill color and the border are managed by a set of properties available in the style template.
The following picture demonstrates a background color of a variety of orange and a cyan border with a thickness of 3 pixels. The background extent is made smaller by providing values for its backingInnerExtent
and backingOuterExtent
properties.
The following table explains briefly the configurable aspects of igBulletGraph
control’s background and maps them to properties that configure them.
Configurable aspects | Property | Default value | |
---|---|---|---|
Spread and position
(across the scale) |
backingInnerExtent | 0 | |
backingOuterExtent | 1.0 | ||
Look-and-feel | Fill color | backingBrush | Defined in the default theme |
Border color | backingOutline | Defined in the default theme | |
Border thickness | backingStrokeThickness | 2.0 |
The following table maps the desired behavior to its respective property settings.
In order to configure: | Use this property: | And set it to: | ||
---|---|---|---|---|
Aspect | Details | |||
Spread and position
(across the scale) |
Bottom / left edge position | The position of lower edge of the background (at horizontal orientation) or the left edge (at vertical orientation) relative to the bottom edge of the Graph area at horizontal orientation or to its left edge – at vertical orientation. | backingInnerExtent | The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. 0.2) |
Top / right edge position | The position of top edge of the background at horizontal orientation or the right edge at vertical orientation relative to the lower edge of the Graph area at horizontal orientation or to its left edge – at vertical orientation. | backingOuterExtent | The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. 0.2) | |
Look-and-feel | Fill color | Fill color of the background | backingBrush | The desired color |
Border thickness | Border thickness of the background | backingStrokeThickness | The desired value in pixels | |
Border color | Border color of the background | backingOutline | The desired color |
The screenshot below demonstrates how the igBulletGraph
looks as a result of the following settings:
Property | Value |
---|---|
backingBrush | '#FFDAB9' |
backingOutline | '#00FFFF' |
backingStrokeThickness | “3” |
backingInnerExtent | “0.2” |
backingOuterExtent | “0.7” |
Following is the code that implements this example.
In JavaScript:
$(function () {
$("#bulletGraph").igBulletGraph({
width: "300px",
height: "100px",
backingBrush:'#FFDAB9',
backingOutline: '#00FFFF',
backingStrokeThickness: "3",
backingInnerExtent:"0.2",
backingOuterExtent:"0.7"
});
The following topics provide additional information related to this topic.
Configuring the Scale (igBulletGraph): This topic explains, with examples, how to configure the scale of the igBulletGraph
control. This includes positioning the scale inside the control and configuring the scale tick marks and labels.
Configuring the Performance Bar (igBulletGraph): This topic explains, with examples, how to configure the performance bar of the igBulletGraph
control. This includes the value indicated by the bar, its width, position, and formatting.
Configuring the Comparative Marker (igBulletGraph): This topic explains, with code examples, how to configure the comparative measure marker of the igBulletGraph
control. This includes the marker’s value, width, and formatting.
Configuring Comparative Ranges (igBulletGraph): This topic explains, with code examples, how to configure ranges in the igBulletGraph
control. This includes the number of ranges and their positions, lengths, widths, and formatting.
Configuring the Tooltips (igBulletGraph): This topic explains, with code examples, how to enable the topoltips in the igBulletGraph
control and configure the delay with which they are displayed.
View on GitHub