Loading
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
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. |
The data structure of this annotation is shown 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"
}
]
}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
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. |
The data structure of this annotation is shown 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"
}
]
}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
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. |
The data structure of this annotation is shown 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"
}
]
}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
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. |
The data structure used in the chart above to configure scaling of annotations is as follows:
{
"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"
}
]
}Using text in an annotation
Shown here is a simple annotation with some text in a spline chart
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. |
{
"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"
}
]
}