1

I try to call a function within a JQuery ajax call, but it keeps showing me "TypeError: c.slice is not a function", I don't quite understand why this happens? I appreciate your help! Thank you in advance!

Here is my AJAX call:

$.ajax({
     url: "my.php",
        method: "get",
        dataType: "json",
        data: requestJSON,
        success: function(jsondata){
         $.getJSON('my.php?callback=?', function (data) {

                // Create the chart
                $('#historicalcharts').highcharts('StockChart', {


                    rangeSelector : {
                        selected : 1
                    },

                    title : {
                        text : 'AAPL Stock Price'
                    },

                    series : [{
                        name : 'AAPL Stock Price',
                        data : data,
                        type : 'area',
                        threshold : null,
                        tooltip : {
                            valueDecimals : 2
                        },
                        fillColor : {
                            linearGradient : {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops : [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        }
                    }]
                });
            }); 
 });

}

I try to mimic the function in this link, the only difference is that it retrieves the JSON data on each call, but I use a JSON data that I get from my php script. http://www.highcharts.com/stock/demo/area

Here is my php code

<?php

if (isset($_GET['request'])) {  
    header("content-type: application/json"); 
    $retrievechartJSON = 'http://dev.markitondemand.com/MODApis/Api/v2/InteractiveChart/json?parameters=' . $_GET['request'];
    $json = file_get_contents($retrievechartJSON);
    echo $_GET['callback']. '('. $json . ')';

?>
Paul
  • 129
  • 2
  • 9
  • Can we see the php script? It is not possible to use the jQuery .getJSON() function on JSON files outside of your own domain. It is however possible to use JSONP. – omarjmh Apr 02 '16 at 23:03
  • I'd double check the parsed JSON, and anything else I'm passing into third party code, to be sure that the structure is what the third party code expects. My first guess is that some code in there expects something to be an array or a string (that's who has the slice() method), but the "something" is neither of those. Or try stepping into the highcharts code in the debugger (F12 in Chrome/IE/FF). Follow into every function until you see a c.slice call. Or grep the highcharts code for "c.slice". – 15ee8f99-57ff-4f92-890c-b56153 Apr 02 '16 at 23:44
  • Here's a JS stack trace: http://stackoverflow.com/a/635852/424129 – 15ee8f99-57ff-4f92-890c-b56153 Apr 02 '16 at 23:46

1 Answers1

4

From HighCharts:

It is not possible to use the jQuery .getJSON() function on JSON files outside of your own domain. It is however possible to use JSONP.

You need to add a callback to your PHP, which wraps the JSON and then you return that JSON object:

Example:

<?php
header("content-type: application/json"); 

$array = array(7,4,2,8,4,1,9,3,2,16,7,12);

echo $_GET['callback']. '('. json_encode($array) . ')';    

?>

With those changes you can use use jQuery's $.getJSON() like so:

var url =  "http://url-to-your-remote-server/jsonp.php?callback=?";

$.getJSON(url,  function(data) {
    var yourJSONP = data;
    // render you chart here
});

Here are the relevant docs for Cross Domain Data:

http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp

omarjmh
  • 13,632
  • 6
  • 34
  • 42