Receive data via AJAX with jQuery Flot

Question

I have a problem with jQuery flot.

PHP output (not JSON):

[[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]]

jQuery call:

$.ajax({
    url: 'xxx.php',
    success: function (data) {
        var dataArray = data.split('~~'),
        dataArray1 = dataArray[0],
        dataArray2 = dataArray[1],
        plot = $.plot($('#xxx'), [{
            data: dataArray1,
            color: colours[0]
        },
        {
            data: dataArray2,
            color: colours[1],
            points: {
                show: true,
            }
        },
        ], {
            series: {
                bars: {
                    show: true,
                    barWidth: .6,
                    align: 'center'
                }
            },
            grid: {
                show: true,
                hoverable: true,
                clickable: true,
                autoHighlight: true,
                borderWidth: true,
                borderColor: 'rgba(255, 255, 255, 0)'
            },
            xaxis: {
                show: false
            }
        });
    }
});

Taking the data in this way, I'm trying to use jQuery Flot but does not work...

Whereas, I can by separating data:

First label:

[[1, 153], [2, 513], [3, 644]]

Second label:

[[1, 1553], [2, 1903], [3, 2680]]

Answer 1

You have recieved a string that was not qualified as JSON data. Then you've splitted it on two strings, that are still not JSON. Then you trying to instantiate plot object with data: your_string_value. Here plot waiting of an object, not string. Try to define data of your plot this way: data:$.parseJSON( dataArray1 )