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' }] };