diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html
index 9d945408..99bf81d1 100644
--- a/src/app/poll-graphic/poll-graphic.component.html
+++ b/src/app/poll-graphic/poll-graphic.component.html
@@ -12,4 +12,9 @@
         {{ "pollGraphic.choiceNotColorblind" | translate }}
     </option>
 </select>
- {{ "pollGraphic.colorblindText" | translate }}
\ No newline at end of file
+ {{ "pollGraphic.colorblindText" | translate }}
+<div>
+    <canvas id="graph" width="300" height="200"></canvas>
+</div>
+ 
+ 
\ No newline at end of file
diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts
index d00e5667..a823fb0d 100644
--- a/src/app/poll-graphic/poll-graphic.component.ts
+++ b/src/app/poll-graphic/poll-graphic.component.ts
@@ -1,23 +1,210 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { Chart } from "chart.js";
 
 @Component({
-  selector: 'framadate-poll-graphic',
-  templateUrl: './poll-graphic.component.html',
-  styleUrls: ['./poll-graphic.component.scss']
+    selector: "framadate-poll-graphic",
+    templateUrl: "./poll-graphic.component.html",
+    styleUrls: ["./poll-graphic.component.scss"]
 })
 export class PollGraphicComponent implements OnInit {
+    isColorblind: boolean;
+    lineChart: Chart;
+    pollData: any;
 
-  isColorblind:boolean;
+    constructor() {}
 
-  constructor() {
-    this.isColorblind = false;
-   }
+    ngOnInit() {
 
-   setColorblind(){
-     this.isColorblind = !this.isColorblind;
-   }
+        //const data = this.formatDataAnswers();
 
-  ngOnInit() {
-  }
+        this.isColorblind = false;
+        this.pollData = [
+            {
+                title: "Q1",
+                answers: [
+                    {
+                        votes: ["yes", "yes", "no"]
+                    },
+                    {
+                        votes: ["no", "yes", "no"]
+                    },
+                    {
+                        votes: ["yes", "yes", "yes"]
+                    }
+                ]
+            },
+            {
+                title: "Q2",
+                answers: [
+                    {
+                        votes: ["no", "no", "yes", "no", "nsp"]
+                    },
+                    {
+                        votes: ["yes", "yes", "nsp", "no", "no", "no"]
+                    },
+                    {
+                        votes: ["yes", "yes", "no", "yes", "nsp", "nsp", "nsp"]
+                    }
+                ]
+            }
+        ];
 
+        this.lineChart = new Chart("graph", {
+            type: "horizontalBar",
+            data: {
+                labels: this.formatDataTitles(),
+                datasets: this.formatDataAnswers()
+                // datasets: [
+                //     {
+                //       label: "Africa",
+                //       backgroundColor: "#3e95cd",
+                //       data: [133,221,783,2478]
+                //     }, {
+                //       label: "Europe",
+                //       backgroundColor: "#8e5ea2",
+                //       data: [408,547,675,734]
+                //     }
+                //   ]
+            },
+            options: {
+                title: {
+                    display: true,
+                    text: "Résultat du sondage"
+                }
+            }
+        });
+            // datasets: [
+            //     {
+            //         label: "Blue",
+            //         fillColor: "blue",
+            //         data: [3, 7, 4]}
+            //     },
+            //     {
+            //         label: "Red",
+            //         fillColor: "red",
+            //         data: [4, 3, 5]
+            //     },
+            //     {
+            //         label: "Green",
+            //         fillColor: "green",
+            //         data: [7, 2, 6]
+            //     }
+            // ]
+        //     // data: {
+        //     //     labels: this.formatDataTitles(),
+        //     //     //datasets : this.formatDataAnswers()
+        //     //     datasets: [
+        //     //         {
+        //     //             backgroundColor: "#3e95cd",
+        //     //             data: [20, 90, 140, 25, 53, 67, 47, 98, 30, 80, 20, 40, 10, 60]
+        //     //         },
+        //     //         {
+        //     //             backgroundColor: "#8e5ea2",
+        //     //             data: 3
+        //     //         }
+        //     //     ]
+        //     ,
+        //     options: {
+        //         scales: {
+        //             yAxes: [
+        //                 {
+        //                     ticks: {
+        //                         beginAtZero: true
+        //                     }
+        //                 }
+        //             ]
+        //         }
+        //     }
+        // });
+    }
+
+    setColorblind() {
+        this.isColorblind = !this.isColorblind;
+    }
+
+    formatDataTitles() {
+        let titlesTab = [];
+        this.pollData.forEach(element => {
+            titlesTab.push(element.title);
+        });
+        //console.log(titlesTab);
+        return titlesTab;
+    }
+
+    formatDataAnswers() {
+        let answersTab = [];
+        this.pollData.forEach(element => {
+            //console.log(answersTab);
+            answersTab.push({
+                backgroundColor: this.getChartColor(answersTab),
+                data: this.getAnswersData(element, answersTab)
+            });
+        });
+        return answersTab;
+    }
+
+    getChartColor(answersTab): string {
+        if (answersTab.length == 0) {
+            return "rgba(0, 255, 0, 0.2)"; //oui
+        }
+        if (answersTab.length == 1) {
+            return "rgba(255, 0, 0, 0.2)"; //non
+        }
+        if (answersTab.length == 2) {
+            return "rgba(0, 255, 255, 0.2)"; //jaune
+        }
+    }
+
+    getAnswersData(elem, answersTab): number {
+        // console.log("ELEM");
+        // console.log(elem);
+        // console.log(elem.answers);
+        if (answersTab.length == 0) {
+            return this.countYes(elem.answers[0].votes);
+        }
+        if (answersTab.length == 1) {
+            return this.countNo(elem.answers[1].votes);
+        }
+        if (answersTab.length == 2) {
+            return this.countNsp(elem.answers[2].votes);
+        }
+    }
+
+    countYes(tab): number {
+        console.log("TAB");
+        console.log(tab);
+        let res: number = 0;
+        for (let i = 0; i < tab.length; i++) {
+            console.log("tab[i] = " + tab[i]);
+            if (tab[i] == "yes") {
+                res = res + 1;
+            }
+        }
+        console.log(res);
+        return res;
+    }
+
+    countNo(tab): number {
+        let res: number = 0;
+        for (let i = 0; i < tab.length; i++) {
+            console.log("tab[i] = " + tab[i]);
+            if (tab[i] == "no") {
+                res = res + 1;
+            }
+        }
+        console.log(res);
+        return res;
+    }
+
+    countNsp(tab): number {
+        let res: number = 0;
+        for (let i = 0; i < tab.length; i++) {
+            console.log("tab[i] = " + tab[i]);
+            if (tab[i] == "nsp") {
+                res = res + 1;
+            }
+        }
+        console.log(res);
+        return res;
+    }
 }