I want to use google charts with JSON.
This is the file that makes my JSON file from my php database:
<?php
//open connection to mysql db
$connection = mysqli_connect("localhost","root","root","register") or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "SELECT * FROM tbl_users";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray = array();
while($row =mysqli_fetch_assoc($result))
{
$emparray[] = $row;
}
header('Content-Type: application/json');
//write to json file
$fp = fopen('users.json', 'w');
fwrite($fp, json_encode($emparray));
fclose($fp);
//close the db connection
mysqli_close($connection);
?>
My JSON OUTPUT is:
[{
"userID": "1",
"userName": "admin",
"userLast": "admin",
"userDegree": "HBO",
"userOrganization": "TRM",
"userIndustry": "TRM",
"userAddressone": "asd 1",
"userAddresstwo": "asd1",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "dion.jongmans@trmoncology.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "d33164cb6de8ee9471a34ece95d91abb"
}, {
"userID": "22",
"userName": "a",
"userLast": "Bernard",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "a@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "23",
"userName": "b",
"userLast": "Jansen",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "b@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "24",
"userName": "c",
"userLast": "Vermeer",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "c@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "25",
"userName": "d",
"userLast": "van Vliet",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "d@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "26",
"userName": "e",
"userLast": "Petersen",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "e@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "27",
"userName": "f",
"userLast": "Gaartsen",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "f@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "28",
"userName": "g",
"userLast": "Klompenboer",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "g@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "29",
"userName": "h",
"userLast": "de Jong",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "h@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "30",
"userName": "i",
"userLast": "",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "i@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "31",
"userName": "j",
"userLast": "",
"userDegree": "",
"userOrganization": "",
"userIndustry": "",
"userAddressone": "",
"userAddresstwo": "",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "j@admin.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2d123af96e8de9dcfea549cedbd3ef3e"
}, {
"userID": "60",
"userName": "Henk",
"userLast": "Vermeer",
"userDegree": "dfg",
"userOrganization": "TRM",
"userIndustry": "dfg",
"userAddressone": "Parkdreef 123",
"userAddresstwo": "Mozartlaan 438",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "fds@fds.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "2dfc96090d0580c77052ea730ca641ec"
}, {
"userID": "61",
"userName": "dion",
"userLast": "sdff",
"userDegree": "sdfsdf",
"userOrganization": "sdfsd",
"userIndustry": "h",
"userAddressone": "fdsgxchvjngfcbvd",
"userAddresstwo": "nhgjmkhmg",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "7@7.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "a8224f3750dd0fa465f5592b2c8b7691"
}, {
"userID": "62",
"userName": "asdasdsad",
"userLast": "asdasdasdsd",
"userDegree": "asdasdasda",
"userOrganization": "sdasdasdasd",
"userIndustry": "asdasdasdas",
"userAddressone": "dasdasdas",
"userAddresstwo": "dasdas",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "a@3.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "3158097d42a06f3619a4f65d7332e9ac"
}, {
"userID": "63",
"userName": "piet",
"userLast": "molema",
"userDegree": "sdfmaf",
"userOrganization": "jnbfkj",
"userIndustry": "asdasd",
"userAddressone": "kjb",
"userAddresstwo": "jb",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "piet@piet.nl",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "8470034e78689fbfdf02a243b2e5791e"
}, {
"userID": "64",
"userName": "wim",
"userLast": "piet",
"userDegree": "sdfnb",
"userOrganization": "ubhi",
"userIndustry": "biu",
"userAddressone": "buikb",
"userAddresstwo": "iukb",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "qw@qw.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "a4a48ab579a555b02fb73fa35ca19eca"
}, {
"userID": "65",
"userName": "henk",
"userLast": "skdfn",
"userDegree": "kjb",
"userOrganization": "kj",
"userIndustry": "nkj",
"userAddressone": "nkj",
"userAddresstwo": "n",
"userCity": "",
"userState": "",
"userZip": "",
"userCountry": "",
"userPass": "81dc9bdb52d04dc20036dbd8313ed055",
"userPhone": "0",
"userEmail": "m@m.com",
"userAssistinfo": "",
"userStatus": "Y",
"userCreated": "0000-00-00 00:00:00",
"tokenCode": "a22bfc97426704ae0894882242a14016"
}]
But Google is saying this:
Table has no columns
This is what i use to display the Chart:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 400});
}
</script>
<div id="chart_div"></div>
What am i doing wrong?
