Loading
Real-life Use Cases
This article describes how annotations can be used in the following scenarios:
Adding a Data Callout Label
FusionCharts will load here..
The above chart shows the usage of annotations to create a callout (using a rectangle, a polygon, and a text annotation, grouped together) above a column. The annotations are dynamically positioned using annotation macros. After the chart is rendered (when the renderComplete event is triggered), the quarter with the highest revenue is determined and the annotation group is positioned over the data plot representing that quarter.
The data structure for this chart is given below::
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Last Year",
"showBorder": "0",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"yAxisMaxValue": "50000",
"showValues": "0",
"showTooltip": "0",
"animation": "0",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "30400"
},
{
"label": "Q2",
"value": "29800"
},
{
"label": "Q3",
"value": "21800"
},
{
"label": "Q4",
"value": "26800"
}
],
"annotations": {
"showbelow": "0",
"groups": [
{
"id": "Callout",
"items": [
{
"id": "CalloutBase",
"type": "rectangle",
"radius": "2",
"alpha": "90",
"fillColor": "#6baa01"
},
{
"id": "CalloutTriangle",
"type": "polygon",
"sides": "3",
"startangle": "270",
"alpha": "90",
"fillColor": "#6baa01",
"radius": "9"
},
{
"id": "CalloutLabel",
"type": "Text",
"fontSize": "12",
"bold": "1",
"fillcolor": "#ffffff"
}
]
}
]
}
}
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Last Year",
"showBorder": "0",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"yAxisMaxValue": "50000",
"showValues": "0",
"showTooltip": "0",
"animation": "0",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "30400"
},
{
"label": "Q2",
"value": "29800"
},
{
"label": "Q3",
"value": "21800"
},
{
"label": "Q4",
"value": "26800"
}
],
"annotations": {
"showbelow": "0",
"groups": [
{
"id": "Callout",
"items": [
{
"id": "CalloutBase",
"type": "rectangle",
"radius": "2",
"alpha": "90",
"fillColor": "#6baa01"
},
{
"id": "CalloutTriangle",
"type": "polygon",
"sides": "3",
"startangle": "270",
"alpha": "90",
"fillColor": "#6baa01",
"radius": "9"
},
{
"id": "CalloutLabel",
"type": "Text",
"fontSize": "12",
"bold": "1",
"fillcolor": "#ffffff"
}
]
}
]
}
}Providing More Information about Data Plots
FusionCharts will load here..
The above chart compares the footfall at two stores, Bakersfield Central and Los Angeles Topanga.
When the mouse pointer is hovered over a data plot, it triggers the dataplotRollover event. Consequently, an annotation group (containing of a line, a label, and text annotation) that displays additional information about the data plot is shown. When the mouse pointer is hovered out of the data plot, it triggers the dataPlotRollOut event and the annotation group is hidden.
Macro sub-tokens are used to position the annotation group with respect to the axes and datasets. The hide() method is used to hide the group.
The data structure for this chart is given below:
{
"chart": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day",
"yAxisName": "No. of visitors",
"yAxisNamePadding": "100",
"showYAxisValues": "0",
"theme": "fint",
"showValues": "0",
"showTooltip": "0"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"annotations": {
"origw": "600",
"origh": "450",
"autoscale": "1",
"groups": [
{
"id": "ds1tips",
"items": [
{
"id": "indicator-line",
"type": "line",
"dashed": "1"
},
{
"id": "tip1_1",
"type": "rectangle",
"fillcolor": "#6baa01",
"x": "$dataset.0.set.0.x + 5",
"y": "$dataset.0.set.0.y - 30",
"tox": "$dataset.0.set.0.x + 80",
"toy": "$dataset.0.set.0.y - 10",
"visible": "0"
}
]
},
{
"id": "yaxisline",
"items": [
{
"id": "line",
"type": "line",
"color": "#f8bd19",
"x": "$canvasstartx - 5",
"y": "$canvasstarty",
"tox": "$canvasstartx - 5",
"toy": "$canvasendy",
"thickness": "3"
},
{
"id": "none-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 60",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 20",
"toy": "$canvasendy",
"radius": "3"
},
{
"id": "none-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 10",
"color": "#f8bd19"
},
{
"id": "none-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "None",
"x": "$canvasstartx - 37",
"y": "$canvasendy - 12",
"fontsize": "12",
"bold": "1"
},
{
"id": "few-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 55",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 100",
"toy": "$canvasendy - 80",
"radius": "3"
},
{
"id": "few-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 90",
"color": "#f8bd19"
},
{
"id": "few-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "Few",
"x": "$canvasstartx - 35",
"y": "$canvasendy - 92",
"fontsize": "12",
"bold": "1"
},
{
"id": "moderate-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 85",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 180",
"toy": "$canvasendy - 160",
"radius": "3"
},
{
"id": "moderate-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 170",
"color": "#f8bd19"
},
{
"id": "moderate-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "Moderate",
"x": "$canvasstartx - 50",
"y": "$canvasendy - 172",
"fontsize": "12",
"bold": "1"
},
{
"id": "maximum-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 88",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 260",
"toy": "$canvasendy - 240",
"radius": "3"
},
{
"id": "maximum-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 252",
"color": "#f8bd19"
},
{
"id": "maximum-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "High",
"x": "$canvasstartx - 52",
"y": "$canvasendy - 252",
"fontsize": "12",
"bold": "1"
}
]
},
{
"id": "dyn-label-grp",
"items": [
{
"id": "dyn-label-bg",
"type": "rectangle",
"radius": "3"
},
{
"id": "dyn-label",
"type": "text",
"fillcolor": "#ffffff",
"fontsize": "12",
"bold": "1"
},
{
"id": "dyn-detail-label",
"type": "text",
"align": "right",
"x": "$canvasendx",
"bgcolor": "#ffffff"
}
]
}
]
},
"dataset": [
{
"seriesname": "Bakersfield Central",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "25507"
},
{
"value": "9110"
},
{
"value": "15529"
},
{
"value": "20803"
},
{
"value": "19202"
}
]
},
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
},
{
"value": "12400"
},
{
"value": "15800"
},
{
"value": "19800"
},
{
"value": "21800"
}
]
}
]
}
{
"chart": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day",
"yAxisName": "No. of visitors",
"yAxisNamePadding": "100",
"showYAxisValues": "0",
"theme": "fint",
"showValues": "0",
"showTooltip": "0"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"annotations": {
"origw": "600",
"origh": "450",
"autoscale": "1",
"groups": [
{
"id": "ds1tips",
"items": [
{
"id": "indicator-line",
"type": "line",
"dashed": "1"
},
{
"id": "tip1_1",
"type": "rectangle",
"fillcolor": "#6baa01",
"x": "$dataset.0.set.0.x + 5",
"y": "$dataset.0.set.0.y - 30",
"tox": "$dataset.0.set.0.x + 80",
"toy": "$dataset.0.set.0.y - 10",
"visible": "0"
}
]
},
{
"id": "yaxisline",
"items": [
{
"id": "line",
"type": "line",
"color": "#f8bd19",
"x": "$canvasstartx - 5",
"y": "$canvasstarty",
"tox": "$canvasstartx - 5",
"toy": "$canvasendy",
"thickness": "3"
},
{
"id": "none-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 60",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 20",
"toy": "$canvasendy",
"radius": "3"
},
{
"id": "none-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 10",
"color": "#f8bd19"
},
{
"id": "none-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "None",
"x": "$canvasstartx - 37",
"y": "$canvasendy - 12",
"fontsize": "12",
"bold": "1"
},
{
"id": "few-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 55",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 100",
"toy": "$canvasendy - 80",
"radius": "3"
},
{
"id": "few-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 90",
"color": "#f8bd19"
},
{
"id": "few-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "Few",
"x": "$canvasstartx - 35",
"y": "$canvasendy - 92",
"fontsize": "12",
"bold": "1"
},
{
"id": "moderate-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 85",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 180",
"toy": "$canvasendy - 160",
"radius": "3"
},
{
"id": "moderate-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 170",
"color": "#f8bd19"
},
{
"id": "moderate-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "Moderate",
"x": "$canvasstartx - 50",
"y": "$canvasendy - 172",
"fontsize": "12",
"bold": "1"
},
{
"id": "maximum-label-bg",
"type": "rectangle",
"fillcolor": "#f8bd19",
"x": "$canvasstartx - 88",
"tox": "$canvasstartx - 15",
"y": "$canvasendy - 260",
"toy": "$canvasendy - 240",
"radius": "3"
},
{
"id": "maximum-dot",
"type": "circle",
"radius": "5",
"x": "$canvasstartx - 5",
"y": "$canvasendy - 252",
"color": "#f8bd19"
},
{
"id": "maximum-label",
"type": "text",
"fillcolor": "#ffffff",
"text": "High",
"x": "$canvasstartx - 52",
"y": "$canvasendy - 252",
"fontsize": "12",
"bold": "1"
}
]
},
{
"id": "dyn-label-grp",
"items": [
{
"id": "dyn-label-bg",
"type": "rectangle",
"radius": "3"
},
{
"id": "dyn-label",
"type": "text",
"fillcolor": "#ffffff",
"fontsize": "12",
"bold": "1"
},
{
"id": "dyn-detail-label",
"type": "text",
"align": "right",
"x": "$canvasendx",
"bgcolor": "#ffffff"
}
]
}
]
},
"dataset": [
{
"seriesname": "Bakersfield Central",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "25507"
},
{
"value": "9110"
},
{
"value": "15529"
},
{
"value": "20803"
},
{
"value": "19202"
}
]
},
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
},
{
"value": "12400"
},
{
"value": "15800"
},
{
"value": "19800"
},
{
"value": "21800"
}
]
}
]
}Customizing the Y-axis
FusionCharts will load here..
The above chart showcases annotations positioned dynamically, with respect to the y-axis, using macros. The annotations are used to mark three different ranges - low, moderate and high, with three different colors.
The data structure for this chart is given below:
{
"chart": {
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"items": [
{
"id": "high-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.5.startx + 5",
"y": "$yaxis.0.label.5.starty",
"tox": "$yaxis.0.label.3.endx",
"toy": "$yaxis.0.label.3.starty",
"color": "#6baa01",
"alpha": "20"
},
{
"id": "high-label",
"type": "text",
"text": "High",
"x": "$yaxis.0.label.4.startx - 5",
"y": "$yaxis.0.label.4.starty",
"rotateText": "1",
"color": "#6baa01"
},
{
"id": "moderate-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.3.startx + 5",
"y": "$yaxis.0.label.3.starty",
"tox": "$yaxis.0.label.2.endx",
"toy": "$yaxis.0.label.1.starty",
"color": "#f8bd19",
"alpha": "20"
},
{
"id": "moderate-label",
"type": "text",
"text": "Moderate",
"x": "$yaxis.0.label.2.startx - 5",
"y": "$yaxis.0.label.2.starty",
"rotateText": "1",
"color": "#f8bd19"
},
{
"id": "low-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.1.startx - 3",
"y": "$yaxis.0.label.1.starty",
"tox": "$yaxis.0.label.0.endx",
"toy": "$yaxis.0.label.0.endy",
"color": "#e44a00",
"alpha": "20"
},
{
"id": "low-label",
"type": "text",
"text": "Low",
"x": "$yaxis.0.label.1.startx - 12",
"y": "$yaxis.0.label.0.starty - 5",
"rotateText": "1",
"color": "#e44a00"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}
{
"chart": {
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"items": [
{
"id": "high-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.5.startx + 5",
"y": "$yaxis.0.label.5.starty",
"tox": "$yaxis.0.label.3.endx",
"toy": "$yaxis.0.label.3.starty",
"color": "#6baa01",
"alpha": "20"
},
{
"id": "high-label",
"type": "text",
"text": "High",
"x": "$yaxis.0.label.4.startx - 5",
"y": "$yaxis.0.label.4.starty",
"rotateText": "1",
"color": "#6baa01"
},
{
"id": "moderate-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.3.startx + 5",
"y": "$yaxis.0.label.3.starty",
"tox": "$yaxis.0.label.2.endx",
"toy": "$yaxis.0.label.1.starty",
"color": "#f8bd19",
"alpha": "20"
},
{
"id": "moderate-label",
"type": "text",
"text": "Moderate",
"x": "$yaxis.0.label.2.startx - 5",
"y": "$yaxis.0.label.2.starty",
"rotateText": "1",
"color": "#f8bd19"
},
{
"id": "low-labels-zone",
"type": "rectangle",
"x": "$yaxis.0.label.1.startx - 3",
"y": "$yaxis.0.label.1.starty",
"tox": "$yaxis.0.label.0.endx",
"toy": "$yaxis.0.label.0.endy",
"color": "#e44a00",
"alpha": "20"
},
{
"id": "low-label",
"type": "text",
"text": "Low",
"x": "$yaxis.0.label.1.startx - 12",
"y": "$yaxis.0.label.0.starty - 5",
"rotateText": "1",
"color": "#e44a00"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}Adding More Context to the Chart
FusionCharts will load here..
The above gauge shows the customer satisfaction score with some significant data like, the state average and the national average, using annotation shapes and text elements.
The data structure for this chart is given below:
{
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Los Angeles Topanga",
"plotToolText": "Current Score: $value",
"theme": "fint",
"chartBottomMargin": "50",
"showValue": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "4.5",
"code": "#e44a00"
},
{
"minValue": "4.5",
"maxValue": "7.5",
"code": "#f8bd19"
},
{
"minValue": "7.5",
"maxValue": "10",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "8.9"
}
]
},
"trendPoints": {
"point": [
{
"startValue": "6.8",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "9.5",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "6.8",
"endValue": "9.5",
"color": "#0075c2",
"radius": "185",
"innerRadius": "80"
}
]
},
"annotations": {
"origw": "450",
"origh": "300",
"autoscale": "1",
"showBelow": "0",
"groups": [
{
"id": "arcs",
"items": [
{
"id": "national-cs-bg",
"type": "rectangle",
"x": "$chartCenterX+2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX + 130",
"toy": "$chartEndY - 25",
"fillcolor": "#f8bd19"
},
{
"id": "national-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "National Average : 7.2",
"fontSize": "12",
"align": "left",
"x": "$chartCenterX + 7",
"y": "$chartEndY - 35"
},
{
"id": "state-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX - 103",
"toy": "$chartEndY - 25",
"fillcolor": "#6baa01"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "State Average : 8",
"fontSize": "12",
"align": "right",
"x": "$chartCenterX - 7",
"y": "$chartEndY - 35"
},
{
"id": "store-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-130",
"y": "$chartEndY - 22",
"tox": "$chartCenterX + 150",
"toy": "$chartEndY - 2",
"fillcolor": "#0075c2"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "Store's Customer Satisfaction Range: 6.8 to 9.5",
"fontSize": "12",
"align": "center",
"x": "$chartCenterX + 10",
"y": "$chartEndY - 12"
}
]
}
]
}
}
{
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Los Angeles Topanga",
"plotToolText": "Current Score: $value",
"theme": "fint",
"chartBottomMargin": "50",
"showValue": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "4.5",
"code": "#e44a00"
},
{
"minValue": "4.5",
"maxValue": "7.5",
"code": "#f8bd19"
},
{
"minValue": "7.5",
"maxValue": "10",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "8.9"
}
]
},
"trendPoints": {
"point": [
{
"startValue": "6.8",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "9.5",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "6.8",
"endValue": "9.5",
"color": "#0075c2",
"radius": "185",
"innerRadius": "80"
}
]
},
"annotations": {
"origw": "450",
"origh": "300",
"autoscale": "1",
"showBelow": "0",
"groups": [
{
"id": "arcs",
"items": [
{
"id": "national-cs-bg",
"type": "rectangle",
"x": "$chartCenterX+2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX + 130",
"toy": "$chartEndY - 25",
"fillcolor": "#f8bd19"
},
{
"id": "national-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "National Average : 7.2",
"fontSize": "12",
"align": "left",
"x": "$chartCenterX + 7",
"y": "$chartEndY - 35"
},
{
"id": "state-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX - 103",
"toy": "$chartEndY - 25",
"fillcolor": "#6baa01"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "State Average : 8",
"fontSize": "12",
"align": "right",
"x": "$chartCenterX - 7",
"y": "$chartEndY - 35"
},
{
"id": "store-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-130",
"y": "$chartEndY - 22",
"tox": "$chartCenterX + 150",
"toy": "$chartEndY - 2",
"fillcolor": "#0075c2"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "Store's Customer Satisfaction Range: 6.8 to 9.5",
"fontSize": "12",
"align": "center",
"x": "$chartCenterX + 10",
"y": "$chartEndY - 12"
}
]
}
]
}
}Annotation Images for Better visualization
FusionCharts will load here..
In this chart, images of brands are shown instead of the conventional 2D column data plots. Using these annotations makes the chart more intuitive while also increasing its visual appeal. Imagine how easy it becomes for your audience to read data in a chart like this, especially if the data is for a large number of brands.
The data structure for this chart is given below:
{
"chart": {
"caption": "Sales figures for top 4 chocolate brands - FY2013-2014",
"subCaption": "Harry's SuperMart",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333",
"valuePadding": 10
},
"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"
}
]
}
{
"chart": {
"caption": "Sales figures for top 4 chocolate brands - FY2013-2014",
"subCaption": "Harry's SuperMart",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333",
"valuePadding": 10
},
"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"
}
]
}Events Triggering Display of Annotation Items
FusionCharts will load here..
The above chart shows how you can use events on annotation items. Hovering the mouse pointer on the Weekend zone that is represented by a green rectangle on the chart, triggers the events annotationRollOver and annotationRollOut, which show the total footfall on Saturday and Sunday.
The data structure for configuring events on annotation items is as follows:
{
"chart": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"paletteColors": "#008ee4",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"plotBorderAlpha": "10",
"captionpadding": "20",
"showXAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "0",
"showAlternateHGridColor": "0"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"items": [
{
"id": "zone",
"type": "rectangle",
"x": "$xaxis.label.6.x",
"y": "$canvasEndY",
"tox": "$xaxis.label.7.x",
"toy": "$canvasStartY",
"color": "#6baa01",
"alpha": "20"
},
{
"id": "label",
"type": "text",
"text": "Weekend",
"fillcolor": "#666666",
"fontSize": "10",
"bold": "1",
"x": "$xaxis.label.7.x - 25",
"y": "$canvasEndY - 35"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}
{
"chart": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"paletteColors": "#008ee4",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"plotBorderAlpha": "10",
"captionpadding": "20",
"showXAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "0",
"showAlternateHGridColor": "0"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"items": [
{
"id": "zone",
"type": "rectangle",
"x": "$xaxis.label.6.x",
"y": "$canvasEndY",
"tox": "$xaxis.label.7.x",
"toy": "$canvasStartY",
"color": "#6baa01",
"alpha": "20"
},
{
"id": "label",
"type": "text",
"text": "Weekend",
"fillcolor": "#666666",
"fontSize": "10",
"bold": "1",
"x": "$xaxis.label.7.x - 25",
"y": "$canvasEndY - 35"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}Creating a Collaborative Dashboard
Click here to see a collaborative dashboard that is a complex and practical example of how annotations can be used to add more information to a chart.
Notice the callout that renders above the data plot for April. The callout is an annotation. When this callout is clicked, annotationClick event is triggered. This navigates the user to a view that shows the monthly sales analysis for April in the left pane and user comments on this analysis in the right pane. Every time a comment is added, the text annotation (showing the number of comments) alongside the callout is updated.
Annotations, thus, let you add more information to your charts, creatively.