<html>
<head>
<title>Adding annotations on client-side</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
<!-- chart size settings -->
<style type="text/css">
#chartContainer {
width: 800px;
height: 550px;
float: left;
}
input {
width: 100%;
}
</style>
<script type="text/javascript" language="javascript">
// Creating new chart object.
var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
// Setting XML config file.
chart.setXMLFile("config.xml");
// Writing the flash object into the page DOM.
chart.write("chartContainer");
// Enabling disabled buttons when chart has rendered
chart.onChartDraw = function () {
document.getElementById("LineAnnotationDefault").removeAttribute("disabled");
document.getElementById("LineAnnotationWithJSON").removeAttribute("disabled");
document.getElementById("LineAnnotationWithXML").removeAttribute("disabled");
document.getElementById("CustomLabelAnnotation").removeAttribute("disabled");
document.getElementById("CustomStaticLabelAnnotation").removeAttribute("disabled");
}
// Enable StopDrawingAnnotation button when any annotation drawing has started
chart.onAnnotationDrawingStart = function(id) {
document.getElementById("StopDrawingAnnotation").removeAttribute("disabled");
}
// Disable StopDrawingAnnotation button when annotation drawing successfully finished
chart.onAnnotationDrawingFinish = function (id) {
document.getElementById("StopDrawingAnnotation").setAttribute("disabled", "disabled");
}
// Function to start drawing a line annotation with default settings
function startDrawingLine() {
chart.startDrawingAnnotation("Line");
}
// Function to start drawing a line annotation with custom appearance settings set in JSON
function startDrawingLineCustomJSON() {
// passing annotation settings object to the component both with an annotation type name
chart.startDrawingAnnotation("Line",
{
lineAnnotation: {
color: "Green",
settings: {
line: {
thickness: 3,
dashed: true,
dashLength: 7,
dashSpace: 5,
opacity: 0.5
}
}
}
}
);
}
// Function to start drawing a line annotation with custom appearance settings set in XML notation
function startDrawingLineCustomXML() {
// passing annotation settings XML string to the component both with an annotation type name
chart.startDrawingAnnotation("Line", "<annotation><line_annotation color='Blue'><settings><line thickness='3' dashed='true' dash_length='7' dash_space='5' opacity='0.5'/></settings></line_annotation></annotation>");
}
// Function to start drawing a label with custom appearance settings
function startDrawingLabelCustomJSON() {
// passing annotation settings object to the component both with an annotation type name
chart.startDrawingAnnotation("Label",
{
labelAnnotation: {
color: "#990000",
anchor: "Center",
xPadding: 0,
yPadding: 0,
settings: {
font: {
family: "Tahoma",
size: 14,
bold: true,
italic: false,
align: "Center"
},
background: {
fill: {
type: "Solid",
color: "#FFFFFF",
opacity: 1
},
border: {
thickness:2,
color: "#772222",
opacity: 1
},
corners: {
type: "Square"
}
}
}
}
}
);
}
// Function to start drawing a label with custom appearance settings
function startDrawingLabelCustomJSONStatic() {
// passing annotation settings object to the component both with an annotation type name
chart.startDrawingAnnotation("Label",
{
labelAnnotation: {
color: "#009900",
anchor: "Center",
xPadding: 0,
yPadding: 0,
allowTextEdit: false,
settings: {
font: {
family: "Tahoma",
size: 14,
bold: true,
italic: false,
align: "Center"
},
background: {
fill: {
type: "Solid",
color: "#FFFFFF",
opacity: 1
},
border: {
thickness: 2,
color: "#227722",
opacity: 1
},
corners: {
type: "Square"
}
},
format: "A label with customized format and appearance",
states: {
hover: {
format: "I am the label with customized format and appearance and I am hovered!"
},
edit: {
format: "My size is being edited"
},
selected: {
format: "I am the label with customized format and appearance and I am selected!"
}
}
}
}
}
);
}
// Aborts annotation drawing process if any
function stopDrawingAnnotation() {
chart.stopDrawingAnnotation();
document.getElementById("StopDrawingAnnotation").setAttribute("disabled", "disabled");
}
</script>
<!-- table settings -->
<style type="text/css">
table.settings {
border-style: solid;
border-width: 1px;
border-color: #D0CDC9;
}
table.settings tr th {
font:normal 60% Verdana;
background-color: #DCD9D5;
font-weight:bold;
padding-bottom:5px;
padding-top:5px;
padding-left:10px;
text-align:left;
}
table.settings tr td {
background-color: #F8F4F0;
font:normal 70% Verdana;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
text-align:left;
}
</style>
</head>
<body>
<div id="chartContainer"><!-- Chart Container --></div>
<table class="settings">
<tr>
<th>Annotations</th>
</tr>
<tr>
<td><input id="LineAnnotationDefault" type="button" value="Line with default settings" onclick="startDrawingLine();" autocomplete="off" disabled="disabled"/></td>
</tr>
<tr>
<td><input id="LineAnnotationWithJSON" type="button" value="Line with custom JSON settings" onclick="startDrawingLineCustomJSON();" autocomplete="off" disabled="disabled"/></td>
</tr>
<tr>
<td><input id="LineAnnotationWithXML" type="button" value="Line with custom XML settings" onclick="startDrawingLineCustomXML();" autocomplete="off" disabled="disabled"/></td>
</tr>
<tr>
<td><input id="CustomLabelAnnotation" type="button" value="Label with custom JSON settings" onclick="startDrawingLabelCustomJSON();" autocomplete="off" disabled="disabled"/></td>
</tr>
<tr>
<td><input id="CustomStaticLabelAnnotation" type="button" value="Another label with custom JSON settings" onclick="startDrawingLabelCustomJSONStatic();" autocomplete="off" disabled="disabled"/></td>
</tr>
<tr>
<td><input id="StopDrawingAnnotation" type="button" value="Abort annotation drawing" onclick="stopDrawingAnnotation();" autocomplete="off" disabled="disabled"/></td>
</tr>
</table>
</body>
</html>
Sample Description
How to use this sample?
This sample shows how to let a user draw an annotation on a chart.
To start drawing annotations use buttons to the right of the chart. To abort drawing an annotation use "Abort annotation drawing" button.
How it works
This sample is based on annotations engine implemented in AnyChart Stock and described in Drawing Tools and Annotations article in documentation.
When you press one of five enabled buttons, JavaScript method startDrawingAnnotation method is called. It is executed with different parameters depending on pressed button. You can draw annotations with default or custom settings, settings can be set in JSON or XML format.
When button is clicked and engine enters drawing mode onAnnotationDrawingStart event is dispatched, when all required clicks (for example start and end point of Line) are done onAnnotationDrawingFinish event is dispatched. To leave drawing mode without drawing you can use "Abort annotation drawing" button, which invokes special stopDrawingAnnotation().
Note: you can use Delete key when annotation is selected to delete it.
AnyChartStock JavaScript API
This sample uses the following methods, properties and events from AnyChartStock JavaScript API:
Prerequisites
This section lists all configuration, data and auxiliary files required for this sample.
Configuration file
CSV files
SWF files
- AnyChartStock.swf - AnyChart Stock component.
- Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.
JavaScript Libraries
- AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.