Annotations
Annotations are user-defined objects or shapes drawn on a chart. Annotations are often required to make interpretation of the chart easy for the end user. This section will teach you how to create different shapes, images, and text annotations for use with your chart.
Annotations as part of FusionCharts Suite XT are defined inside the annotations object. This object has an array of groups, with each group element having a unique id. The groups object contains an array of items, each item contains information on one specific annotation in the chart. Having annotations organised in groups is useful when manipulating multiple annotations at once through API calls.
Shown below is a code snippet showing a the structure of a simple annotations object.
"annotations": {
"groups": [
{
"id": "custom-group-1",
"items": [
{
// Item definition goes here
},
{
// Item definition goes here
},
]
},
{
"id": "custom-group-2",
"items": [
{
// Item definition goes here
},
{
// Item definition goes here
},
]
},
]
}Using shapes in an annotation
Line Annotation
The simplest type of annotation is a line shaped annotation. The chart shown below has a simple dashed line and a label that highlights the point with the highest value over the week
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "0"
},
"annotations": {
"groups": [
{
"id": "infobar",
"items": [
{
"id": "high-line",
"type": "line",
"x": "$canvasStartX",
"y": "$dataset.0.set.2.y",
"tox": "$canvasEndX",
"toy": "$dataset.0.set.2.y",
"color": "#6baa01",
"dashed": "1",
"thickness": "1"
},
{
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasEndX - 60",
"y": "$dataset.0.set.2.y - 10"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}<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: 'spline',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "0"
},
//All annotations are grouped under this element
"annotations": {
//Annotations on a chart can be divided across multiple groups for easy management, and manipulation through API
"groups": [{
"id": "infobar",
//Under each group, you can define multiple items. Each item is a polygon, text or image - with its own set of parameters
"items": [{
"id": "high-line",
"type": "line",
"x": "$canvasStartX",
"y": "$dataset.0.set.2.y",
"tox": "$canvasEndX",
"toy": "$dataset.0.set.2.y",
"color": "#6baa01",
"dashed": "1",
"thickness": "1"
}, {
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasEndX - 60",
"y": "$dataset.0.set.2.y - 10"
}]
}]
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The attributes used to customize the annotation are:
| Name | Description |
|---|---|
|
If set to line, it renders a rectangle annotation. |
|
It specifies the starting x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the starting y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the ending x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the ending y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the thickness of the line annotation. |
|
It specifies the hex code for the color that will be used to render the line annotation. |
|
It specifies if the line must be dashed or not. |
|
It specifies the transparency for the annotation. |
Circle Annotation
The same annotation as shown above can be drawn using a circle that shows the highest value for the week. The chart looks like this
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors (In 1000s)",
"showValues": "0"
},
"annotations": {
"groups": [
{
"id": "anchor-highlight",
"items": [
{
"id": "high-star",
"type": "circle",
"x": "$dataset.0.set.2.x",
"y": "$dataset.0.set.2.y",
"radius": "12",
"color": "#6baa01",
"border": "2",
"borderColor": "#f8bd19"
},
{
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$dataset.0.set.2.x+75",
"y": "$dataset.0.set.2.y-2"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}<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: 'spline',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors (In 1000s)",
"showValues": "0"
},
"annotations": {
"groups": [{
"id": "anchor-highlight",
"items": [{
"id": "high-star",
"type": "circle",
"x": "$dataset.0.set.2.x",
"y": "$dataset.0.set.2.y",
"radius": "12",
"color": "#6baa01",
"border": "2",
"borderColor": "#f8bd19"
}, {
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$dataset.0.set.2.x+75",
"y": "$dataset.0.set.2.y-2"
}]
}]
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to draw and configure a circle annotation:
| Attribute | Description |
|---|---|
|
If set to circle, it renders a circle annotation. |
|
It specifies the center x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the center y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed. |
|
It specifies the radius of the circle. |
|
if specifies the y-radius of the circle that allows you to stretch or compress the annotation vertically. |
|
It specifies the hex code for the color that will be used to render the circle annotation. |
|
It specifies the transparency for the annotation. |
|
It specifies the starting angle for the circle annotation. |
|
It specifies the ending angle for the circle annotation. |
Using images in an annotation
You can specify the url to an image instead of a shape. Shown below is an example where images are used for the annotations
FusionCharts will load here..
{
"chart": {
"caption": "Revenue by store managers",
"subCaption": "Last quarter",
"xAxisName": "Managers",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"theme": "fint",
"LabelPadding": "50"
},
"annotations": {
"groups": [
{
"id": "user-images",
"items": [
{
"id": "jennifer-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
"x": "$xaxis.label.0.x - 24",
"y": "$xaxis.label.0.y - 48"
},
{
"id": "tom-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-3.png",
"x": "$xaxis.label.1.x - 24",
"y": "$xaxis.label.1.y - 48"
},
{
"id": "Milton-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-4.png",
"x": "$xaxis.label.2.x - 24",
"y": "$xaxis.label.2.y - 48"
},
{
"id": "Brian-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-5.png",
"x": "$xaxis.label.3.x - 24",
"y": "$xaxis.label.3.y - 48"
},
{
"id": "Lynda-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-2.png",
"x": "$xaxis.label.4.x - 24",
"y": "$xaxis.label.4.y - 48"
}
]
}
]
},
"data": [
{
"label": "Jennifer",
"value": "92000"
},
{
"label": "Tom",
"value": "87000"
},
{
"label": "Milton",
"value": "83000"
},
{
"label": "Brian",
"value": "66000"
},
{
"label": "Lynda",
"value": "58000"
}
]
}<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: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue by store managers",
"subCaption": "Last quarter",
"xAxisName": "Managers",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"theme": "fint",
"LabelPadding": "50"
},
"annotations": {
"groups": [{
"id": "user-images",
"items": [{
"id": "jennifer-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
"x": "$xaxis.label.0.x - 24",
"y": "$xaxis.label.0.y - 48"
}, {
"id": "tom-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-3.png",
"x": "$xaxis.label.1.x - 24",
"y": "$xaxis.label.1.y - 48"
}, {
"id": "Milton-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-4.png",
"x": "$xaxis.label.2.x - 24",
"y": "$xaxis.label.2.y - 48"
}, {
"id": "Brian-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-5.png",
"x": "$xaxis.label.3.x - 24",
"y": "$xaxis.label.3.y - 48"
}, {
"id": "Lynda-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/round-2.png",
"x": "$xaxis.label.4.x - 24",
"y": "$xaxis.label.4.y - 48"
}]
}]
},
"data": [{
"label": "Jennifer",
"value": "92000"
}, {
"label": "Tom",
"value": "87000"
}, {
"label": "Milton",
"value": "83000"
}, {
"label": "Brian",
"value": "66000"
}, {
"label": "Lynda",
"value": "58000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to configure an image annotation:
| Attribute | Description |
|---|---|
type |
If set to image, it renders an image annotation. |
x |
It specifies the center x-coordinate for the annotation. This x coordinate is relative to the x coordinate of the annotation group in which the annotation is placed. |
y |
It specifies the center y-coordinate for the annotation. This y coordinate is relative to the y coordinate of the annotation group in which the annotation is placed. |
url |
It specifies the relative path of the image to be used as annotation. |
Image scaling
It may be required at times to scale images based on chart specific requirements, in some cases you may want to keep one image to scale while scaling up or down other images based on the data being shown.
Shown here is an example where the images are scaled
FusionCharts will load here..
{
"chart": {
"caption": "Top 4 Chocolate Brands Sold",
"subCaption": "Last Year",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333"
},
"annotations": {
"width": "500",
"height": "300",
"autoScale": "1",
"groups": [
{
"id": "user-images",
"xScale_": "20",
"yScale_": "20",
"items": [
{
"id": "butterFinger-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/butterFinger.png",
"x": "$xaxis.label.0.x - 30",
"y": "$canvasEndY - 150",
"xScale": "50",
"yScale": "40"
},
{
"id": "tom-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/snickrs.png",
"x": "$xaxis.label.1.x - 26",
"y": "$canvasEndY - 141",
"xScale": "48",
"yScale": "38"
},
{
"id": "Milton-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/coffee_crisp.png",
"x": "$xaxis.label.2.x - 22",
"y": "$canvasEndY - 134",
"xScale": "43",
"yScale": "36"
},
{
"id": "Brian-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/100grand.png",
"x": "$xaxis.label.3.x - 22",
"y": "$canvasEndY - 131",
"xScale": "43",
"yScale": "35"
}
]
}
]
},
"data": [
{
"label": "Butterfinger",
"value": "92000"
},
{
"label": "Snickers",
"value": "87000"
},
{
"label": "Coffee Crisp",
"value": "83000"
},
{
"label": "100 Grand",
"value": "80000"
}
]
}<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: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 4 Chocolate Brands Sold",
"subCaption": "Last Year",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333"
},
"annotations": {
"width": "500",
"height": "300",
"autoScale": "1",
"groups": [{
"id": "user-images",
"xScale_": "20",
"yScale_": "20",
"items": [{
"id": "butterFinger-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/butterFinger.png",
"x": "$xaxis.label.0.x - 30",
"y": "$canvasEndY - 150",
"xScale": "50",
"yScale": "40",
}, {
"id": "tom-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/snickrs.png",
"x": "$xaxis.label.1.x - 26",
"y": "$canvasEndY - 141",
"xScale": "48",
"yScale": "38"
}, {
"id": "Milton-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/coffee_crisp.png",
"x": "$xaxis.label.2.x - 22",
"y": "$canvasEndY - 134",
"xScale": "43",
"yScale": "36"
}, {
"id": "Brian-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/100grand.png",
"x": "$xaxis.label.3.x - 22",
"y": "$canvasEndY - 131",
"xScale": "43",
"yScale": "35"
}]
}]
},
"data": [{
"label": "Butterfinger",
"value": "92000"
}, {
"label": "Snickers",
"value": "87000"
}, {
"label": "Coffee Crisp",
"value": "83000"
}, {
"label": "100 Grand",
"value": "80000"
}]
}
}
);
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 scaling in an image annotation
| Attribute | Description |
|---|---|
xScale |
It specifies the percentage according to which the width of the image is scaled. |
yScale |
It specifies the percentage according to which the height of the image is scaled. |
Using text in an annotation
Shown here is a simple annotation with some text in a spline chart
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "0"
},
"annotations": {
"groups": [
{
"id": "infobar",
"items": [
{
"id": "high-line",
"type": "line",
"x": "$canvasStartX",
"y": "$dataset.0.set.2.y",
"tox": "$canvasEndX",
"toy": "$dataset.0.set.2.y",
"color": "#6baa01",
"dashed": "1",
"thickness": "1"
},
{
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasEndX - 60",
"y": "$dataset.0.set.2.y - 10"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}<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: 'spline',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "0"
},
//All annotations are grouped under this element
"annotations": {
//Annotations on a chart can be divided across multiple groups for easy management, and manipulation through API
"groups": [{
"id": "infobar",
//Under each group, you can define multiple items. Each item is a polygon, text or image - with its own set of parameters
"items": [{
"id": "high-line",
"type": "line",
"x": "$canvasStartX",
"y": "$dataset.0.set.2.y",
"tox": "$canvasEndX",
"toy": "$dataset.0.set.2.y",
"color": "#6baa01",
"dashed": "1",
"thickness": "1"
}, {
"id": "label",
"type": "text",
"text": "Highest footfall 25.5K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasEndX - 60",
"y": "$dataset.0.set.2.y - 10"
}]
}]
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>These are the attributes that help customize annotation text:
| Attribute | Description |
|---|---|
type |
If set to text, it renders a text annotation. |
x |
It specifies the center x-coordinate for the annotation. This x coordinate is relative to the x coordinate of the annotation group in which the annotation is placed. |
y |
It specifies the center y-coordinate for the annotation. This y coordinate is relative to the y coordinate of the annotation group in which the annotation is placed. |
label |
It specifies the text to render as the annotation. |
color |
It specifies the hex code of the color that will be used to render the text annotation. |