Range Selector in Are Graph of High Chart

Question

I am using the Highchart to draw charts of my data.I have seen the date range selector in this chart but I am using Area Graph but range selector is not coming in this.Following is my code.

jQuery('#weenat_statr_chart').highcharts({

                title: {
                    text: chart_title
                },

                xAxis: {
                    type: 'datetime'
                },

                yAxis: {
                    title: {
                        text: null
                    }
                },

                tooltip: {
                    crosshairs: true,
                    shared: true,
                    valueSuffix: unit_value
                },

                legend: {
                },
,
                rangeSelector: {
                    buttonTheme: { // styles for the buttons
                        fill: 'none',
                        stroke: 'none',
                        'stroke-width': 0,
                        r: 8,
                        style: {
                            color: '#039',
                            fontWeight: 'bold'
                        },
                        states: {
                            hover: {
                            },
                            select: {
                                fill: '#039',
                                style: {
                                    color: 'white'
                                }
                            }
                        }
                    },
                    labelStyle: {
                        color: 'silver',
                        fontWeight: 'bold'
                    },
                    selected: 1
                },              
                series: [{
                    name: unit_name,
                    data: averages,
                    zIndex: 1,
                    marker: {
                        fillColor: 'white',
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[0]
                    }
                }, {
                    name: '<?php echo __("Range","test-plugin"); ?>',
                    data: ranges,
                    type: 'arearange',
                    lineWidth: 0,
                    linkedTo: ':previous',
                    color: Highcharts.getOptions().colors[0],
                    fillOpacity: 0.3,
                    zIndex: 0
                }]
            }); 

js fiddle url

Please help me how to use date range with Area graph. Thanks.

Answer 1

That's because rangeSelector is for HighStock only and not highcharts. So you need to change your script to:

<script src="http://code.highcharts.com/stock/highstock.js"></script>

And add StockChart word to the function creating the chart:

$('#container').highcharts('StockChart', { ... } );

Here's the updated fiddle