diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 43ec8c1..f77ab3d 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -9,23 +9,14 @@ import { DataType } from '../shared/data-types.enum';
   templateUrl: 'dashboard.component.html'
 })
 export class DashboardComponent implements OnInit {
+
+  // Snippet data
+  public customersThisMonth: number;
+  public moneySpentThisMonth: number;
+  public pointsTotal: number;
+  public averageTransactionToday: number;
+
   shuffledArray: any;
-  showGraph: any;
-  showSnippet: any;
-  customersThisMonth: any;
-  moneySpentThisMonth: any;
-  pointsTotal: any;
-  averageTransactionToday: any;
-  customersThisWeek: any;
-  customersLastWeek: any;
-  customersLastMonth: any;
-  customersLastYear: any;
-  pointsThisWeek: any;
-  pointsLastWeek: any;
-  percentOfCustomersSector: any;
-  noOfCustomersSector: any;
-  percentOfLocalSuppliers: any;
-  percentOfSingleCompetitorLocalSuppliers: any;
 
   public widgetList = [
     {
@@ -73,49 +64,6 @@ export class DashboardComponent implements OnInit {
   private api: ApiService,
   ) {
   this.shuffle = this.shuffledArray;
-  this.api.graph_data(undefined)
-    .subscribe(
-      result => {
-        console.log(result);
-        // Return what data to show 4 of
-        this.showGraph = result.elementstoshow.graphs;
-        this.showSnippet = result.elementstoshow.snippets;
-        // Percentage Chart
-        this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal;
-        this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal;
-        // Percentage Chart 2
-        this.percentOfCustomersSector = result.data.customersinsector.percent;
-        this.noOfCustomersSector = result.data.customersinsector.customerno;
-        // Chart 1
-        this.customersThisWeek = result.data.customersthisweek;
-        this.lineChart1Data[0].data = this.customersThisWeek.customerno;
-        this.lineChart1Labels = this.customersThisWeek.day;
-        // Chart 4
-        this.customersLastYear = result.data.customerslastyear;
-        this.lineChart4Data[0].data = this.customersLastYear.customerno;
-        this.lineChart4Labels = this.customersLastYear.month;
-        // Chart 5
-        this.pointsThisWeek = result.data.pointsthisweek;
-        this.lineChart5Data[0].data = this.pointsThisWeek.points;
-        this.lineChart5Labels = this.pointsThisWeek.day;
-        // Chart 6
-        this.pointsLastWeek = result.data.pointslastweek;
-        this.barChart1Data[0].data = this.pointsLastWeek.points;
-        this.barChart1Labels = this.pointsLastWeek.day;
-        // Chart 7
-        this.customersLastWeek = result.data.customerslastweek;
-        this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno;
-        this.lineChart6Labels = this.customersLastWeek.day;
-        // Chart 8
-        this.customersLastMonth = result.data.customerslastmonth;
-        this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno;
-        this.lineChart7Labels = this.customersLastMonth.day;
-        // Chart 9
-        this.customersLastYear = result.data.customerslastyear;
-        this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno;
-        this.lineChart8Labels = this.customersLastYear.month;
-      }
-    ),
   this.api.breadcrumb_data(undefined)
     .subscribe(
       result => {
@@ -152,20 +100,10 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  public brandPrimary = '#20a8d8';
   public brandSuccess = '#4dbd74';
   public brandInfo = '#63c2de';
-  public brandWarning = '#f8cb00';
   public brandDanger = '#f86c6b';
 
-  // dropdown buttons
-  public status: { isopen } = { isopen: false };
-  public toggleDropdown($event: MouseEvent): void {
-    $event.preventDefault();
-    $event.stopPropagation();
-    this.status.isopen = !this.status.isopen;
-  }
-
   // convert Hex to RGBA
   public convertHex(hex: string, opacity: number) {
     hex = hex.replace('#', '');
@@ -186,332 +124,6 @@ export class DashboardComponent implements OnInit {
     console.log(e);
   }
 
-  // lineChart1
-  public lineChart1Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series A'
-    }
-  ];
-  public lineChart1Labels: Array<any> = [];
-  public lineChart1Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        gridLines: {
-          color: 'transparent',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          fontSize: 2,
-          fontColor: 'transparent',
-        }
-
-      }],
-      yAxes: [{
-        display: false,
-        ticks: {
-          display: false,
-        }
-      }],
-    },
-    elements: {
-      line: {
-        borderWidth: 1
-      },
-      point: {
-        radius: 4,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart1Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandPrimary,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart1Legend = false;
-  public lineChart1Type = 'line';
-
-  // lineChart4
-  public lineChart4Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart4Labels: Array<any> = [];
-  public lineChart4Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        gridLines: {
-          color: 'transparent',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          fontSize: 2,
-          fontColor: 'transparent',
-        }
-
-      }],
-      yAxes: [{
-        display: false,
-        ticks: {
-          display: false,
-        }
-      }],
-    },
-    elements: {
-      line: {
-        tension: 0.00001,
-        borderWidth: 1
-      },
-      point: {
-        radius: 4,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart4Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart4Legend = false;
-  public lineChart4Type = 'line';
-
-  // lineChart6
-  public lineChart6Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart6Labels: Array<any> = [];
-  public lineChart6Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        gridLines: {
-          color: 'transparent',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          fontSize: 2,
-          fontColor: 'transparent',
-        }
-
-      }],
-      yAxes: [{
-        display: false,
-        ticks: {
-          display: false,
-        }
-      }],
-    },
-    elements: {
-      line: {
-        tension: 0.00001,
-        borderWidth: 1
-      },
-      point: {
-        radius: 4,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart6Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart6Legend = false;
-  public lineChart6Type = 'line';
-
-  // lineChart7
-  public lineChart7Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart7Labels: Array<any> = [];
-  public lineChart7Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false
-      }],
-      yAxes: [{
-        display: false
-      }]
-    },
-    elements: {
-      line: {
-        borderWidth: 2
-      },
-      point: {
-        radius: 2,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart7Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart7Legend = false;
-  public lineChart7Type = 'line';
-
-  // lineChart8
-  public lineChart8Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart8Labels: Array<any> = [];
-  public lineChart8Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        gridLines: {
-          color: 'transparent',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          fontSize: 2,
-          fontColor: 'transparent',
-        }
-
-      }],
-      yAxes: [{
-        display: false,
-        ticks: {
-          display: false,
-        }
-      }],
-    },
-    elements: {
-      line: {
-        tension: 0.00001,
-        borderWidth: 1
-      },
-      point: {
-        radius: 4,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart8Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart8Legend = false;
-  public lineChart8Type = 'line';
-
-  // lineChart5
-  public lineChart5Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series A'
-    }
-  ];
-  public lineChart5Labels: Array<any> = [];
-  public lineChart5Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false
-      }],
-      yAxes: [{
-        display: false
-      }]
-    },
-    elements: {
-      line: {
-        borderWidth: 2
-      },
-      point: {
-        radius: 0,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart5Colours: Array<any> = [
-    {
-      backgroundColor: 'rgba(255,255,255,.2)',
-      borderColor: 'rgba(255,255,255,.55)',
-    }
-  ];
-  public lineChart5Legend = false;
-  public lineChart5Type = 'line';
-
-
-  // barChart1
-  public barChart1Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series A'
-    }
-  ];
-  public barChart1Labels: Array<any> = [];
-  public barChart1Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false,
-        barPercentage: 0.6,
-      }],
-      yAxes: [{
-        display: false
-      }]
-    },
-    legend: {
-      display: false
-    }
-  };
-  public barChart1Colours: Array<any> = [
-    {
-      backgroundColor: 'rgba(255,255,255,.3)',
-      borderWidth: 0
-    }
-  ];
-  public barChart1Legend = false;
-  public barChart1Type = 'bar';
-
   // mainChart
 
   public random(min: number, max: number) {
@@ -600,154 +212,6 @@ export class DashboardComponent implements OnInit {
   public mainChartLegend = false;
   public mainChartType = 'line';
 
-  // social box charts
-
-  public socialChartData1: Array<any> = [
-    {
-      data: [65, 59, 84, 84, 51, 55, 40],
-      label: 'Facebook'
-    }
-  ];
-  public socialChartData2: Array<any> = [
-    {
-      data: [1, 13, 9, 17, 34, 41, 38],
-      label: 'Twitter'
-    }
-  ];
-  public socialChartData3: Array<any> = [
-    {
-      data: [78, 81, 80, 45, 34, 12, 40],
-      label: 'LinkedIn'
-    }
-  ];
-  public socialChartData4: Array<any> = [
-    {
-      data: [35, 23, 56, 22, 97, 23, 64],
-      label: 'Google+'
-    }
-  ];
-
-  public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  public socialChartOptions: any = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false,
-      }],
-      yAxes: [{
-        display: false,
-      }]
-    },
-    elements: {
-      line: {
-        borderWidth: 2
-      },
-      point: {
-        radius: 0,
-        hitRadius: 10,
-        hoverRadius: 4,
-        hoverBorderWidth: 3,
-      }
-    },
-    legend: {
-      display: false
-    }
-  };
-  public socialChartColours: Array<any> = [
-    {
-      backgroundColor: 'rgba(255,255,255,.1)',
-      borderColor: 'rgba(255,255,255,.55)',
-      pointHoverBackgroundColor: '#fff'
-    }
-  ];
-  public socialChartLegend = false;
-  public socialChartType = 'line';
-
-  // sparkline charts
-
-  public sparklineChartData1: Array<any> = [
-    {
-      data: [35, 23, 56, 22, 97, 23, 64],
-      label: 'Clients'
-    }
-  ];
-  public sparklineChartData2: Array<any> = [
-    {
-      data: [65, 59, 84, 84, 51, 55, 40],
-      label: 'Clients'
-    }
-  ];
-
-  public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  public sparklineChartOptions: any = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false,
-      }],
-      yAxes: [{
-        display: false,
-      }]
-    },
-    elements: {
-      line: {
-        borderWidth: 2
-      },
-      point: {
-        radius: 0,
-        hitRadius: 10,
-        hoverRadius: 4,
-        hoverBorderWidth: 3,
-      }
-    },
-    legend: {
-      display: false
-    }
-  };
-  public sparklineChartDefault: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: '#d1d4d7',
-    }
-  ];
-  public sparklineChartPrimary: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: this.brandPrimary,
-    }
-  ];
-  public sparklineChartInfo: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: this.brandInfo,
-    }
-  ];
-  public sparklineChartDanger: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: this.brandDanger,
-    }
-  ];
-  public sparklineChartWarning: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: this.brandWarning,
-    }
-  ];
-  public sparklineChartSuccess: Array<any> = [
-    {
-      backgroundColor: 'transparent',
-      borderColor: this.brandSuccess,
-    }
-  ];
-
-
-  public sparklineChartLegend = false;
-  public sparklineChartType = 'line';
-
-
   ngOnInit(): void {
     // generate random values for mainChart
     for (let i = 0; i <= this.mainChartElements; i++) {