Comment afficher un graphique lié une base de données en C# ?

Signaler
Messages postés
24
Date d'inscription
mercredi 8 janvier 2020
Statut
Membre
Dernière intervention
22 juin 2021
-
Bonjour,
Je veux faire un graphique en ligne ou une barre en C# liée à la BD qui affiche l'année et compte et affiche les nombres de voyages effectués dans le mois qui sont vrais puis une autre ligne qui affiche l'année et compte et affiche les nombres de voyages annulés dans le mois qui sont vrais.

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 | False | True |
| 08/06/2021 17:55:54 | TRUE | False |
| 10/05/2021 16:11:44 | False | True |