Question

54

Google chart Table has no columns

rated 0 times [ 59] [ 5] / answers: 1 / hits: 13759 / 11 Years ago, fri, december 6, 2013, 12:00:00

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 overcomplicate this until I have solved the initial problem.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rylee

Add To Favorites

Follow

Total Points: 658

Total Questions: 114

Total Answers: 116

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

answered 11 Years ago ignacio · Accepted Answer

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);