I am generating a DataTable for a google area chart. The table I generate is the below JSON. The JSON validates, and looks correct, but when fed to the chart, the chart displays a "table has no columns" error.

The JSON also appears to match the JSON in the sample file on this page

Here is my JSON data:

{
  "cols":[
    {"id":"","label":"date","type":"string"},
    {"id":"","label":"run","type":"number"},
    {"id":"","label":"passed","type":"number"}
  ],
  "rows":[
    {"c":[{"v":"2012-07-20"},{"v":0},{"v":0}]},
    {"c":[{"v":"2012-07-23"},{"v":0},{"v":0}]}
  ]
}

Here is how I am fetching the data and giving it to the chart:

function loadData()
{
    var request=new XMLHttpRequest();
    request.onreadystatechange=function()
    {
        if (request.readyState==4 && request.status==200)
        {
            return request.responseText;
        }
    }
    request.open("GET","testsrun.php?json=true&branch=test",true);
    request.send();
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var json = loadData();
    var data = new google.visualization.DataTable(json);

    var options = {
        vAxis: {minValue: 0}
    };

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

Also, I am aware that I can use a date object instead of a string for the date, I would prefer not to overplicate this until I have solved the initial problem.

I am generating a DataTable for a google area chart. The table I generate is the below JSON. The JSON validates, and looks correct, but when fed to the chart, the chart displays a "table has no columns" error.

The JSON also appears to match the JSON in the sample file on this page

Here is my JSON data:

{
  "cols":[
    {"id":"","label":"date","type":"string"},
    {"id":"","label":"run","type":"number"},
    {"id":"","label":"passed","type":"number"}
  ],
  "rows":[
    {"c":[{"v":"2012-07-20"},{"v":0},{"v":0}]},
    {"c":[{"v":"2012-07-23"},{"v":0},{"v":0}]}
  ]
}

Here is how I am fetching the data and giving it to the chart:

function loadData()
{
    var request=new XMLHttpRequest();
    request.onreadystatechange=function()
    {
        if (request.readyState==4 && request.status==200)
        {
            return request.responseText;
        }
    }
    request.open("GET","testsrun.php?json=true&branch=test",true);
    request.send();
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var json = loadData();
    var data = new google.visualization.DataTable(json);

    var options = {
        vAxis: {minValue: 0}
    };

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

Also, I am aware that I can use a date object instead of a string for the date, I would prefer not to overplicate this until I have solved the initial problem.

• javascript
• json
• google-visualization

1 Answer 1

Your loadData function doesn't return anything, so the json variable is null. I would suggest a slight reorganization of your code to get the effect you want:

function drawChart (json) {
    var data = new google.visualization.DataTable(json);

    var options = {
        vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
function loadData () {
    var request=new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            drawChart(request.responseText);
        }
    }
    request.open("GET","testsrun.php?json=true&branch=test",true);
    request.send();
}
google.load('visualization', '1', {packages:['corechart'], callback: loadData});

Also, the numbers in your JSON are being input as strings, which will cause problems with your charts. You need to input them as numbers, eg. {"v":"0"} should be {"v":0}. If you are using PHP's json_encode function to build your JSON, you can pass JSON_NUMERIC_CHECK as a second argument to the function call to make sure your numbers are input correctly:

json_encode($myData, JSON_NUMERIC_CHECK);