extending highcharts with an ajax load event

Question

I have a php, jquery, jqueryMobile, highcharts page with several charts on one page.

No i added an ajax call to load event to get live data into the charts. but i have to declare this in every Highcharts object, no matter which way i try it's not working as global function.

Here parts of the code i have and which is working

            $(document).ready(function () {

            // define sensorName
            var sensorName = "rflinkstation";

            chart1 = new Highcharts.chart({
                "chart": {
                    "renderTo": sensorName,
                    "events": {
                        "load": function() {
                            var series = this.series[0];
                            setInterval(function() {
                                $.ajax({
                                    url: 'sensorAjaxData.php',
                                    success: function(point) {    
                                        console.log("ajax request for = " + sensorName);                            

                                        // add the point
                                        series.addPoint(point, true, true);
                                    },
                                    cache: false,
                                    data: { "sensorName": sensorName,
                                        "stationID": <?php echo $stationID;?>,
                                    }
                                });
                            }, 60000);
                        }   
                    }
                },          
                "series": [{

...

        $(document).ready(function () {

            // define sensorName
            var sensorName = "batteryvolt1";

            chart2 = new Highcharts.chart({             
                "chart": {
                    "renderTo": sensorName,
                    "events": {
                        "load": function() {
                            var series = this.series[0];
                            setInterval(function() {
                                $.ajax({
                                    url: 'sensorAjaxData.php',
                                    success: function(point) {    
                                        console.log("ajax request for = " + sensorName);                            

                                        // add the point
                                        series.addPoint(point, true, true);
                                    },
                                    cache: false,
                                    data: { "sensorName": sensorName,
                                        "stationID": <?php echo $stationID;?>,
                                    }
                                });
                            }, 60000);
                        }   
                    }
                },
                "series": [{

....

What i try to achieve is to put the "load" function into a function to prevent copy pasting allot of code.

but if i declare something like

function getData(sensorName) {

and

events: { load: setInterval(getData(sensorName),6000) }

i loose the object and get this.series is undefined My programming knoledge comes from pre object orinted programming and i do not fully understand the explanations in how to extend highcharts. Also the Highcharts live data example is written so that chart is a global variable and works only with one chart on a page.

so my question is how can i extend Highcharts with a load event that takes "sensorName" as argument and does an ajax call and insertrs the returned data into the right chart?

And a side question why is something like:

var series = this.series[0];
$.ajax({
  ...
  series.addPoint(point)
  ...

working, and this not

$.ajax({
  ...
  this.series[0].addPoint(point)
  ...

Answer 1

The this (Window object) inside of setInterval() function is not the same this (Chart object) as in chart.events.load() function. You can for example set the second parameter in getData() function which will indicate chart. Now getData() looks like this:

function getData(sensorName, chart) {
  var series = chart.series[0];

  $.ajax({
    url: 'http://www.json-generator.com/api/json/get/bTNHrHVJmG?indent=2',
    success: function(point) {
      console.log('AJAX request for = ' + sensorName);

      // add the point
      series.addPoint(point, true, true);
    },
    data: {
      sensorName: sensorName,
      stationID: sensorName + 'ID' //<?php echo $stationID;?>,
    },
    cache: false
  });
};

and it call in load event looks like this:

load: function() {
  var chart = this;

  setInterval(function() {
    getData(chart.options.chart.renderTo, chart);
  }, 5000);
}

Take a look at the example I prepared for you.

Example:
http://jsfiddle.net/a40qvy47/