Question

i added a method inside my high chart function but im having trouble calling it.

i think i might have the wrong syntax or may have placed the method in the wrong spot(relatively new to JS). the method is at the bottom of my code,i commented, and is called addPoint.its simply supposed to add a new point to the graph.

i tried troubleshooting with putting an alert in the method but that has yet to work.

heres a jfiddle:
http://jsfiddle.net/fourgates/WdMrm/

here is my code:

NewHighCharts = function() 
    {                       
        chart = new Highcharts.Chart(
        {
            chart : 
            {
                renderTo : 'container',
                type : 'line',
                marginRight : 130,
                marginBottom : 25,
                 events: 
                 {
                    click: function(e) 
                    {
                        // find the clicked values and the series
                        var x = e.xAxis[0].value,
                            y = e.yAxis[0].value,
                            series = this.series[0];
                        // Add it
                        series.addPoint([x, y]);
                    }
                 }
            },

            title : 
            {
                text : 'Body Weight',
                x : -20 //center
            },
            xAxis : 
            {
                categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            yAxis : 
            {
                title : 
                {
                    text : 'Weight (lbs)'
                },
                plotLines : [{
                    value : 0,
                    width : 1,
                    color : '#808080'
            }]
            },
            tooltip : 
            {
                formatter : function() 
                {
                    return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'lbs';
                }
            },
            legend : 
            {
                layout : 'vertical',
                align : 'right',
                verticalAlign : 'top',
                x : -10,
                y : 100,
                borderWidth : 0
            },
            series : [{
                name : 'George',
                data : [185,190,185,180]
            }, {
                name : 'Bindu',
                data : [115,110,112,115]
            }]
        });//end of chart
            //this is the method i added
        addPoint = function()
        {
            alert("You Added a point!")
            series = this.series[0];
            series.addPoint([4, 190]);
        };  
    };//end of newHighCharts
    newChart = new NewHighCharts();
    newChart.addPoint();

Thanks in advance for any help!

Answer 1

Here is a fiddle copy of yours with those problems fixed.
The problems where:

• The resource load order if you see left on the resource options you’ll see that the exporting.js was loading before the highcharts (simpliy remove it and re add it into the resources and the error of HighCharts is not defined will be solved).
• Use jQuery instead of Mootools on the panel left where it says framework you can choose it. If you want to use it with mootols you need an adapter.
• Use this.= on the constructor. If you don’t use this the function/obj will be a global variable instead of a part of the namespace.So replacing the chart= and addPoint= for this.char and this.addPoint.
• In the add point you should do also a this where you refer to the series. instead of series you should do a this.chart.series.