dashboard

accueil.php

 <section>
 
-<canvas id="myChart"></canvas>
-
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 
-<script>
-Chart.defaults.global.title.display = true;
-Chart.defaults.global.title.text = "Consommation de calories";
-</script>
 
-<script>
-    var ctx = document.getElementById('myChart').getContext('2d');
-    var chart = new Chart(ctx, {
-        // The type of chart we want to create
-        type: 'line',
+<div class="chart">
+        <div class="row" style="margin:20px;width:150%;height:150%">
+            <div id="cardChartCalories" class="card cardChart">
+                <div class="card-header" style="color:black">
+                    Qunantité de calories consommée par jour
+                </div>
+                <div class="card-body">
+                    <canvas id="chartCalories"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div id="cardChartRepartition" class="card cardChart">
+                <div class="card-header" style="color:black">
+                    Répartition
+                </div>
+                <div class="card-body">
+                    <canvas id="chartRegime"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
 
-        // The data for our dataset
-        data: {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [{
-                label: 'My First dataset',
-                backgroundColor: 'rgb(255, 99, 132)',
-                borderColor: 'rgb(255, 99, 132)',
-                data: [0, 10, 5, 2, 20, 30, 45]
-            }]
-        },
 
-        // Configuration options go here
-        options: {}
+<script>
+new Chart(document.getElementById("chartCalories"),{
+    "type":"bar",
+    "data":{"labels":["January","February","March","April","May","June","July"],
+            "datasets":[{
+                        "label":"calories en Kcal",
+                        "data":[65,59,80,81,56,55,40],
+                        "borderColor":"rgb(255, 205, 86)"}]},
+    "options":{}
     });
+new Chart(document.getElementById("chartRegime"),{
+    "type":"pie",
+    "data":{"labels":["Viande","Légumes/Fruits","Féculents"],
+            "datasets":[{
+                        "label":"Quantité de consommation",
+                        "data":[300,50,100],
+                        "backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]}]}});
 </script>
 
 </section>