Comment faire pour afficher les données de ma base de données sur un graphique c

Signaler
-
Bonjour,
je travaille en ASP.NET
Je veux faire un graphique line ou bar en C# en fonction des données de la BD qui affiche l'année et le graphe de VoyageEffectuer et VoyageAnnuler pour chaque mois.

1.View:


<canvas id="myChart" class="w-100 mt-4" height="400"></canvas> /* j'ai ici mon graphe*/
@section ScriptsBlock {
<script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js" integrity="sha256-qSIshlknROr4J8GMHRlW3fGKrPki733tLq+qeMCR05Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" integrity="sha256-IvM9nJf/b5l2RoebiFno92E5ONttVyaEEsdemDC6iQA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha256-arMsf+3JJK2LoTGqxfnuJPFTU4hAK57MtIPdFpiHXOU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<script>
function GetJSON_Simple(){
var resp = [];
$.ajax({
type: "GET",
url: '/WebVoyage/Graph',
async: false,
contentType: "application/json",
Null: function (data) {
resp.push(data);
},
error: function (req, status, error) {
// do something with error
alert("error");
}
});
return resp;
}
var simpleData = GetJSON_Simple();
var ctx = document.getElementById("myChart")
var lineChartData = {
labels: simpleData[0].myDate, /*je recupere les dates dans ma BD*/
datasets: [{
label: 'VoyageEffectuer',
borderColor: "MediumSeaGreen",
backgroundColor: "MediumSeaGreen",
fill: false,
data: simpleData[0].myNull, /* Je recupere les valeur null ,VoyageEffectuer*/
yAxisID: 'y-axis-1',
}, {
label: 'VoyageAnnuler',
borderColor: "Tomato",
backgroundColor: "Tomato",
fill: false,
data: simpleData[0].myTrue, /* Je recupere les valeur null ,VoyageAnnuler*/
yAxisID: 'y-axis-2'
}]
};

window.myLine = Chart.Line(ctx, {

data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Processes'
},
scales: {
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',

// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});

</script>
}


2.Controller:


public async Task<ActionResult> Index()
{
var date = await _context.Web.Select(j => j.DateEnregistrement).Distinct().ToListAsync();
var acheter = _context.Web
.Where(j => j.VoyageEffectuer == null)
.GroupBy(j => j.DateEnregistrement)
.Select(group => new {
DateEnregistrement = group.Key,
Count = group.Count()
});
var countNull = acheter.Select(a => a.Count).ToArray();
var annuler = _context.Web
.Where(j => j.VoyageAnnuler == true)
.GroupBy(j => j.DateEnregistrement)
.Select(group => new {
DateEnregistrement = group.Key,
Count = group.Count()
});
var countTrue = annuler.Select(a => a.Count).ToArray();
return new JsonResult(new { myDate=date, myNull = countNull, mytrue = countTrue });
}




3.Tableau de la base de données du graphique:

DateEnregistrement VoyageEffectuer VoyageAnnuler
08/06/2021 18:14:42 NULL True
08/06/2021 17:55:54 NULL True
10/05/2021 16:11:44 NULL True