Json to google Diagramme mit variabler Anzahl von Spalten und Array

Question

Schalter meine Variable chart Hexe enthält dieses JSON:

[{ 
    "month": "January", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "February", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "March", 
    "values": [35, 3, 8, 18, 0, 0, 0, 0, 0] 
}, { 
    "month": "April", 
    "values": [36, 1, 0, 2, 0, 0, 0, 0, 0] 
}, { 
    "month": "May", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "June", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "July", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "August", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "September", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "October", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "November", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}, { 
    "month": "December", 
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
}] 

Die „Werte“ Attribut nicht statisch ist, hängt es von der Anzahl der Techniker, die sind in meiner Datenbank.

Meine Spalten werden wie folgt initialisiert:

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Month'); 
var techlist = @Html.Raw(Json.Encode(ViewBag.techs)); 
for(var j=0; j<@ViewBag.nbTechs;j++){ 
    data.addColumn('number', techlist[j]); 
} 

Also meine Frage ist: Wie kann ich das Attribut „Monat“ in der Monats Spalte und alle Werte in „Werte“ in den Spalten habe ich erstellt (in der Reihenfolge der "Werte" und der Reihenfolge der Erstellung der Zahlenspalte)?

Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

So etwas sollte funktionieren ...

google.charts.load('current', { 
 
    callback: drawTable, 
 
    packages: ['table'] 
 
}); 
 

 
function drawTable() { 
 
    var jsonData = 
 
    [{ 
 
     "month": "January", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "February", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "March", 
 
     "values": [35, 3, 8, 18, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "April", 
 
     "values": [36, 1, 0, 2, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "May", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "June", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "July", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "August", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "September", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "October", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "November", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }, { 
 
     "month": "December", 
 
     "values": [0, 0, 0, 0, 0, 0, 0, 0, 0] 
 
    }]; 
 

 

 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Month'); 
 
    //var techlist = @Html.Raw(Json.Encode(ViewBag.techs)); 
 
    for(var j=0; j<jsonData[0].values.length;j++){ 
 
    data.addColumn('number', 'col' + j); 
 
    } 
 

 
    jsonData.forEach(function(row, index) { 
 
    var currentDate = new Date(); 
 
    var rowData = []; 
 
    rowData.push(row.month); 
 
    if (currentDate.getMonth() >= index) { 
 
     rowData = rowData.concat(row.values); 
 
    } else { 
 
     row.values.forEach(function() { 
 
     rowData.push(null); 
 
     }); 
 
    } 
 
    data.addRow(rowData); 
 
    }); 
 

 
    var visualization = new google.visualization.Table(document.getElementById('table')); 
 
    visualization.draw(data, {}); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table"></div>