How to use column range chart with range and navigator in Highcharts?

I have a requirement to plot run history of a task in Highcharts which should show tasks run as a horizontal bar. Recently I found out that inverted option is not supported in StockChart andnavigator & rangeSelector is only available in StockChart.

So in order to achive the requirement I created something similar to this jsfiddle example (found somewhere while browsing don’t remember the source) and ended up with this plunker link with help from my previous question, thanks to Pawel Fus

Updating question to avoid confusion

Intent of chart

Show only those tasks which ran in a particular date time range. In case there are too many runs say more than 10, then there should be a way to display only 10 tasks and yaxis should be scrollable to show other tasks. plunker link to the problem

Problem explanation of above plunker.

If you check the screenshot below from above plunker, the time range is from 12/12/2014 09:32:26to 12/12/2014 10:32:26 and there are only 2 tasks that has run m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB & m_ZIG2_HCP_MERGE_IB_CN. However I can see another task in between LILLY_C which did not even ran in this date time range. (In actual data there are more than 10 tasks that clutters this chart which does not even fall under this date time range)

Also if you notice at the bottom most right corner time shifted from 09:38 to 19:20. 19:20 is the end time for m_ZIG2_HCP_MERGE_IB_CN task. Below is my chart options

    var chart_options = {
            chart: {
                renderTo: 'container',
                height: 600
            },
            title: {
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                gridLineWidth: 1,
                tickInterval: 1 * 3600 * 1000,
                dateTimeLabelFormats: {
                    month: '%b %e, %Y'
                }
            },
            yAxis: {                    
                tickInterval: 1,
                gridLineWidth: 1,
                labels: {
                    formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Task'
                }
            },
            rangeSelector: {
                selected: 0,
                buttons: [ {

src : http://stackoverflow.com/questions/28088958/how-to-use-column-range-chart-with-range-and-navigator-in-highcharts

#angularjs, #column-range-chart, #highcharts, #highstock, #javascript, #navigator-in-highcharts