douhuang1973
douhuang1973
2016-05-30 11:19

无法使用php + MySQL创建Google图表

已采纳

I try to draw a chart by using Google chart. And I try to feed this chart by using php+MySQL, but I always get an error.

Here is my php code :

    require_once("inc/functions.php"); 
    startSession();
    connectALISDB($conn);

    date_default_timezone_set('Europe/Istanbul');
    mb_internal_encoding("UTF-8");

    $now = date("Y-m-d H:m:s");

    $query = "SELECT CONCAT(cdate,' ',chour,':00') AS ctime         ,sum(bytesin)         as totalbytesin, sum(bytesout) as totalbytesout FROM traffic_user_daily group by cdate,chour";
    $result = $conn->query($query);
    error_log($result);
    $rows= array();
    $table = array();
    $table['cols'] = array(
    array('label' => 'Tarih' , 'type' => 'number'),
    array('label' => 'Inbound' , 'totalbytesin' => 'number'),
    array('label' => 'Outbound' , 'totalbytesout' => 'number')
    );
    foreach($result as $r) {
    $temp = array();
    $temp[] = array('v' => (int) $r['ctime']);
    $temp[] = array('v' => (int) $r['totalbytesin']);
    $temp[] = array('v' => (int) $r['totalbytesout']);
    $rows[] = array('c' => $temp);
    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
    echo $jsonTable;
    ?>

And here is the JavaScript:

    function drawBigChart() {            
    var data = new google.visualization.DataTable(<?=$jsonTable?>);

    var options = {
    height: 400,

    chartArea: {
    backgroundColor: '#00acc1',
    'height': '80%',
    left: "5%" 
    },

                legend: {
                    position: 'right', 
                    textStyle: {
                        color: 'white', 
                        fontSize: 12
                    }
                },

                hAxis: {
                    textStyle: {color: '#FFFFFF'},
                    baselineColor: '#bdbdbd',
                    gridlines: { 
                        count: 10,
                        color:'bdbdbd',                          
                    },
                },


                vAxis: {
                    baselineColor: '#bdbdbd',
                    textStyle: {color: '#FFFFFF'},
                    gridlines: {
                        count: 10,
                        color:'bdbdbd' 
                    },
                },

                intervals: { 'style':'area' },
                curveType: 'function',
                backgroundColor: '#00acc1',
                crosshair: {orientation: 'vertical'},

                animation: {
                    startup: true,
                    duration: 5000
                },
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }

And the JSON output is like this:

{"cols":[{"label":"Tarih","type":"number"},{"label":"Inbound","totalbytesin":"number"},{"label":"Outbound","totalbytesout":"number"}],"rows":[{"c":[{"v":2016},{"v":616949461},{"v":54833510}]},{"c":[{"v":2016},{"v":1071313739},{"v":320947830}]},{"c":[{"v":2016},{"v":1455660746},{"v":210419484}]},{"c":[{"v":2016},{"v":789962984},{"v":327432205}]},{"c":[{"v":2016},{"v":676679291},{"v":274928339}]},{"c":[{"v":2016},{"v":667889999},{"v":292389929}]},{"c":[{"v":2016},{"v":1463408081},{"v":950579255}]},{"c":[{"v":2016},{"v":1538641974},{"v":317974942}]},{"c":[{"v":2016},{"v":1867588481},{"v":360232043}]},{"c":[{"v":2016},{"v":1340952334},{"v":588966932}]},{"c":[{"v":2016},{"v":1126245861},{"v":343053475}]},{"c":[{"v":2016},{"v":980037386},{"v":191174645}]},{"c":[{"v":2016},{"v":588082627},{"v":79611411}]},{"c":[{"v":2016},{"v":417788859},{"v":121160558}]},{"c":[{"v":2016},{"v":97896713},{"v":14177774}]},{"c":[{"v":2016},{"v":913660335},{"v":98950028}]},{"c":[{"v":2016},{"v":944847639},{"v":165687933}]},{"c":[{"v":2016},{"v":1269028183},{"v":406512502}]},{"c":[{"v":2016},{"v":1256285493},{"v":364472218}]},{"c":[{"v":2016},{"v":1357830001},{"v":229359799}]},{"c":[{"v":2016},{"v":1311178016},{"v":228474332}]},{"c":[{"v":2016},{"v":1379586583},{"v":328833663}]},{"c":[{"v":2016},{"v":1424824313},{"v":293136499}]},{"c":[{"v":2016},{"v":1305972788},{"v":392936347}]},{"c":[{"v":2016},{"v":1663501390},{"v":375649466}]},{"c":[{"v":2016},{"v":1773504800},{"v":298948183}]},{"c":[{"v":2016},{"v":1736921958},{"v":359272899}]},{"c":[{"v":2016},{"v":1624790800},{"v":485274796}]},{"c":[{"v":2016},{"v":1085261421},{"v":393922135}]},{"c":[{"v":2016},{"v":1540168539},{"v":329187097}]},{"c":[{"v":2016},{"v":2267596938},{"v":432927487}]},{"c":[{"v":2016},{"v":1784894720},{"v":484062626}]},{"c":[{"v":2016},{"v":1732570176},{"v":360187648}]},{"c":[{"v":2016},{"v":1373635153},{"v":416301097}]},{"c":[{"v":2016},{"v":1077547736},{"v":378152545}]},{"c":[{"v":2016},{"v":814781815},{"v":426406384}]},{"c":[{"v":2016},{"v":391214417},{"v":57594283}]},{"c":[{"v":2016},{"v":238728620},{"v":411359192}]},{"c":[{"v":2016},{"v":627038369},{"v":464998879}]},{"c":[{"v":2016},{"v":418537183},{"v":172399567}]},{"c":[{"v":2016},{"v":929978176},{"v":208658516}]},{"c":[{"v":2016},{"v":974628809},{"v":183218702}]},{"c":[{"v":2016},{"v":1017993341},{"v":298413373}]},{"c":[{"v":2016},{"v":877486946},{"v":145361676}]},{"c":[{"v":2016},{"v":1031894504},{"v":305448760}]},{"c":[{"v":2016},{"v":1150372106},{"v":382222861}]},{"c":[{"v":2016},{"v":1582812039},{"v":137408784}]},{"c":[{"v":2016},{"v":1537276308},{"v":208581692}]},{"c":[{"v":2016},{"v":1222891678},{"v":205452952}]},{"c":[{"v":2016},{"v":1036762286},{"v":309722999}]},{"c":[{"v":2016},{"v":789523329},{"v":419689905}]},{"c":[{"v":2016},{"v":952430766},{"v":199638941}]},{"c":[{"v":2016},{"v":781440791},{"v":144132110}]},{"c":[{"v":2016},{"v":1109073153},{"v":224449086}]},{"c":[{"v":2016},{"v":998341670},{"v":99500268}]},{"c":[{"v":2016},{"v":1785245532},{"v":379691678}]},{"c":[{"v":2016},{"v":2090441158},{"v":500600423}]},{"c":[{"v":2016},{"v":1162633158},{"v":322790621}]},{"c":[{"v":2016},{"v":524611918},{"v":458475624}]},{"c":[{"v":2016},{"v":400698088},{"v":101102156}]},{"c":[{"v":2016},{"v":125679948},{"v":8217615}]},{"c":[{"v":2016},{"v":32241413},{"v":17189459}]},{"c":[{"v":2016},{"v":20114033},{"v":33244751}]},{"c":[{"v":2016},{"v":141451020},{"v":36336894}]},{"c":[{"v":2016},{"v":386152358},{"v":136969329}]},{"c":[{"v":2016},{"v":897205327},{"v":279124569}]},{"c":[{"v":2016},{"v":624769589},{"v":209374548}]},{"c":[{"v":2016},{"v":853926857},{"v":208120195}]},{"c":[{"v":2016},{"v":357175358},{"v":91568246}]},{"c":[{"v":2016},{"v":974403545},{"v":95703821}]},{"c":[{"v":2016},{"v":46398246},{"v":11965483}]}]}

When I try to inspect code in firefox, I get this error:

Error: Invalid type, undefined, for column "Inbound".

I can't notice what I did wrong.

Can you help me?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dtyw10299 dtyw10299 5年前

    When u change $temp[] = array('v' => (string) $r['ctime']); instead of ** $temp[] = array('v' => (int) $r['ctime']);** . Now it works.

    点赞 评论 复制链接分享

相关推荐