2016-09-22 7 views
2

Newbie zu Google Charts, Ich versuche, ein Google-Diagramm zu erstellen, gibt Controller JSON-Daten wieASP.Net MVC - Json-Daten für Google Charts

{"data":[["In Progress","10"],["Completed","20"],["Deleted","5"],["Overdue","8"]]} 

Aber Daten für den Google Chart wie

sein sollte
[["In Progress",10],["Completed",20],["Deleted","5"],["Overdue",8]] 

ich habe folgende JS-Funktion:

$(document).ready(function() { 
     $.ajax({ 
      url: '@Url.Action("TaskStatus", "Graph")', 
      data: "", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; chartset=utf-8", 
      success: function (data) {     
       var jsonData = JSON.stringify(data); 

       var dt = new google.visualization.DataTable(); 
       dt.addColumn('string', 'Tasks'); 
       dt.addColumn('number', 'Count'); 

       $.each(arrJson, function (i, obj) { 
        $.each(obj, function (i, o) { 
         console.log(o[1]);        
         dt.addRow(o[0],parseInt(o[1])); // here I get error of datatype for "Count" column 
        })            
       }) 
       chartData = dt; 
      }, 
      error: function (err) { 
       alert(err); 
       console.log(err); 
      } 
     }).done(function() { 
      drawChart(); 
     }) 
    }) 

function drawChart() 
{   
var options = { 
       width: '500px', 
       title: "Task Status", 
       pointSize: 20, 
       chartArea:{width:"100%",height:"100px"} 
      }; 
     var pieChart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     pieChart.draw(chartData, options); 
} 

-Controller liefert

List<object> temp = new List<object>(); 
      temp.Add(new[] { "In Progress", "10" }); 
      temp.Add(new[] { "Completed", "20" }); 
      temp.Add(new[] { "Deleted", "5" }); 
      temp.Add(new[] { "Overdue", "8" }); 

      return Json(new { data = temp }); 

Bitte beraten Sie, wie Sie das beheben können? Vielen Dank im Voraus!

Antwort

0

am Regler

Versuchen Sie, diese

return Json(temp); 
+0

Hat json nicht funktionieren wird wie { "data": [[ "In Progress", "10"]}. Dasselbe Problem – Sami

2

Sie sollten nicht die JSON.stringify Funktion in Ihrem AJAX Erfolg Rückruf, da dies Transformation verwenden Sie das Objekt, von dem Server in einen String bekam. Sie können dies versuchen:

success: function (result) { 
    var dt = new google.visualization.DataTable(); 
    dt.addColumn('string', 'Tasks'); 
    dt.addColumn('number', 'Count'); 

    // Taking the "data" property as your controller returns it that way 
    var data = result.data; 

    $.each(data, function (i, obj) { 
     var label = obj[0]; 
     var value = parseInt(obj[1]); 
     dt.addRow([label, value]); 
    }); 

    chartData = dt; 
}, 
+0

fyi: Tippfehler am Ende dieser Zeile -> 'dt.addRow (Label, Wert); Spalte' – WhiteHat

+0

Noch hatte Problem bei dieser Zeile dt.addRow (Label, Wert); In dt.addRow geändert ([label, value]); – Sami

+0

Ja, ich kannte die Argumente, die die Funktion 'addRow' erwartet, nicht. Es sieht so aus, als müsste es ein Array sein. –