Search code examples
javascriptjsonhighchartscoldfusion-11

JSON, Highcharts and Coldfusion json data


I have been trying to make this work for sometime and its I cannot seem to find the solution to make this work.

I am able to output JSON with my coldfusion CFC without issue, not I am trying to use this JSON with Highcharts.js. I have verified that the JSON is valid but highcharts seems to have an issue because in the series data there is double quotes surrounding the data. I've looked everywhere for a solution and I cannot seem to find any help that can set me on the right path. If I remove the double quotes from around the array in the series.data the chart loads in fine but I get away from it being dynamic.

Here is my JSON output from my CFC:`

{
    "series": [{
        "data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),2.9],[Date.UTC(2017,06,04),3.1],[Date.UTC(2017,06,11),2.9]]",
        "name": "ATC Main Pod A - B - C"
    }, {
        "data": "[[Date.UTC(2017,05,21),2.8],[Date.UTC(2017,05,28),2.6],[Date.UTC(2017,06,04),2.9],[Date.UTC(2017,06,11),2.9]]",
        "name": "ATC Mays (ACB Blue)"
    }, {
        "data": "[[Date.UTC(2017,05,21),2.4],[Date.UTC(2017,05,28),2.6],[Date.UTC(2017,06,04),3],[Date.UTC(2017,06,11),3.2]]",
        "name": "ATC Mays (ACB Purple)"
    }, {
        "data": "[[Date.UTC(2017,05,21),3.3],[Date.UTC(2017,05,28),3.3],[Date.UTC(2017,06,04),3.4],[Date.UTC(2017,06,11),3.3]]",
        "name": "ATC R10 Pod D"
    }, {
        "data": "[[Date.UTC(2017,05,21),3.3],[Date.UTC(2017,05,28),3.4],[Date.UTC(2017,06,04),2.8],[Date.UTC(2017,06,11),1.9]]",
        "name": "ATC TU Pod A - B"
    }, {
        "data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),2.9],[Date.UTC(2017,06,04),3.1],[Date.UTC(2017,06,11),3.4]]",
        "name": "CTRC 1st Floor"
    }, {
        "data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),3.3],[Date.UTC(2017,06,04),3.2],[Date.UTC(2017,06,11),2.3]]",
        "name": "CTRC 2nd Floor"
    }]
}

Here is what my ajax call looks like:

function loadChartData(c){
$.ajax({type: "POST", url: "CFCs/survey.cfc", data: {method:"results_RLU", CENTERID: c},dataType: 'json',success: function(data){
    options.series = data.series
        var chart = new Highcharts.Chart(options)
    }
});
}

Solution

  • Not a problem!

    Simply iterate each item in the series and parse the data to valid JSON object.

    Enjoy :)

    function loadChartData(c){
    $.ajax({type: "POST", url: "CFCs/survey.cfc", data: {method:"results_RLU", CENTERID: c},dataType: 'json',success: function(data){
    
        options.series = data.series.map(function(item) 
        {
           item.data = JSON.parse(item.data);
    
           return item;
        });
    
        var chart = new Highcharts.Chart(options)
        }
    });
    }