Google char API table has no columns

Question

I'm trying to use Google Chart API in my Aspnet application. My data is provided by a Web Api controller, I'm using Google.DataTable.Net.Wrapper do generate my data, and the following template in Javascript :

    function drawVersionDistributionChart() {
        var versionDistributionJsonData = $.ajax({
            url: BASE_URL + "api/VersionDistribution",
            dataType: "json",
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var versionDistributionData = new google.visualization.DataTable(versionDistributionJsonData);

        // Instantiate and draw our chart, passing in some options.
        var versionDistributionChart = new google.visualization.PieChart(document.getElementById('versiondistribution_chart_div'));
        versionDistributionChart.draw(versionDistributionData, { width: 500, height: 300 });
    }

My data seems well formatted : {"cols": [{"type": "string" ,"id": "VersionNumber" ,"label": "Version number" }, {"type": "number" ,"id": "ApplicationCount" ,"label": "Application count" }], "rows" : [{"c" : [{"v": "1"}, {"v": 1}]}]}

I validated the data with Google API Playground.

I also tried to use the Chart Wrapper method by providing the URL of my Web API controller as datasourceUrl.

What am I missing please ?

I tested your code with that JSON, and it worked. Check to see if your data source is actually returning data - visit the BASE_URL + "api/VersionDistribution" URL in a browser and post what it outputs. — asgallant
Hi, I tested it using firebug, the data returned is : "{\"cols\": [{\"type\": \"string\" ,\"id\": \"VersionNumber\" ,\"label\": \"Version number\" }, {\"type\": \"number\" ,\"id\": \"ApplicationCount\" ,\"label\": \"Application count\" }], \"rows\" : [{\"c\" : [{\"v\": \"V1.0.0\"}, {\"v\": 1}]}]}" Maybe it has something to do with WebApi ? — Rodolphe Beck

Rodolphe Beck Rodolphe Beck · Accepted Answer · 2013-09-06T10:19:49

Ok, there seem to be an issue with the way data is formatted when it is returned by the Web API controller.

Here is what I did to make it work :

Changed the datatype to 'xml' in the ajax method.

var versionDistributionJsonData = $.ajax({
            url: BASE_URL + "api/VersionDistribution",
            dataType: "xml",
            async: false
        }).responseText;

Removed the XML schema and keywords added by Web API controller :

versionDistributionJsonData = versionDistributionJsonData.replace('<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">', '');
versionDistributionJsonData = versionDistributionJsonData.replace('</string>', '');

Now it works.

Google char API table has no columns

1 Answers