用数组填充xaxis的flot图表

时间:2014-01-06 03:11:19

标签: php arrays flot

我试图仅使用存储在数组$ date []

中的数据填充我的xaxis

这是我的编码;

        <?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>

当我运行这个我的整个xaxis消失时,我假设我必须对date []数组进行JSON_encode,然后将其分配给我的xaxis的'ticks'选项?

有人可以检查我在这里做错了吗?

谢谢。

编辑:改变了一些东西,现在它正在做某事,但仍然没有xaxis的网格和标签?

检查链接:http://www.myreeftests.com/graphs2.php

2 个答案:

答案 0 :(得分:2)

您的dateArray看起来像这样:

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

但它必须如下所示:

var dateArray = [1367704800000,1367791200000, ...

因此,删除javascript中的外部[ ]并将时间戳格式设置为longint而不是字符串数组(不确定如何在php中执行此操作)。

有关详细信息,请参阅documentation

答案 1 :(得分:0)

好吧所以乱搞我设法让它使用数组显示正确的刻度,最后一个问题是将刻度形成均匀的空格;

[链接] http://www.myreeftests.com/graphs2.php