Comment afficher les données de ma BD sur un graphique c#

Signaler
Messages postés
23
Date d'inscription
mercredi 8 janvier 2020
Statut
Membre
Dernière intervention
16 juin 2021
-
Messages postés
23
Date d'inscription
mercredi 8 janvier 2020
Statut
Membre
Dernière intervention
16 juin 2021
-
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 }); **récupère les différents valeurs**
}

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

1 réponse

Messages postés
16044
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
16 juin 2021
867
bonjour, j'ai l'impression que tu as ouvert trois discussions sur le même sujet.
Messages postés
23
Date d'inscription
mercredi 8 janvier 2020
Statut
Membre
Dernière intervention
16 juin 2021

la premier question du sujet j'avais pas évoluer sur le projet , la deuxième question j'ai trouver utile de crée une base de donnée pour me facilité la tâche c'est ainsi que je reçois ce message sur ma page web lorsque je compile le projet
"{
"myDate":[ "2021-05-10T16:11:44.587", "2021-05-31T08:59:12.113", "2021-06-08T15:50:49.107" ], "myNull":[1,1,1], "mytrue":[1,1,1],
}"