Discussion :

[Alexandre le Grand]

Bonjour,

Mon objectif est défini en intitulé. Mes méthodes en Back-End sont exécutées correctement. Seulement, je ne sais pas comment charger les données sur le graphique avec chartjs. Voic mon code ASPNET CORE:

Code asp :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
using Microsoft.AspNetCore.Mvc;
using GraphiqueDesDonnees.DataLayer;
using GraphiqueDesDonnees.Models;
 
namespace GraphiqueDesDonnees.Controllers
{
    public class DonneesDeVenteController : Controller
    {
        private readonly DbContextGraphique _ctx;
 
        public DonneesDeVenteController(DbContextGraphique ctx)
        {
            _ctx = ctx;
        }
 
        public IActionResult Index()
        {
            return View();
        }
 
        public IActionResult VoirDonneesVente()
        {
          var data =  GetDonneesVentes();
            return View(data);
        }
 
        [HttpPost]
        public List<object> GetDonneesVentes()
        {
            List<object> donnees = new List<object>();
            List<string> labels = _ctx.DonneesGraph.Select(p =>p.NomDuMois).ToList();
 
            donnees.Add(labels);
 
            List<int> NombreDeVente = _ctx.DonneesGraph.Select(p => p.VenteTotal).ToList();
 
            donnees.Add(NombreDeVente);
 
            return donnees;
        }
 
    }
}

Mon code CHTML et AJAX:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<input id="ID" value="Voir le graphique" type="button" />
<div>
    <canvas id="myChart"></canvas>
</div>
 
 
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
<script type="text/javascript">
   
   $(function()
   {
       $("#ID").click(function (){
 
           $.ajax({
               type:"POST",
                     url:"/DonneesDeVente/GetDonneesVentes",
                 data:"",
                 contextType:"application/json; chartset=utf-8",
                 dataType: "json",
                 success: OnSuccessResult,
                 error: OnError
           });
 
            function OnSuccessResult (donnees){
 
               alert("Chargement des données!")
 
               var _data=donnees;
               var _chartLabels = _data[0];
               var _chartData = _data[1];
 
 
                var barColor = ["red", "green","blue","orange","brown","purple","red", "green","blue","orange","brown","purple"];
 
               new Chart("myChart",
               
               {
                   type:"bar",
                   data:
                   {
                       labels:= _chartLabels,
                       datasets: [{
                           backgroundColor: barColor,
                           data:_chartData
                       }]
                   }
               });
           }
 
           function OnError (err){
               alert("Chargement de données échoué!");
           }
       }
   }) 
    
    
    
</script>

Un coup de main salvateur est vivement souhaité.

Cordialement!

[mathieu]

êtes vous sur d'avoir besoin de faire une requête http pour charger les données ? ou cela fait partie de vos essais ?

ce que j'ai souvent vu pour l'utilisation d'une base de données est que la première partie de la page est en asp et va générer une variable javascript dans le contenu html :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script>
const donnees = [["valeur 1", "valeur 2"], [12, 45]];
</script>

et ensuite la deuxième partie de la page est en html et javascript et va générer le graphique à partir des données de cette variable.