使用PHP脚本中的数据显示Flot条形图

时间:2013-02-27 09:47:18

标签: jquery plot flot bar-chart

我在显示这个flot条形图时遇到了一些麻烦,到目前为止,flot文档还无法帮助我。我将首先提供上下文,然后解释我的问题:

  • 下面是提供数据的php脚本(我只提供了基本的代码行):

    $sql = "select unix_timestamp(date(Date_Found))*1000 as day, count(Virus_Name) as nb from machine_virus_info where Virus_name!='NULL' group by unix_timestamp(date(Date_Found))*1000;";
    $result = mysql_query($sql);
    
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC))               
    {
            $array[] = array ($row['day'], $row['nb']);
    
    
            #when echoed the array data looks like this using just date  date():
            #[["20130226000","2"],["20130227000","1"]]
    }
    
    echo json_encode( $array );
    
  • 以下是我的html中的JS:

<script  id="virus_scan" language="javascript" type="text/javascript">
$(function()
    {
        var options = {
            series:
            {
                lines:  { show: false },
                points: { show: false }, 
                bars:
                {
                    show: true,
                    lineWidth: 1,
                    fill: 1,
                    fillColor: null,
                    align: "left",
                    barWidth: 24 * 60 * 60 * 1000,
                    horizontal: false
                }
            },
            xaxis:  { mode: "time" ,timeformat: "%y/%m/%d" },
            legend: { position:"nw" }
        };

        $.getJSON("php_scripts/virus_scan.php",
            function(data)
                {
                    $.plot($("#virus_scan"),data,options);
                }
            );
    }
);
</script>
  • 鉴于上面的信息,这是我得到的条形图,使用unix_timestamp(date()): NOTE: notice the time that is off. this is using unix_timestamp(date())

注意:当我们在使用unix_timestamp(date(date))时回显json_encode($ array)时,数组的打印方式如下:

[["1361833200000","2"],["1361919600000","1"]]
  • 这是仅使用date()而不是unix_timestamp(date())时得到的条形图: using only date()

注意:当我们只使用日期(日期)回显json_encode($ array)时,数组的打印方式如下:

[["20130226000","2"],["20130227000","1"]]

想法:

  • 我想在x轴上正确显示日期
  • 我希望在y轴上显示nb的最大值

  • 以下示例: enter image description here

  • 我的代码基于此条形图的代码,但显然结果不一样。

如果有人可以分享一些可以帮助我更好地理解并且可能确定问题的任何内容,因为我不确定问题是来自php操纵数据的方式还是条形图配置。< / p>

谢谢你, sSmacKk

1 个答案:

答案 0 :(得分:2)

不使用提供点数组,而是使用一系列系列对象,如下所示:

[{
    data: [[timestamp, value], ...]
    label: "A"
}, {
    data: [[timestamp, value], ...]
    label: "B"
]

请参阅文档的Data Format部分,下面几段。

您还需要确保您的时间戳和值是整数,而不是示例中的字符串。

最后,您的时间戳必须是JavaScript(UNIX * 1000)时间戳;只有'约会'的尝试肯定是行不通的。