Loading
Configuring Bullet Graph
FusionCharts Suite XT allows you to configure several cosmetic and functional properties for the bullet graphs.
In this section, you will be shown how you can:
-
Customize plot and target properties
-
Customize color range properties
-
Customize tick marks
-
Render a dot as the data plot
-
Show/hide the chart value
-
Configure hover effects
Customizing Plot and Target Properties
Customizing Color Properties
A bullet graph with the color properties customized looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"plotFillColor": "#5b0101",
"plotFillAlpha": "90",
"targetColor": "#5b0101",
"targetThickness": "4"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
//Configuring plot fill color
"plotFillColor": "#5b0101",
//Configuring plot transparenct (alpha)
"plotFillAlpha": "90",
//Configuring target color
"targetColor": "#5b0101",
//Configuring target thickness
"targetThickness": "4"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize plot and target color properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the fill color for the plot bar, e.g. #23ACB5. |
|
It is used to specify the transparency for the plot bar. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
|
It is used to specify the hex code for the color used to render the target line, e.g. #FFFFFF. |
|
It is used to specify the thickness, in pixels, for the target line, e.g. 3. |
Customizing Border Cosmetics
A bullet graph with the border properties customized looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"showPlotBorder": "1",
"plotBorderColor": "#333333",
"plotBorderThickness": "1",
"plotBorderAlpha": "100"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"showPlotBorder": "1",
"plotBorderColor": "#333333",
"plotBorderThickness": "1",
"plotBorderAlpha": "100"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize plot and target border properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a border will be shown for the plot bar. Setting this attribute to |
|
It is used to specify the hex code of the plot border color, e.g. #456ADC. |
|
It is used to specify the thickness, in pixels, for the plot border, e.g. 4. |
|
It is used to specify the transparency for the plot border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
Customizing the Plot and Target Width and Height
By default, the chart automatically decides the width/height (width in case of a vertical bullet graph and height in case of the horizontal bullet graph) based on the data you provide. However, you can configure these manually.
A horizontal bullet graph with the height of the plot and target bar customized looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"plotfillpercent": "30",
"targetFillPercent": "30"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
// Percent of width occupied by the plot
"plotfillpercent": "30",
// Percent of canvas width occupied by target bar
"targetFillPercent": "30"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the plot and target height:
| Attribute Name | Description |
|---|---|
|
It is used to specify the percentage of color range that the plot fill bar will occupy. |
|
It is used to specify the percentage of color range that the target fill bar will occupy. |
Customizing Color Range Properties
Configuring Color
You can configure the color range to be filled with a gradient mix instead of a solid color.
A horizontal bullet graph configured for the color range properties looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"colorRangeFillMix": "{light-10},{light-70},{dark-10}",
"colorRangeFillRatio": "10,70,20",
"showColorRangeBorder": "1",
"colorRangeBorderColor": "#CCCCCC",
"colorRangeBorderThickness": "1",
"colorRangeBorderAlpha": "100"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "50"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "50"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "50"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
//Defining color range fill mix formula
"colorRangeFillMix": "{light-10},{light-70},{dark-10}",
//Defining color range fill ratio
"colorRangeFillRatio": "10,70,20",
//Showing color range borders
"showColorRangeBorder": "1",
//Customizing color range borders (Color, Thickness and Alpha)
"colorRangeBorderColor": "#CCCCCC",
"colorRangeBorderThickness": "1",
"colorRangeBorderAlpha": "100"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "50"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "50"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "50"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to configure the color properties for the color range:
| Attribute Name | Description |
|---|---|
|
It is used to specify the gradient fill formula for the color range, e.g. {light-10}, {light-70}, {dark-10}. |
|
It is used to specify the ratio in which each color constituent in the gradient fill mix will be applied to the color range, e.g. 10, 70, 20. |
|
It is used to specify whether a border will be shown for the color range. Setting this attribute to |
|
It is used to specify the hex code for the border color for the color range, e.g. #444444. |
|
It is used to specify the thickness, in pixels, for the color range border, e.g. 3. |
|
It is used to specify the transparency of the color range border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
To render the bullet graph in 2D, set the colorRangeFillMix attribute to an empty value, like this "colorRangeFillMix": "".
Configuring Shadow
A horizontal bullet graph with the shadow effect enabled looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"showShadow": "0",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"showShadow": "0",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
},
events: {
'beforeRender': function(event, args) {
var container = document.createElement("div"),
sender = event.sender;
container.setAttribute("id", "checkbox-container");
container.innerHTML = '<input type="checkbox" id="showShadow">Show Shadow?</input>';
args.container.parentNode.insertBefore(container, args.container.nextSibling);
var showShadowCB = document.getElementById("showShadow");
//Function to show/hide value
function toggleShadow(evt, obj) {
//Using showValue attribute to show hide chart value
if (showShadowCB.checked) {
sender.setChartAttribute('showShadow', 1);
} else {
sender.setChartAttribute('showShadow', 0);
}
}
//Set event listener for check boxes
showShadowCB.addEventListener && showShadowCB.addEventListener("click", toggleShadow);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The above chart is rendered with a Show Shadow ? check box. Selecting this check box will enable the shadow effect for the bullet graph, deselecting it will disable the effect.
Given below is a brief description of the attribute used to enable the shadow effect:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether shadow effects will be enabled for the color range. Setting this attribute to |
Customizing Tick Marks and Tick Values
Customizing Tick/Value Visibility and Positioning
In a horizontal bullet graph, by default, the tick marks are rendered below the graph; you can opt to render it above the graph. In a vertical bullet graph, by default, the tick marks are rendered on the right; you can opt to show them on the left. You can also opt to hide the tick marks and tick values.
A horizontal bullet graph with the tick/value visibility and positioning customized looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"captionPadding": "7"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"captionPadding": "7"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
},
events: {
'beforeRender': function(event, args) {
var container = document.createElement("div"),
sender = event.sender;
container.setAttribute("id", "checkbox-container");
container.innerHTML = '<input type="checkbox" id="tmCB" checked>Show Tick Mark?</input><input type="checkbox" id="tvCB" checked>Show Tick Value?</input><input type="checkbox" id="tpCB">Tick On Top?</input>';
args.container.parentNode.insertBefore(container, args.container.nextSibling);
var tickmarkCB = document.getElementById("tmCB"),
tickvalueCB = document.getElementById("tvCB"),
tickposCB = document.getElementById("tpCB");
//Function to show/hide tick mark
function showTickMark(evt, obj) {
//Using showTickMarks attribute to show/hide ticks
(tickmarkCB.checked) ? sender.setChartAttribute('showTickMarks', 1) :
sender.setChartAttribute('showTickMarks', 0);
}
//Function to show/hide tick value
function showTickValue(evt, obj) {
//Using showTickValues attribute to show/hide tick value
(tickvalueCB.checked) ? sender.setChartAttribute('showTickValues', 1) :
sender.setChartAttribute('showTickValues', 0);
}
//Function to show/hide tick value
function toggleTickPos(evt, obj) {
//Using showTickValues attribute to set tick position
(tickposCB.checked) ? sender.setChartAttribute('ticksBelowGraph', 0) :
sender.setChartAttribute('ticksBelowGraph', 1);
}
//Set event listener for check boxes and radio buttons
tickmarkCB.addEventListener && tickmarkCB.addEventListener("click", showTickMark);
tickvalueCB.addEventListener && tickvalueCB.addEventListener("click", showTickValue);
tickposCB.addEventListener && tickposCB.addEventListener("click", toggleTickPos);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The above chart is rendered with three check boxes: “Show Tick Mark?” - Selecting it will show the tick marks, deselecting it will hide them, “Show Tick Value?” - Selecting it will show the tick values, deselecting it will hide them, “Tick on Top?” - Selecting it will show the tick marks above the graph, deselecting it will show them below.
Given below is a brief description of the attributes used to customize the tick/value visibility and positioning:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether tick marks will be shown for the graph. Setting this attribute to |
|
It is used to specify whether tick values will be shown for the graph. Setting this attribute to |
|
It is used to specify whether the tick marks and tick values will be shown above or below the graph. Setting this attribute to |
Customizing the Number and Cosmetics of Major and Minor Tick Marks
By default, the number of major and minor tick marks is determined by the chart automatically based on the data provided by you.
A bullet graph with the number and cosmetics of major and minor tick marks customized looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"minorTMNumber": "3",
"majorTMcolor": "#0075c2",
"majorTMalpha": "50",
"majorTMheight": "5",
"majorTMthickness": "2",
"minorTMcolor": "#0075c2",
"minorTMalpha": "50",
"minorTMheight": "2",
"minorTMThickness": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"minorTMNumber": "3",
//Configuring tick marks cosmetics
"majorTMcolor": "#0075c2",
"majorTMalpha": "50",
"majorTMheight": "5",
"majorTMthickness": "2",
"minorTMcolor": "#0075c2",
"minorTMalpha": "50",
"minorTMheight": "2",
"minorTMThickness": "1"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the tick marks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of major tick marks to be rendered. |
|
It is used to specify the number of minor tick marks to be rendered. |
|
It is used to specify the hex code of the color using which the major tick marks will be rendered on the gauge, e.g. #333333. |
|
It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the major tick marks, e.g. 15. |
|
It is used to specify the thickness of the major tick marks, e.g. 2. |
|
It is used to specify the hex code of the color using which the minor tick marks will be rendered on the gauge, e.g. #666666. |
|
It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the minor tick marks, e.g. 12. |
|
It is used to specify the thickness of the minor tick marks, e.g. 1. |
Rendering a Dot as the Plot Instead of a Filled Bar
A bullet graph rendered with a dot as the plot instead of the filled bar looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"plotAsDot": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
//Configuring the plot to show as a dot
"plotAsDot": "1"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to show a dot instead of the filled bar:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a dot will be shown as the plot instead of the filled bar. Setting this attribute to |
Showing/hiding Chart Value
A horizontal bullet graph with the chart value hidden looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
},
events: {
beforeRender: function(event, args) {
var container = document.createElement("div"),
sender = event.sender;
container.setAttribute("id", "checkbox-container");
container.innerHTML = '<input type="checkbox" id="showVal" checked>Show Value?</input>';
args.container.parentNode.insertBefore(container, args.container.nextSibling);
var showValueCB = document.getElementById("showVal");
//Function to show/hide value
function showValue(evt, obj) {
//Using showValue attribute to show hide chart value
if (showVal.checked) {
sender.setChartAttribute('showValue', 1);
} else {
sender.setChartAttribute('showValue', 0);
}
}
//Set event listener for check boxes
showValueCB.addEventListener && showValueCB.addEventListener("click", showValue);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The chart above is rendered with a Show Value? check box. Selecting this check box will show the chart value, deselecting it will hide the value.
Given below is a brief description of the attribute used to show/hide the data value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the chart value will be shown. Setting this attribute to |
Configuring Hover Effects
You can use hover effects to improve the visual representation of your gauge.
A horizontal bullet graph with hover effects enabled looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
"targetHoverColor": "#1aaf5d",
"targetHoverAlpha": "75",
"targetHoverThickness": "5",
"showPlotBorderOnHover": "1",
"plotBorderHoverColor": "#001421",
"plotBorderHoverAlpha": "75",
"plotBorderHoverThickness": "2"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25",
//Configuring hover effects
"targetHoverColor": "#1aaf5d",
"targetHoverAlpha": "75",
"targetHoverThickness": "5",
"showPlotBorderOnHover": "1",
"plotBorderHoverColor": "#001421",
"plotBorderHoverAlpha": "75",
"plotBorderHoverThickness": "2"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to enable and configure the hover effect:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the hover effect will be configured for the chart elements. Setting this attribute to |
|
It is used to specify the hex code for the target line color when the mouse pointer is hovered over it, e.g. #234ACD. |
|
It specifies the transparency for the target line when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 55. |
|
It is used to specify the thickness of the target line when the mouse pointer is hovered over it, e.g. 5. |
|
It is used to specify whether the plot border will be shown when the mouse pointer is hovered over it. Setting this attribute to |
|
It is used to specify the hex code for the plot border when the mouse pointer is hovered over it, e.g. #34ACDB. |
|
It is used to specify the transparency for the plot border when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e. g. 100. |
|
It is used to specify the thickness for the plot border when the mouse pointer is hovered over it, e.g. 4. |