Java Script Custom High Chart method

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!

marspzb · Accepted Answer · 2012-04-01 19:14:13Z

3

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.

answered Apr 1, 2012 at 19:14

marspzb

3641 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Phil Ninan Over a year ago

for some reason when i copy code into project it doesnt work. everything breaks with the last line: newChart.addPoint(); if the chart comes back. any ideas? thanks

marspzb Over a year ago

can you debug it with chrome.Have you included jQuery?

Phil Ninan Over a year ago

there was actually some illegal characters that got copied, i deleted. but still not working. i get the following error: newChart.addPoint is not a function. and it points to that last line. and yes i included jquery

Phil Ninan Over a year ago

never mind i had a simple syntax error. but btw have you ever experienced weird characters getting copied from JSfiddle? at the end of the code? just wondering thanks again for the advise!

Phil Ninan Over a year ago

i accidently took out the this. from addPoint when i was trying to debug. that illegal character was a real bug! i appreciate the effort!

|

Collectives™ on Stack Overflow

Java Script Custom High Chart method

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related