Creating Array in JS

[atikah8890]

Hi. I'm using JS for d3. What I intend to do is get some data from database and plot them in a diagram I've created. Here's what I've done so far:

Fetched the data from database:

    <?php 
        while($row = mysql_fetch_assoc($query)){
        $q_id[] = $row['q_id'];
        $res_val[] = $row['response_value'];
        $chpt[] = $row['cr_chpt'];
        $lvl[] = $row['ql_level'];
        }   
    ?>

Sent it to JS:

        var id = <?php echo json_encode($q_id); ?>;
        var val = <?php echo json_encode($res_val); ?>;
        var chpt = <?php echo json_encode($chpt); ?>;
        var lvl = <?php echo json_encode($lvl); ?>;

I'm having trouble creating an array for the data though. For static data I've made it something like this:

        var dataLevel = [
        [280, "ANALYZE", 260, 560],
        [230, "APPLY", 260, 510],
        [180, "UNDERSTAND", 260, 460],
        [130, "REMEMBER", 260, 410]
                        ];

I'll use the array I want to create to plot.

Any help would be appreciated. Thanks.

Atikah

[paulkd]

Are you using jQuery or just raw JavaScript?

[atikah8890]

Just JavaScript.

[paulkd]

What is the actual problem you are having?

[eburlea]

Can this help you?

<?php
$dataLevel = [[280, "ANALYZE", 260, 560],
              [230, "APPLY", 260, 510],
              [180, "UNDERSTAND", 260, 460],
              [130, "REMEMBER", 260, 410]];
?>
<script type="text/javascript">
var dataLevel = JSON.parse('<?php echo json_encode($dataLevel); ?>');
for(var i=0; i<dataLevel.length; i++){
    document.write(dataLevel[i] + '<br />');
}
</script>

[atikah8890]

paulkd: I don't know how to put the values obtained from the database into array in JavaScript. Just to clarify, var q = [ [ id, val, chpt, lvl ] ]; is an array right? I'd like the data to be in a form like this:

var dataLevel = [
    [280, "ANALYZE", 260, 560],
    [230, "APPLY", 260, 510],
    [180, "UNDERSTAND", 260, 460],
    [130, "REMEMBER", 260, 410]
                ];

There are about 20 rows of data. I've tried with json_encode and added the var q but it didn't work.

var id = <?php echo json_encode($q_id); ?>;
var val = <?php echo json_encode($res_val); ?>;
var chpt = <?php echo json_encode($chpt); ?>;
var lvl = <?php echo json_encode($lvl); ?>;

var q = [ [ id, val, chpt, lvl ] ];

eburlea: I'll have a look at your code. The array is in PHP which could be easier for me. There isn't any chance that document.write() displays the data in the exact form as the array, is there? With square brackets and all.

[paulkd]

This should give you the data structure you are after:-

$q = array();
while($row = mysql_fetch_assoc($query)){
    $q[] = array((int)$row['q_id'],$row['response_value'],(int)$row['cr_chpt'],(int)$row['ql_level']);
}   

[atikah8890]

I'll edit my code tonight and see how it goes. What I have to do is incorporate the code you gave with the JS code posted by eburlea right?

[eburlea]

This should work:

<?php
$i = 0;
while($row = mysql_fetch_assoc($query)){
    $dataLevel[$i]['q_id'] = $row['q_id'];
    $dataLevel[$i]['response_value'] = $row['response_value'];
    $dataLevel[$i]['cr_chpt'] = $row['cr_chpt'];
    $dataLevel[$i]['ql_level'] = $row['ql_level'];
    $i++;
} 
?>
<script type="text/javascript">
var dataLevel = JSON.parse('<?php echo json_encode($dataLevel); ?>');
for(var i=0; i<dataLevel.length; i++){
    document.write(dataLevel[i]['q_id'] + '<br />');
    document.write(dataLevel[i]['response_value'] + '<br />');
    document.write(dataLevel[i]['cr_chpt'] + '<br />');
    document.write(dataLevel[i]['ql_level'] + '<br /><br />');
}
</script>

[paulkd]

@atikah8890 using my code you can then create your JavaScript var using

var dataLevel = <?php echo json_encode($q).';'; ?>

and to test the following JavaScript line should print understand

document.write( dataLevel[2][1] ); 

[atikah8890]

eburlea: I'm trying paulkd's code at the moment. Will proceed with yours soon :)

paulkd: I've added the json_encode. document.write( dataLevel[2][1] ); displays the second item (response_value) in the third row of data (question no. 3). Did I understand that right?

        $plot = array
            (
                1 => array(255,205),
                2 => array(230,210),
                3 => array(235,230),
                4 => array(350,170),
                5 => array(360,220),
                6 => array(390,320),
                7 => array(360,375),
                8 => array(210,350),
                9 => array(155,340),
                10 => array(385,175),
                11 => array(410,200),
                12 => array(410,400),
                13 => array(175,385),
                14 => array(420,230),
                15 => array(218,248),
                16 => array(390,365),
                17 => array(435,345),
                18 => array(400,340),
                19 => array(230,170),
                20 => array(180,200)
            );

        $q = array();
        $x = 1;

        while($row = mysql_fetch_assoc($query)){
        $q[] = array((int)$row['q_id'],$row['response_value'],(int)$row['cr_chpt'],(int)$row['ql_level'],$plot['x'][0],$plot['x'][1]);

        $x++;

        }

The element outputs fine but still no luck when I add $plot['x'][0],$plot['x'][1] to the array. $plot are the coordinates I've calculated for the data to be plotted. When I add $plot['x'][0],$plot['x'][1] to the array, the diagram doesn't output at all.

        gLeft.selectAll('circle')
            .data(qDetails)
            .enter()
            .append("circle")
            // insert circle into DOM
            .attr("cx", function (d) { return d[4]; })
            .attr("cy", function (d) { return d[5]; })
            .attr("r", 5)
            .attr("fill", function (d[1]){
                if (d[1] == 1)
                {   return "green"; }
                else
                {   return "red";   }})
            .attr("stroke", "black")
            .attr("stroke-width", 0.5);

That's another matter to look up/ask on I suppose. Thank you for your help. Gonna mark this as solved :)

[paulkd]

Hi, the document.write was simply to show that the array was created as you asked. It is not required.

I'm having trouble creating an array for the data though. For static data I've made it something like this:

I was under the impression that your static array worked. If so, then the code I provided will create a variable that can be embedded in your JavaScript block.

var dataLevel = <?php echo json_encode($q).';'; ?>

[atikah8890]

I was under the impression that your static array worked. If so, then the code I provided will create a variable that can be embedded in your JavaScript block.

I place the $plot data in JS straight away instead of having it in PHP. It works now :) Very likely it works before too but I made some mistakes some place else so it didn't give me what I wanted. Appreciate the help. Thanks again :)