CODEWITHSUNDEEP
phparraysflot
NavyPixel
NavyPixel

Reputation: 260

flot chart populating xaxis with array

im trying to populate my xaxis using only data stored in the array $date[]

this is my coding;

        <?php
// Main query to pull data from 'tests' table
    $sql = "SELECT UNIX_TIMESTAMP(`date`)*1000 AS unixDate,`date`, `test1`, `test2`, `test3`, `test4`, `test5`, `test6`, `test7`, `test8`, `test9`, `test10`, `test11`, `test12`, `test13`, `test14` FROM `tests` WHERE member_id = '1' ORDER by `date` ASC";
    $result = mysql_query($sql) or die ("no query");

//  Dataset#1
while($row = mysql_fetch_assoc( $result ))  {
    $dataset1[] = array( $row['unixDate'], sprintf( "%.3f", $row['test1'] ));
    $date[] = array($row['unixDate']);
    }
?>
<div id="chart1Canvas" style="width:510px;height:200px;">
<div id="chart1" style="width:500px;height:200px;"></div></div>
<script type="text/javascript">
    //START CHART#1
    var dateArray = [ <?php echo json_encode($date); ?> ];
    var chart1Options = {
        xaxis: {show: true, mode: "time", timeformat: "%y-%m-%d", ticks: dateArray},
        yaxis: {show: true, min: 1.000, max: 1.050, tickDecimals: 3 },
        lines: {
            show: true,
            fill: true,
            fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2}] }
        },
        points: { show: true, radius: 1 },
        grid: {
            show: true,
            color: '#fff',
            backgroundColor: false,
            borderWidth: 0,
            hoverable: true,
            clickable: true }
    };

    function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; }

    var dataset1 = { data: <?php echo json_encode($dataset1); ?>, color: 'white'};

    $.plot($("#chart1"), [ dataset1 ], chart1Options);
    //END CHART#1
</script>

when i run this my entire xaxis dissapears, i assumed i have to JSON_encode the date[] array before assigning it to the 'ticks' option for my xaxis?

can someone check what i have done wrong here?

thank you.

edit: changed something and now its doing something, but still no grid and labels for xaxis?

check link: http://www.myreeftests.com/graphs2.php

Upvotes: 1

Views: 918

Answers (2)

NavyPixel
NavyPixel

Reputation: 260

ok so with messing around i managed to get it to show the correct ticks using an array, last problem is formating the ticks to space out evenly;

[link]http://www.myreeftests.com/graphs2.php

Upvotes: 0

Raidri
Raidri

Reputation: 17550

Your dateArray looks like this:

var dateArray = [ [["1367704800000"],["1367791200000"], ...

but it has to look like this:

var dateArray = [1367704800000,1367791200000, ...

So remove the outer [ ] in the javascript and format the timestamps as longint instead of as arrays of a string (not sure how to do that in php).

See the documentation for more information.

Upvotes: 2

Related Questions