使用MySQL数据库中的jQuery Flot绘制数据

时间:2012-12-06 21:00:28

标签: javascript jquery codeigniter charts flot

我正在尝试从mysql数据库生成图形显示注册数据。数据格式似乎正确,但未绘制数据。请注意我正在使用CodeIgniter。

PHP:

public function graph_registrations()
    {
        $send = array();

        $i = 1;
        while($i <= 30){
            $startTime = mktime(0, 0, 0, date('m'), date('d')-$i, date('Y'));     
            $endTime = mktime(23, 59, 59, date('m'), date('d')-$i, date('Y'));
            $data = $this->admin_model->total_users_date($startTime, $endTime);
            $new = array(date("M j", $startTime), $data);
            $send[] = $new;
            $i++;
        }

        echo json_encode($send);
    }

JS:

var jsonData = $.ajax({
          url: default_url+"admin/graph_registrations",
          dataType:"json",
          async: false
          }).responseText;

    console.log(jsonData);

    var graphData = [{
        // Visits
        data: jsonData,
        color: '#71c73e',
        points: { radius: 4, fillColor: '#71c73e' }
    }
];

    // Lines
$.plot($('#graph-lines'), graphData, {
    series: {
        points: {
            show: true,
            radius: 5
        },
        lines: {
            show: true
        },
        shadowSize: 0
    },
    grid: {
        color: '#646464',
        borderColor: 'transparent',
        borderWidth: 20,
        hoverable: true
    },
    xaxis: {
        tickColor: 'transparent',
        tickDecimals: 2
    },
    yaxis: {
        tickSize: 1000
    }
});

如果我手动硬编码数据,一切都有效,但是当我通过ajax获取数据时却不行。

这就是console.log(jsonData)生成的内容:

[["Dec 5",0],["Dec 4",0],["Dec 3",0],["Dec 2",0],["Dec 1",0],["Nov 30",0],["Nov 29",0],["Nov 28",0],["Nov 27",0],["Nov 26",0],["Nov 25",0],["Nov 24",0],["Nov 23",0],["Nov 22",0],["Nov 21",0],["Nov 20",0],["Nov 19",0],["Nov 18",0],["Nov 17",0],["Nov 16",0],["Nov 15",0],["Nov 14",0],["Nov 13",0],["Nov 12",0],["Nov 11",0],["Nov 10",0],["Nov 9",1],["Nov 8",0],["Nov 7",0],["Nov 6",0]] 

我尝试没有日期而只是一个简单的数字,但它没有用。

谢谢

1 个答案:

答案 0 :(得分:0)

对我来说,你试图在拥有它们之前绘制数据。我可以看到你正在使用&#34; async:false&#34;我要等待数据加载,而不是使用默认的&#34; true&#34;选项并将绘图功能置于&#34;成功&#34;回调$ .ajax。