Google Gantt -Diagramm auf Rasierseiten mit SQL [geschlossen] ⇐ JavaScript

[Anonymous]

Google Gantt -Diagramme ... Sie haben wahrscheinlich von ihnen gehört und sie vielleicht sogar verwendet. Sie sind leicht auf eine Rasierer -Seite zu werfen, wenn Sie statische Daten für die Zeilen bereitstellen. Aber ich möchte die Daten aus einer Datenbanktabelle auf unserem SQL -Server ziehen und das Gantt -Diagramm füllen. Ich habe unzählige Artikel über die Verwendung von PHP- und JSON -Dateien gelesen, keiner hat für mich gearbeitet. Ich kann die Daten dazu bringen, eine HTML -Tabelle zu bevölkern, damit ich weiß, dass die Daten vorhanden sind. Ich kann es einfach nicht richtig formatieren, um im Gantt -Diagramm zu zeigen. Ich werde keinen meiner Code veröffentlichen, weil es wirklich nur eine Reihe von Snippets von den Zügen ist, die ich online gefunden habe, einschließlich der Verwendung von Ajax -Anrufen, um Daten zu erhalten. Kann mich bitte jemand auf ein modernes Arbeitsbeispiel (mit Quellcode) eines Google Gantt -Diagramms verweisen, in dem Daten aus einer Datenbank gezogen werden, um das Diagramm erfolgreich zu füllen? Dies kann entweder auf Rasierseiten oder auf Blazor erfolgen. Jede Hilfe wäre sehr geschätzt. Beispiel, das funktioniert, und dann kann ich nicht zur Arbeit kommen ... < /p>
Diese mit statischen Daten in den Zeilen funktioniert: < /p>

Code: Select all

[u]Written Report Chart[/u]


google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');

data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);

var options = {
height: 275
};

var chart = new google.visualization.Gantt(document.getElementById('WrittenReport'));

chart.draw(data, options);
}


< /code>
Und hier ist der Code für denjenigen, der nicht funktioniert:
in meinem 'cshtml' ...  < /p>
@page
@model ProdSchedPortal.Pages._Testing.AnotherTestModel
@{
}




google.charts.load('current', { 'packages': ['gantt'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "?handler=ListFilter",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (response) {
// var data = new google.visualization.DataTable(JSON.parse(response));

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');

const formattedRows = response.map((row, index) => {
return [
String(index + 1),
`${row["OpDesc"]} (${row["JobNum"]})`,
new Date(row["StartDate"]),
new Date(row["JobOper_DueDate"]),
null,
parseFloat(row["EstProdHours"]) || 0,
null
];
});
data.addRows(formattedRows);

// for (var i = 0; i < response.d.length; i++) {
//     var taskId = response.d[i][0].toString();
//     var taskname = response.d[i][1].toString();
//     var resource = response.d[i][2].toString();
//     var startDate = new Date(response.d[i][3]).toString();
//     var enddate = new Date(response.d[i][4]).toString();
//     var duration = parseInt(response.d[i][5]);
//     var percentageComplete = parseInt(response.d[i][6]);
//     var dependencies = response.d[i][7].toString();
//     data.addRows([[taskId, taskname, resource, startDate, enddate, duration, percentageComplete, dependencies]]);
// }

var options = {
height: 400, width: 500, gantt: { trackHeight: 30 }
};

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}, error: function (response) {
alert(response.responseText);
}
});
}


< /code>
Und in meinem 'HTML', was ich für dieses Beispiel statische Zeilendaten erstellt habe ...  < /p>
public JsonResult? OnPostListFilter()
{
// Get the DataTable from Database.
DataTable dt = new DataTable();
dt.Columns.Add("Task ID", typeof(string));
dt.Columns.Add("Task Name", typeof(string));
dt.Columns.Add("Resource", typeof(string));
dt.Columns.Add("Start Date", typeof(string));
dt.Columns.Add("End Date", typeof(string));
dt.Columns.Add("Duration", typeof(int));
dt.Columns.Add("Percent Complete", typeof(int));
dt.Columns.Add("Dependencies", typeof(string));

dt.Rows.Add("2014Spring", "Spring 2014", "spring", new DateTime(2014, 2, 22, 0, 30, 0), new DateTime(2014, 5, 20, 6, 30, 0), null, 100, null);
dt.Rows.Add("2014Summer", "Summer 2014", "summer", new DateTime(2014, 5, 21, 6, 45, 0), new DateTime(2014, 8, 20, 7, 0, 0), null, 100, null);
dt.Rows.Add("2014Autumn", "Autumn 2014", "autumn", new DateTime(2014, 8, 21, 7, 4, 0), new DateTime(2014, 11, 20, 7, 30, 0), null, 100, null);
dt.Rows.Add("2014Winter", "Winter 2014", "winter", new DateTime(2014, 11, 21, 7, 30, 0), new DateTime(2015, 2, 21, 8, 30, 0), null, 100, null);
dt.Rows.Add("2015Spring", "Spring 2015", "spring", new DateTime(2015, 2, 22), new DateTime(2015, 5, 20), null, 50, null);
dt.Rows.Add("2015Summer", "Summer 2015", "summer", new DateTime(2015, 5, 21), new DateTime(2015, 8, 20), null, 0, null);
dt.Rows.Add("2015Autumn", "Autumn 2015", "autumn", new DateTime(2015, 8, 21), new DateTime(2015, 11, 20), null, 0, null);
dt.Rows.Add("2015Winter", "Winter 2015", "winter", new DateTime(2015, 11, 21), new DateTime(2016, 2, 21), null, 0, null);
dt.Rows.Add("Football", "Football Season", "sports", new DateTime(2014, 8, 4), new DateTime(2015, 1, 1), null, 100, null);
dt.Rows.Add("Baseball", "Baseball Season", "sports", new DateTime(2015, 2, 28), new DateTime(2015, 9, 20), null, 14, null);
dt.Rows.Add("Basketball", "Basketball Season", "sports", new DateTime(2014, 9, 28), new DateTime(2015, 5, 20), null, 86, null);
dt.Rows.Add("Hockey", "Hockey Season", "sports", new DateTime(2014, 9, 8), new DateTime(2015, 5, 21), null, 89, null);

List chartData = new List();
for (int i = 0; i < dt.Rows.Count; i++)
{
chartData.Add(new object[] {
dt.Rows[i][0], dt.Rows[i][1], dt.Rows[i][2], dt.Rows[i][3],dt.Rows[i][4],
dt.Rows[i][5]==DBNull.Value?0:dt.Rows[i][5], dt.Rows[i][6], dt.Rows[i][7]==DBNull.Value?"":dt.Rows[i][7]
});
}

return new JsonResult(chartData);
}

Alles, was ich erhalte, ist ein leerer Alarm und einen leeren Bildschirm ...