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?
