Annotation Demo

author(s): Black Label

by Mike Rawling

HTML

<link rel="stylesheet" href="http://blacklabel.github.io/annotations/css/styles.css">
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://blacklabel.github.io/annotations/js/annotations.js"></script>
<h3>Annotation controls idea</h3>
<div style="margin: 10px 0px 50px 0px;width: 854px; float: left;">
		<div id="container" style="float: left; height: 542px; width: 800px">
		</div>
</div>

CSS

body {
    margin: 8px !important;
}
.chart-title {
    width: 949px !important;
}

JavaScript

$(function () {
    var options = {
        chart: {
            width: 980,
            borderWidth: 5,
            borderColor: '#e8eaeb',
            borderRadius: 0,
            renderTo: 'container',
            backgroundColor: '#f7f7f7',
            marginTop: 50
        },
        xAxis: {   
            min: 0,
            max: 10
        },
        title: {
            style: {
                'fontSize': '1em'
            },
            useHTML: true,
            x: -27,
            y: 8,
            text: '<span class="chart-title"> Drag and drop on a chart to add annotation  </span>'
        },
        annotations: [{
            title: {
                text: '<span style="">ABC Deal started <br/> $3.56</span>',
                style: {
                    color: 'grey'
                }
            },
            anchorX: "left",
            anchorY: "top",
            allowDragX: true,
            allowDragY: true,
            x: 515,
            y: 155
        }, {
            title: 'Oliver note: <br> where we started using Unruly for sales',
            anchorX: "left",
            anchorY: "top",
            allowDragY: true,
            allowDragX: true,
            xValue: 6,
            yValue: 4,
            shape: {
                //type: 'path',
                params: {
                    //d: ['M', 0, 0, 'L', 110, 0],
                    //stroke: '#c55'
                }
            }
        }, {
            title: 'Oliver note:<br> @Gemma <br> what happened here?',
            linkedTo: 'high',
            allowDragY: false,
            allowDragX: false,
            anchorX: "center",
            anchorY: "center",
            shape: {
                //type: 'circle',
                params: {
                    //r: 40,
                    //stroke: '#c55'
                }
            }
        }, {
            x: 100,
            y: 300,
            title: 'Gemma note:<br/> moved the floor price of Deal XYZ',
           ...