使用JSON的Highcharts - 图形不显示mysql数据

时间:2014-06-01 17:31:00

标签: javascript php mysql json highcharts

我已经能够使用:

从mysql生成结果
$myArray=array();
$tempArray = array();

// Get all records
while ( $row = $results->fetch_assoc())
{
    $tempArray = $row;
    array_push($myArray, $tempArray);
}
echo json_encode($myArray);

$mysqli->close();

 ?>

然后我通过使用以下Javascript将其包含在我的页面index.php上生成图表。

基于我的ajax json生成图表,我不理解/缺少哪些概念/代码?

已编辑 - 解决方案:

生成json的最终PHP代码:

while ( $row = $results->fetch_assoc())
{   

    $tempArray[0] = $row['unix_timestamp(auct.end_date)'];
    $tempArray[0] *= 1000;
    $tempArray[1] = $row['winning_bid'];

    array_push($myArray, $tempArray);

}
echo json_encode ($myArray, JSON_NUMERIC_CHECK);

$mysqli->close();

 ?>

最终的javascript代码:

$('#btn_search').click(function(){
    txt_search = $('#txt_search').val();
    $.ajax({                                      
      url: './php/search.php',  
      type: 'GET',
      data: {search: txt_search}, 
      dataType: 'json',                   
      success: function(rows)      
      {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartdiv',
                type: 'line',
                marginRight: 100,
                marginBottom: 50
            },
            title: {
                text: 'Whisky Tracking',
                x: -20 //center
            },
            xAxis: {
                text: 'EndDate',
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Price',
                    color: '#CC680E'
                }, 
                plotLines: [{
                    value: 0,
                    width: 20,
                    color: '#CC680E'
                }]
            },
            series: [{
            name:  txt_search,
            xAxis:0,
            data: rows,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                    return '£'+ Highcharts.numberFormat(this.y, 0);
                    }
                }
            }],         

        });
      }
    }); 
    goToByScroll('tracker');
    return false;
});  

来自JSON的示例数据:

[1306732000000,160],[1306745000000,45],[1306788000000,65],[1306788000000,50],[1306712000000,130],[1306733000000,240],[1306744000000,60],[1306788000000,250],[1306710000000,145]

1 个答案:

答案 0 :(得分:2)

问题是值是字符串,例如,您的数据:

["2011-05-30 00:00:00","130"]

应该是:

[1306706400000, 130]

以ms为单位的时间戳和真值。

您可以阅读JSON_NUMERIC_CHECK的{​​{1}}选项,将字符串更改为数字。但是您需要自行更改时间戳的日期。

编辑: 另外一个问题是在doubled数组中设置数据,改为:

json_encode(string, JSON_NUMERIC_CHECK)

为:

data: [rows]