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

James3.4

Messages postés: 24
Date d'inscription: mercredi 8 janvier 2020
Statut: Membre
Dernière intervention: 22 juin 2021

- 13 juin 2021 à 22:55

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 }); 
}

A voir également:

Votre réponse