diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html
index e65b41a..135d1ab 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.html
+++ b/src/app/dashboard/more-graphs-and-tables.component.html
@@ -45,7 +45,7 @@
         </div>
       </div>
       <div>
-        <canvas baseChart
+        <canvas baseChart #supplierChart
                 [datasets]="supplierMonthChartData"
                 [options]="supplierMonthChartOptions"
                 [colors]="sampleColours"
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts
index 8a3c5c5..a6ca7ab 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.ts
+++ b/src/app/dashboard/more-graphs-and-tables.component.ts
@@ -1,7 +1,8 @@
-import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
 import {ApiService} from '../providers/api-service';
-import {Color} from 'ng2-charts';
+import {BaseChartDirective, Color} from 'ng2-charts';
 import {CurrencyPipe} from '@angular/common';
+import {ChartType} from "chart.js";
 
 @Component({
   templateUrl: 'more-graphs-and-tables.component.html',
@@ -17,6 +18,9 @@ export class MoreStuffComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.loadYearSpend();
+    this.loadSupplierBubble();
+    this.loadSupplierHistory();
   }
 
   public showLegend = true;
@@ -41,18 +45,33 @@ export class MoreStuffComponent implements OnInit {
   /*
    * Supplier Bubble Chart Setup
    */
-  public supplierBubbleChartType = 'bubble';
+
+  private loadSupplierBubble() {
+    this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
+      result => {
+        console.log(result.data);
+        let graph_data = [];
+        result.data.map(item => {
+          graph_data.push({
+            t: item.date,
+            r: (item.value / 100000) + 5,
+            supplier: item.seller,
+            y: item.count,
+            value: item.value,
+            count: item.count,
+          });
+        });
+        console.log(graph_data);
+        this.supplierBubbleChartData[0].data = graph_data;
+      }
+    )
+  }
+
+  public supplierBubbleChartType: ChartType = 'bubble';
   public supplierBubbleChartData: any[] = [
     {
-      data: [
-        {t: '20180123', y: 54.34, r: 32, supplier: 'Tims', count: 4},
-        {t: '20180101', y: 123.34, r: 123, supplier: 'Daves', count: 12},
-        {t: '20180314', y: 11.345, r: 33, supplier: 'erry', count: 13},
-        {t: '20180615', y: 112.6, r: 22, supplier: 'qwert', count: 124},
-        {t: '20180714', y: 91234.5, r: 8, supplier: 'Bobs', count: 1234},
-        {t: '20181230', y: 23.12, r: 67, supplier: 'Ben Bobs', count: 4},
-      ],
-      label: ["Series A"],
+      data: [],
+      label: ["Spend"],
       backgroundColor: 'green',
       borderColor: 'blue',
       hoverBackgroundColor: 'purple',
@@ -66,17 +85,10 @@ export class MoreStuffComponent implements OnInit {
       xAxes: [{
         type: 'time',
         time: {
-          parser: 'YYYYMMDD',
           unit: 'month'
         }
       }],
-      yAxes: [
-        {
-          ticks: {
-            min: 0,
-          }
-        }
-      ]
+      yAxes: []
     },
     tooltips: {
       callbacks: {
@@ -90,18 +102,38 @@ export class MoreStuffComponent implements OnInit {
   private bubbleTooltipCallback(tooltipItem: any, data: any) {
     let dataset = data.datasets[tooltipItem.datasetIndex];
     let value = dataset.data[tooltipItem.index];
-    return `${value.supplier}: ${this.currencyPipe.transform(value.y, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
+    return `${value.supplier}: ${this.currencyPipe.transform(value.value, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
+  }
+
+
+  private loadYearSpend() {
+    this.api.loadMiscUrl('organisation/external/year_spend').subscribe(
+      result => {
+        let value_data = [];
+        let count_data = [];
+
+        console.log(result.data);
+        result.data.map(item => {
+          value_data.push({
+            t: item.date,
+            y: item.value,
+          });
+
+          count_data.push({
+            t: item.date,
+            y: item.count,
+          });
+        });
+
+        this.yearSpendChartData[0].data = value_data;
+        this.yearSpendChartData[1].data = count_data;
+      }
+    )
   }
 
   public yearSpendChartData: any[] = [
     {
-      data: [
-        {t: '20180101', y: 123.34},
-        {t: '20180314', y: 11.345},
-        {t: '20180615', y: 112.6},
-        {t: '20180714', y: 91234.5},
-        {t: '20181230', y: 23.12},
-      ],
+      data: [],
       label: ["Value"],
       fill: false,
       borderColor: 'red',
@@ -110,13 +142,7 @@ export class MoreStuffComponent implements OnInit {
       yAxisID: 'y-value',
     },
     {
-      data: [
-        {t: '20180101', y: 12},
-        {t: '20180314', y: 11},
-        {t: '20180615', y: 1},
-        {t: '20180714', y: 9},
-        {t: '20181230', y: 23},
-      ],
+      data: [],
       label: ["Count"],
       fill: false,
       borderColor: 'blue',
@@ -131,7 +157,6 @@ export class MoreStuffComponent implements OnInit {
       xAxes: [{
         type: 'time',
         time: {
-          parser: 'YYYYMMDD',
           unit: 'month'
         }
       }],
@@ -158,24 +183,38 @@ export class MoreStuffComponent implements OnInit {
     }
   ];
   public yearSpendChartLabels: string[] = [];
-  public yearSpendChartType = 'line';
+  public yearSpendChartType: ChartType = 'line';
 
   randomData() {
     return Math.random();
   }
 
+  @ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective;
+
+  private loadSupplierHistory() {
+    this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
+      result => {
+        let labels = [];
+        let year = [];
+        let half = [];
+        let quarter = [];
+        result.data.map(item => {
+          labels.push(item.name);
+          year.push(item.year_total);
+          half.push(item.half_total);
+          quarter.push(item.quarter_total);
+        });
+        this.supplierMonthChartData[0].data = quarter.slice(0,10);
+        this.supplierMonthChartData[1].data = half.slice(0,10);
+        this.supplierMonthChartData[2].data = year.slice(0,10);
+        this.supplierMonthChartLabels = labels.slice(0,10);
+      }
+    )
+  }
+
   public supplierMonthChartData: any[] = [
     {
-      data: [
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-      ],
+      data: [],
       label: ["3 Month"],
       fill: false,
       borderColor: 'red',
@@ -183,16 +222,7 @@ export class MoreStuffComponent implements OnInit {
       hoverBackgroundColor: 'red',
     },
     {
-      data: [
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-      ],
+      data: [],
       label: ["6 Month"],
       fill: false,
       borderColor: 'red',
@@ -200,16 +230,7 @@ export class MoreStuffComponent implements OnInit {
       hoverBackgroundColor: 'red',
     },
     {
-      data: [
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-        this.randomData(),
-      ],
+      data: [],
       label: ["12 Month"],
       fill: false,
       borderColor: 'red',
@@ -218,30 +239,13 @@ export class MoreStuffComponent implements OnInit {
     },
   ];
   public supplierMonthChartOptions: any = {
+    //maintainAspectRatio: false,
     responsive: true,
     scales: {
       xAxes: [],
       yAxes: []
     },
   };
-  public supplierMonthChartLabels: string[] = [
-    'some name',
-    'another name',
-    'more names',
-    'again',
-    'some',
-    'random',
-    'names'
-  ];
-  public supplierMonthChartType = 'horizontalBar';
-
-  private setChartData(dataCat: any) {
-    // now we just need some data and it will display!
-  }
-
-  // functions
-
-
-  // SAMPLE chart data
-
+  public supplierMonthChartLabels: string[] = [];
+  public supplierMonthChartType: ChartType = 'horizontalBar';
 }
diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html
index 52a53fd..87e9e38 100644
--- a/src/app/dashboard/suppliers.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -48,6 +48,13 @@
             </li>
           </ul>
           </pagination-template>
+          <select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
+            <option>10</option>
+            <option>20</option>
+            <option>50</option>
+            <option>100</option>
+            <option>200</option>
+          </select>
         </div>
         <div *ngIf="!supplierListAvailable" class="card-block">
           No Suppliers available.
diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts
index e3cbf0f..c0cfa2d 100644
--- a/src/app/dashboard/suppliers.component.ts
+++ b/src/app/dashboard/suppliers.component.ts
@@ -11,6 +11,7 @@ import { PaginationInstance } from 'ngx-pagination';
 export class SuppliersComponent implements OnInit, AfterViewInit {
   @Output() public onClick = new EventEmitter();
   @Input() public categories: any;
+  public perPage: number = 10;
 
   supplierList: any;
   supplierListAvailable = false;
@@ -19,7 +20,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
 
   public paginateConfig: PaginationInstance = {
     id: 'transpaginate',
-    itemsPerPage: 10,
+    itemsPerPage: this.perPage,
     currentPage: 1,
     totalItems: 0
   };
@@ -37,7 +38,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
   }
 
   loadSuppliers(logPage: number) {
-    this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe(
+    this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage).subscribe(
       result => {
         this.supplierList = result.suppliers;
         if (this.supplierList) {
diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts
index b09bcfd..5ac5c2a 100644
--- a/src/app/providers/api-service.ts
+++ b/src/app/providers/api-service.ts
@@ -144,7 +144,17 @@ export class ApiService {
     );
   }
 
-  public externalSuppliers(data, sortBy, sortDir) {
+  public loadMiscUrl(extra_url) {
+    const key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/v1/' + extra_url,
+      {
+        session_key : key,
+      }
+    );
+  }
+
+  public externalSuppliers(data, sortBy, sortDir, perPage) {
     const key = this.sessionKey;
     return this.http.post<any>(
       this.apiUrl + '/v1/organisation/external/suppliers',
@@ -152,7 +162,8 @@ export class ApiService {
         session_key : key,
         page : data,
         sort_by : sortBy,
-        sort_dir : sortDir
+        sort_dir : sortDir,
+        per_page : perPage
       }
     );
   }