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

Question

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

Signaler

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:

Comment afficher un graphique lié une base de données en C# ?
SQL : Affiche des informations sur la base de données spécifiée ou sur toutes - Guide
Afficher image enregistrer dans une base de données ✓ - Forum - Java
Afficher les tables d'une base de données dans la liste déroulante d'un formulai ✓ - Forum - Visual Basic 6
Afficher le contenu d'une base de données access avec visual basic 6 ✓ - Forum - Visual Basic 6
Afficher et imprimer des graphiques de poids provenant d'une base de donnees - Codes sources - Visual Basic / VB.NET (Base de Donnees)

Answer 1

Votre réponse