"TypeError: firstAxis.options.plotBands is undefined" while using highchart

Question

I am creating a bar chart as well as a gauge chart using highchart.js. and I need to refresh the data after certain time interval. My graphs are coming as required when I hit the URl but when I refresh it using

 setInterval(function(){ 
        //code goes here that will be run every 5 seconds.     
        getDailyProduction();
        getEnergyProduction();
       // getOperationCapacity();
    }, 5000);

after few seconds I am getting "TypeError: firstAxis.options.plotBands is undefined" error.

Below is the code I have written for bar graph:

createBarGraph = function (data, name, title){
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'energyProductionGraph',
                    type: 'column'
                },
                title: {
                    text: 'Energy Production (WEEK)'
                },
                xAxis: {
                    title: {
                        text: 'X Axis Variables'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Y Axis Variables'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                        this.x +': '+ this.y +' mm';
                    }
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Energy Production',
                    color: '#81BEF7',
                    data: data

                }]
            });
        });

    });
}

Below is the code for my gauge graph

createGaugeGraph = function (data, name, title){
    $(function () {
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'operatingCapacityGraph',
                    type: 'gauge',
                    alignTicks: false,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: 'Operating Capacity %'
                },

                pane: {
                    startAngle: -90,
                    endAngle: 90,

                    background: [{
                        backgroundColor: {
                            linearGradient: {
                                x1: 0, 
                                y1: 0, 
                                x2: 0, 
                                y2: 1
                            },
                            stops: [
                            [0, '#FFF'],
                            [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: {
                                x1: 0, 
                                y1: 0, 
                                x2: 0, 
                                y2: 1
                            },
                            stops: [
                            [0, '#333'],
                            [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        backgroundColor: {
                            linearGradient: {
                                x1: 0, 
                                y1: 0, 
                                x2: 0, 
                                y2: 1
                            },
                            stops: [
                            [0, '#666'],
                            [1, '#0c0c0c']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 1,
                        outerRadius: '105%',
                        innerRadius: '104%'
                    }]
                },            
                plotOptions: {
                    gauge: {
                        dial: {
                            baseWidth: 4,
                            backgroundColor: '#C33',
                            borderColor: '#900',
                            borderWidth: 1,
                            rearLength: 20,
                            baseLength: 10,
                            radius: 80
                        }                
                    }
                },

                yAxis: [{
                    min: 0,
                    max: 100,
                    lineColor: '#fff',
                    tickColor: '#fff',
                    minorTickColor: '#fff',
                    minorTickPosition: 'inside',
                    tickLength: 10,
                    tickWidth: 4,
                    minorTickLength: 5,
                    offset: -2,
                    lineWidth: 2,
                    labels: {
                        distance: -25,
                        rotation: 0,
                        style: {
                            color: '#fff',
                            size: '120%',
                            fontWeight: 'bold'
                        }
                    },
                    endOnTick: false,
                    plotBands: [{
                        from: 0,
                        to: 100,
                        innerRadius: '40%',
                        outerRadius: '65%',
                        color: {
                            linearGradient: {
                                x1: 0, 
                                y1: 0, 
                                x2: 0, 
                                y2: 1
                            },
                            stops: [
                            [0, '#fff'],
                            [1, '#fff']
                            ]
                            } // white
                    }, 
                    {
                        from: 0,
                        to: 50,
                        innerRadius: '45%',
                        outerRadius: '60%',
                        color: '#000' // black
                    }]
                }],

                series: [{
                    name: 'Value',
                    data: [50],
                    dataLabels: {
                        formatter: function () {
                            var kmh = this.y;
                            return '<span style="color:#339">'+ kmh + '%</span>';
                        },
                        backgroundColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                            [0, '#DDD'],
                            [1, '#FFF']
                            ]
                        },
                        offset: 10
                    },
                    tooltip: {
                        valueSuffix:' %'
                    }
                }]

            }

        );
        });
    });
}

Below is the file where I am calling these graph functions

$(document).ready(function() {

    getDailyProduction();
    getEnergyProduction();
  getOperationCapacity();

    // Put all your code here
    function getDailyProduction(){

        // setting vaiables for Daily prodution graph
        var data= [1,2,3,4,5,6,7,8,9,2,3,4,3,2,3,4,5,12,54,34];
        var title ='Daily Production (KW)';
        var name='Daily Production';
        createAreaGraph(data, name, title);
    }
    function getEnergyProduction(){
        // setting variables for Energy production
        var last7daysProduced = [1,2,3,4,5,6,7];
        var title1 ='Energy Production (KW)';
        var name1='Energy Production';
        createBarGraph(last7daysProduced, name1, title1);
    }
    function getOperationCapacity(){
        // setting variables for Operating Capacity
        var operatingCapacity = 62;
        var title2 ='Operating Capacity %';
        var name2='Operating Capacity';
        createGaugeGraph(operatingCapacity, name2, title2);
    }



    setInterval(function(){ 
        //code goes here that will be run every 5 seconds.     
        getDailyProduction();
        getEnergyProduction();
        getOperationCapacity();
    }, 5000);

and also I am including the required libraries in the following sequence

    <script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>public/js/highcharts.js"></script>
     <script type="text/javascript" src="<?php echo base_url(); ?>public/js/highcharts-more.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>public/js/exporting.js"></script>

Please help me to get the solution. also let me know if any thing else is required

Answer 1

Gauge charts by Highcharts are still in the beta phase. There is no official documentation available yet.

Here is the beta example in HighChart website.

http://www.highcharts.com/component/content/article/2-news/46-gauges-ranges-and-polar-charts-in-beta#gauges

TypeError: firstAxis.options.plotBands is undefined

Its a reported bug,

https://github.com/highslide-software/highcharts.com/issues/1155

and already fixed. So,for that you have to grab latest

highcharts-more.js from unstable branch.

There is a also very good conversion on Highcharts Official forum: http://highslide.com/forum/viewtopic.php?f=9&t=19618