dqlm80253 2016-08-17 17:50
浏览 96

在RGraph中this.canvas为null

Whenever I am trying to update my chart through AJAX by clicking a button, I am getting following error:

TypeError: this.canvas is null

this.context                = this.canvas.getContext('2d');

RGraph.bar.js (line 49, col 9)

I tried various solutions but nothing worked for me. Here's are my two files which are being used in this process:

index.php:

<?php
include("includes/db-config.php");

$query = "SELECT * FROM `tb_daily_statistics`";
$rs = mysqli_query($con, $query);

$labels = array();
$data = array();

while($row = mysqli_fetch_array($rs))
{
    $labels[] = $row['day'];
    $data[] = $row['statistics'];
}

// Now you can aggregate all the data into one string
$data_string = "[" . implode(", ", $data) . "]";
$labels_string = "['" . implode("', '", $labels) . "']";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RGraph Charts</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/RGraph/RGraph.common.core.js"></script>
<script type="text/javascript" src="js/RGraph/RGraph.bar.js"></script>
<!--[if lt IE 9]><script src="js/RGraph/excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function (){

    var bar = new RGraph.Bar({
        id: 'mycanvas',
        data: <?php echo $data_string; ?>,
        options: {
            labels: <?php echo $labels_string; ?>,
            gutter: {
                left: 50
            }
        }
    }).draw()

    $("#btnstats").click(function(){
        var order_by = $(this).data("order");
        //alert(order_by);

        // Reset the canvas
        RGraph.Reset(document.getElementById("mycanvas"));

        // Prepare data to send over server
        data = 'order_by='+order_by;
        RGraph.AJAX.getJSON('ajax/update-chart.php?'+data, draw_graph);
    })

});

// This is the AJAX callback function. It splits up the response, converts it to numbers and then creates the chart.
function draw_graph(json)
{
    // Set the JSON on the window object so that the button below can show it to the user.
    //window.__json__ = json;
    //$p(window.__json__);

    // Reset the canvas
    RGraph.Reset(document.getElementById("mycanvas"));

    // Now draw the chart
    var bar = new RGraph.Bar({
        id: 'mycanvas',
        data: json.data,
        options: {
            labels: json.labels,
            gutter: {
                left: 50
            }
        }
    }).draw()
}
</script>
</head>
<body>

    <canvas id="mycanvas" width="600" height="250">[No canvas support]</canvas>

    <br />

    <input type="button" id="btnstats" value="Order By Stats" data-order="statistics" />

</body>
</html>

update-chart.php:

<?php
require_once '../includes/db-config.php';

/*
echo "<pre>";
print_r($_GET);
echo "<pre>";
*/

// Order by day
if(isset($_GET['order_by']) && $_GET['order_by'] == "statistics")
{
    $order_by = $_GET['order_by'];

    $query = "SELECT * FROM `tb_daily_statistics` ";
    $query .= "ORDER BY " . $order_by;

    $rs = mysqli_query($con, $query);

    $labels = array();
    $data = array();

    while($row = mysqli_fetch_array($rs))
    {
        $labels[] = $row['day'];
        $data[] = $row['statistics'];
    }

    // Now you can aggregate all the data into one string
    $data_string = "[" . implode(", ", $data) . "]";
    $labels_string = "['" . implode("', '", $labels) . "']";

    echo json_encode(array('data' => $data_string, 'labels' => $labels_string));
}
?>

The response from server is fine. Here's what I am receiving:

{"data":"[64, 75, 84, 94, 95, 98, 124]","labels":"['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon']"
}

What could be the issue?

  • 写回答

1条回答 默认 最新

  • doujuanxun7167 2016-08-18 13:55
    关注

    The response from the server is not formatted in correct way that RGraph understands. It's

    {"data":"[64, 75, 84, 94, 95, 98, 124]","labels":"['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon']"
}

    If you do

    window.__json__ = json;
$p(window.__json__);

    in your draw_graph(json) function, then response from server will be

     Object {
        data => [64, 75, 84, 94, 95, 98, 124] (string, 29)
        labels => ['Wed', 'Fri', 'Sun', 'Thu', 'Tue', 'Sat', 'Mon'] (string, 49)
    }

    which is wrong. Rather it should be

    Object {
        data =>         Object {
            0 => 64 (number)
            1 => 75 (number)
            2 => 84 (number)
            3 => 94 (number)
            4 => 95 (number)
            5 => 98 (number)
            6 => 124 (number)
        }
        labels =>         Object {
            0 => Wed (string, 3)
            1 => Fri (string, 3)
            2 => Sun (string, 3)
            3 => Thu (string, 3)
            4 => Tue (string, 3)
            5 => Sat (string, 3)
            6 => Mon (string, 3)
        }
    }

    To fix your issue, change few lines of code in update-chart.php as

    From

    $data[] = $row['statistics'];

    to

    $data[] = (int) $row['statistics'];

    Remove following lines:

    // Now you can aggregate all the data into one string
$data_string = "[" . implode(", ", $data) . "]";
$labels_string = "['" . implode("', '", $labels) . "']";

    From

    echo json_encode(array('data ' => $data_string , 'labels' => $labels_string));

    to

    echo json_encode(array('data' => $data, 'labels' => $labels));
    评论

报告相同问题？

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？