Ionic display chartjs data from json http request


#1

Im building an ionic app to display dashboard (pie chart) by retrieving the data from url/http request. Here is my code in ts file calling data from the url and i managed to display this in a table form using e.g. {{ items.data }} in html file:

public items : Array<any> = [];

ionViewWillEnter() : void{
      this.load();
   }

 load() : void{
          this.http.get('http://localhost/test/retrieve-data.php')
          .subscribe((data : any) =>{
             console.dir(data);
             this.items = data;
          },
          (error : any) =>{
             console.dir(error);
          });
       }

My problem here is i want to retrieve data from ONE row and display it in pie chart. For example, this is that one row that i wanna fetch:

[{"id":9,"twitter_name":"Max Payne","positive_tweets":24,"negative_tweets":14,"total_tweets":38,"pos_percent":63,"neg_percent":37}]

I want to display a pie chart that shows values of pos_percent and neg_percent.

Here is what ive been doing and still stuck on calling the row data:

@ViewChild('pieChart') pieChart;

public pieChartEl : any;

createPieChart()
   {

      this.pieChartEl           = new Chart(this.pieChart.nativeElement,
      {
         type: 'pie',
         data: {
             labels: ["Positive","Negative"],
             datasets: [{
                 data                  : [],
                 duration              : 2000,
                 easing                : 'easeInQuart',
                 backgroundColor       : "rgba(54, 116, 152, 0.5)",
                 hoverBackgroundColor  : "rgba(160, 116, 152, 0.5)"
             }]
         },
         options : {
            maintainAspectRatio: false,
            layout: {
               padding: {
                  left     : 50,
                  right    : 0,
                  top      : 0,
                  bottom   : 0
               }
            },
            animation: {
               duration : 5000
            }
         }
      });



      this.chartLoadingEl = this.pieChartEl.generateLegend();
   }

ionViewDidLoad()
   {
      this.createPieChart();
   }

How do i fetch that data?