The JSON data returned by the following controller is structured as shown below:
[
{"classification":"CON","count":2},
{"classification":"PUB","count":1},
{"classification":"SENS","count":1}
]
However, Google Charts requires the data to be in the following format:
[
['classification','count'],
['CON',2],
['PUB',1],
['SENS',1]
]
Below is the code snippet of the controller being used:
[Produces("application/json")]
[Route("api/Reports")]
public class ReportsController : Controller
{
private readonly Documint.Models.DocumintDBContext _context;
public ReportsController(Documint.Models.DocumintDBContext context)
{
_context = context;
}
[HttpGet("MDReport", Name = "rep")]
public JsonResult Report()
{
var q3 = _context.Masterdocs
.Where(m => m.CorpId == "AFRICUREIND")
.GroupBy(s => new { classi = s.Classification })
.Select(x => new { classification = x.Key.classi, count = x.Count() }).ToList();
JsonResult result = Json(q3);
return Json(q3);
}
}
Due to the mismatch in data format, certain operations need to be performed:
[classification,count,CON,2,PUB,1,SENS,1]
After processing the array in the last loop, the data should look like this:
[['classification','count'],['CON',2],['PUB',1],['SENS',1]]
Kindly take note of the single quotes at the start and end of the array which are not desired.
Here is the relevant JavaScript and HTML code for reference.
// Load the Visualization API and the piechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
type: 'GET',
url: "/api/Reports/MDReport",
dataType: 'JSON',
async: false
}).responseText;
alert(jsonData);
var split1 = jsonData.split("},");
var split2, split3;
var splitlist=[];
var k,x,y;
for (k = 0; k < split1.length; k++)
{
split2 = split1[k].split(",");
for (x = 0; x < split2.length; x++)
{
split3 = split2[x].split(":");
for (y = 0; y < split3.length; y++)
{
splitlist.push(split3[y]);
}
}
}
for (var j = 0; j < splitlist.length; j++)
{
splitlist[j] = splitlist[j].replace('{', '');
splitlist[j] = splitlist[j].replace('}', '');
splitlist[j] = splitlist[j].replace('"', '');
splitlist[j] = splitlist[j].replace('"', '');
}
var finallist = [];
finallist.push(splitlist[0]);
finallist.push(splitlist[2]);
for (var n = 1; n < splitlist.length; n = n + 2)
{
finallist.push(splitlist[n]);
}
alert(finallist);
for (var m = 0; m < finallist.length; m=m+2)
{
finallist[m] = "['"+finallist[m]+"'";
if (isNaN(finallist[m + 1])) {
finallist[m + 1] = "'" + finallist[m + 1] + "']";
}
else
{
finallist[m + 1] = finallist[m + 1]+"]";
}
}
alert(finallist);
var data = google.visualization.arrayToDataTable(finallist);
var options = {
title: 'Master Documents',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="height:500px;width:500px"></div>
If someone could provide guidance on the necessary corrections, it would be greatly appreciated as I am struggling to identify the error.