1

I am passing a JSON array with multiple Highcharts arguments to the client. In a few cases, I use an array_merge to insert after the allocation code a few extra things. This works fine as long as the argument being passed will be displayed in quotes, such as:

$data_['xAxis'] = array_merge($data_['xAxis'], array("type" => "category"));

Then, on the client side, this will translate into:

type: "category"

But there are occasions, where I want to pass a function, which should be displayed like this one:

chart: {
    events: {
        load: function () {
            var label = ....
        }
    }
},    

When I use this here, it's being displayed as a text:

$data_['chart'] = array_merge($data_['chart'], array("events" => "{load: function(event) {var label = ... }}");

chart: {
    events: "{
        load: function () {
            var label = ....
        }
    }"
},    

EDIT: The Javascript on the client side looks like this:

$(document).ready(function() {
    var options = {};               

    var url =  "http://geodev.grid.unep.ch/mod_test/jsonp_response.php?callback=?";

    $.getJSON(url, {selectedCountries: selectedCountries , selectedID: selectedID, selectedYears: selectedYears, per_capita: per_capita, graphBorder: graphBorder, graphSource: graphSource, graphStyle: graphStyle, graphXAxis: graphXAxis, type: "jsonp"})
    .done(function(data)
    {
        //console.log(data);

        options.chart       = data["chart"];
        options.tooltip     = data["tooltip"];
        options.series      = data["series"];
        options.title       = data["title"];
        options.subtitle    = data["subtitle"];
        options.yAxis       = data["yAxis"];
        options.xAxis       = data["xAxis"];
        options.legend      = data["legend"];
        options.exporting   = data["exporting"];
        options.plotOptions = data["plotOptions"];
        options.credits     = data["credits"];

        var chart = new Highcharts.Chart(options);
    })

So, what can I do to pass it over in order that it is not displayed as text? Can anyone give me a hint how to do it the right way? Thanks a lot!

code-jaff
  • 9,230
  • 4
  • 35
  • 56
luftikus143
  • 1,285
  • 3
  • 27
  • 52
  • you can't do that, you need to handle those in javascript however (may be in *ajax success handler*). Could you please show us the JavaScript code? – code-jaff Feb 24 '15 at 12:51
  • @code-jaff: Thanks for that. Hmmm.... I've updated the text above so that the javascript part is visible too. – luftikus143 Feb 25 '15 at 08:39

1 Answers1

1

couple of ways

  1. implement event handlers in the javascript itself, like

    options.credits     = data["credits"];
    
    options.chart.events = {};
    options.chart.events.load = function(event){
        // implementations go here
    }
    
  2. Not recommending though, using eval

    options.credits     = data["credits"];
    
    options.chart.events = eval(data.chart.events);
    

Hope this helps

Community
  • 1
  • 1
code-jaff
  • 9,230
  • 4
  • 35
  • 56
  • Thanks. But it says: "TypeError: options.chart.events is undefined". My test code is this `options.chart.events.load = function(event){var label = this['renderer']['label']('abc').css({'width': '150px','color' : 'grey','fontSize':'20px'}).attr({'stroke': 'grey','stroke-width': 0,'r': 5,'padding': 3 }).add();label.align(Highcharts.extend(['label']['getBBox()'], {'align': 'right','x': -110, 'verticalAlign': 'bottom','y': -130 }), null, 'spacingBox');};` – luftikus143 Feb 25 '15 at 11:00