Annotations ideas

author(s): Black Label/Mike R

by Mike Rawling

HTML

<link rel="stylesheet" href="http://blacklabel.github.io/annotations/css/styles.css">
<script src="http://github.highcharts.com/highcharts.src.js"></script>
<script src="http://blacklabel.github.io/annotations/js/annotations.js"></script>
<h3>Add annotation</h3>
<div style="width: 1054px; float: left;">
    <div class="form">
        <div class="form-header">Add an annotation</div>
        <p>
            <label>Shape:</label>
            <br> 
            <input type="radio" name="type" value="circle" id="circle" checked/> <label for="circle" class="short"> circle </label> 
            <br>
            <input type="radio" name="type" value="rect" id="square" />	<label class="short" for="square"> square </label> 
            <br>
            <input type="radio" name="type" value="path"  id="line"/> <label class="short" for="line"> line </label> 
            <br>
            <input type="radio" name="type" value="text" id="text"/> <label class="short" for="text"> text </label> 
        </p>
        <p>
            <label for="fill">Fill color:</label>
            <input type="text" id="fill" value="#AB3445" />
        </p>
        <p>
            <label for="stroke">Stroke color:</label>
            <input type="text" id="stroke" value="red" />
        </p>
        <p>
            <label for="strokeWidth">Stroke width:</label>
            <input type="range" id="strokeWidth" step="1" min="0" max="15" />
        </p>
        <p>
            <label for="title">Title:</label>
            <input id="title" type="text" value="Annotation title <br> with line break" />
        </p>
    </div>
    <div id="container" style="float: left; height: 342px; width: 800px"></div>
</div>

CSS

body {
    margin: 8px !important;
}
.form .short {
    width: 60px;
    float: right;
    margin: 0px;
}

JavaScript

$(function () {
    var options = {
        chart: {
            borderWidth: 5,
            borderColor: '#e8eaeb',
            borderRadius: 0,
            renderTo: 'container',
            backgroundColor: '#f7f7f7',
            //zoomType: 'x',
            events: {
                load: chartLoad
            }
        },
        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>'
        },
        annotationsOptions: {
            enabledButtons: false   
        },
        annotations: [{
            title: {
                text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
                style: {
                    color: 'red'
                }
            },
            anchorX: "left",
            anchorY: "top",
            allowDragX: true,
            allowDragY: true,
            x: 515,
            y: 55
        }, {
            title: 'drag me <br> horizontaly',
            anchorX: "left",
            anchorY: "top",
            allowDragY: false,
            allowDragX: true,
            xValue: 3,
            yValue: 10,
            shape: {
                type: 'path',
                params: {
                    d: ['M', 0, 0, 'L', 110, 0],
                    stroke: '#c55'
                }
            }
        }, {
            title: 'on point <br> drag&drop <br> disabled',
            linkedTo: 'high',
            anchorX: "middle",
            anchorY: "middle",
            allowDragY: false,
            allowDragX: false,
            shape: {
                type: 'circle',
                params: {
                    r: 40,
                    stroke: '#c55'
                }
            }
        }, {
            x: 100,
            y: 200,
            title: 'drag me <br> verticaly',
            anchorX: "left",
      ...