在JavaScript数据中传递JSON值

Question

i have one external JavaScript file which returns PHP response as JSON and i tried and check and its output is as desired i want to pass this data to datapoints of canvasjs

here is my json output checked and tested returning as desired by JavaScript

{ x: 1, y: 59 },{ x: 2, y: 93 },{ x: 3, y: 477 },{ x: 4, y: 506 }

being stored in sthtml variable. here is that part of code

var html = '';
var sthtml = '';
var ndhtml = '', downlo;
for (var i = 0; i < data.length; i++) {
    z = i + 1;
    downlo = data[i];
    html += '<tr id="' + i + '"><td>' + z + '</td></tr>';
    sthtml += '' + downlo.stchart + '';
    ndhtml += '' + downlo.ndchart + '';
}
$('#down-btn').html(html);

now i am passing this sthtml and ndhtml variable value to in page javascript with this ndhtml and sthtml. i tried ''+sthtml+'' and all other probable values but data is not returning and my graph is blank

<script type="text/javascript">
window.onload = function() {
    var sthtml = [];
    var ndhtml = [];
    var chart = new CanvasJS.Chart("chartContainer", {
        axisY: {},

        data: [{
            dataPoints: [sthtml]
        }, {
            dataPoints: [ndhtml]
        }],

        legend: {
            cursor: "pointer",
            itemclick: function(e) {
                chart.render();
            }
        }
    });
    chart.render();
}
</script>

i think when i load the page that time its empty and later these values are populated when users submit form so we need to update these again through some push

any help will be useful how can i pass sthtml and ndhtml values in above JavaScript datapoints

Answer 1

Use this

<script type="text/javascript">
window.onload = function() {
    var sthtml = '';
    var ndhtml = '';
    var chart = new CanvasJS.Chart("chartContainer", {
        axisY: {},

        data: [{
            dataPoints: [sthtml]
        }, {
            dataPoints: [ndhtml]
        }],

        legend: {
            cursor: "pointer",
            itemclick: function(e) {
                chart.render();
            }
        }
    });
    chart.render();
}
</script>

Inside onload function you are setting your variable as array but if you read the documentation on it requires a Joson data

data: [
        {
            type: "column", //change type to bar, line, area, pie, etc
            dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
            ]
        }
        ]

Inside the data object you need an dataPoints object, Inside the dataPoints object your json data should go. Try this I hope it will work.