Highcharts Demo

author(s): Øystein Moseng

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>

<div id="container" style="min-width: 300px;height: 500px;"></div>
<div id="dragstatus"></div>

JavaScript

var setDragStatus = function (status) {
    document.getElementById('dragstatus').innerHTML = status;
};

Highcharts.chart('container', {
    chart: {
        animation: false,
        type: 'xrange'
    },

    title: {
        text: 'Highcharts draggable xrange demo'
    },

    tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.yCategory}</span><br/>',
        pointFormat: '{point.name}'
    },

    plotOptions: {
        series: {
            minPointLength: 5, // Always show points, even when resized down
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
            dragDrop: {
                draggableX: true,
                draggableY: true
                 
            }
        }
    },

    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 15),
        max: Date.UTC(2015, 0, 10)
    },

    yAxis: {
        title: '',
        min: 0,
        max: 2,
        categories: ['Prototyping', 'Development', 'Testing']
    },

    series: [{
        name: 'Project 1',
        cursor: 'move',
        data: [{
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 4),
            y: 0,
            name: 'Task 1'
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1,
            name: 'Task 2'
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1,
            name: 'No drag Y',
            // Disable draggable Y for this point
            dragDrop: {
                draggableY: false
            }
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2,
            groupId: 'Group A',
            dragDrop: {
                draggableX1: false,
                draggableX2: false
            }
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
           ...