Creating Path Annotations
Prerequisites
The path annotation lets you draw free-form graphic elements on your charts.
Take a look at the spline chart shown below:
The rectangle drawn to highlight the lowest footfall is created using the path annotation.
The JSON structure for creating path annotations is given below:
{
"chart": {
…
},
"annotations": {
"groups": [{
"items": [{
"type": “path”,
//Define the attributes needed to create the path annotation
…
}]
}]
}
…
}The attributes used to create path annotations are:
| Attribute | Description |
|---|---|
|
Specifies a unique identification string for the path annotation. |
|
Specifies the type of annotation to be drawn. To draw a path, set this attribute to |
|
Specifies the path command and accepts standard SVG path format. For example, the path command “M 10, 10, L 100, 100” signifies that we start drawing from the coordinate at (10,10) pixel using M ( Move to) command and draw a line up to the coordinate (100,100) pixel as specified by the L (Line to) command. |
|
Specifies the x coordinate of the starting position of the path with respect to the leftmost position (taken as 0) of the chart. |
|
Specifies the y coordinate of the starting position of the path with respect to the topmost position (taken as 0) of the chart. |
|
Specifies the hex color code for the annotation. For example, setting this attribute to |
|
Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default). |
The complete data structure for the chart with path annotations is given below:
{
"chart": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"paletteColors": "#008ee4",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"showValues": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"LabelPadding": "50",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showAlternateHGridColor": "0"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"showBelow": "0",
"items": [
{
"id": "label",
"type": "text",
"text": "Lowest footfall 9.11K",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasEndX - 135",
"y": "$dataset.0.set.3.y + 15"
},
{
"id": "Line path1",
"type": "path",
"path": "M -10, -10, L -10, 10, L 10, 10, L 10, -10, L -10, -10",
"x": "$dataset.0.set.3.x",
"y": "$dataset.0.set.3.y"
}
]
}
]
},
"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"
}
]
}