diff --git a/src/DataManipulator.ts b/src/DataManipulator.ts
index 7f622955cc..261923aa9f 100644
--- a/src/DataManipulator.ts
+++ b/src/DataManipulator.ts
@@ -1,20 +1,31 @@
 import { ServerRespond } from './DataStreamer';
 
 export interface Row {
-  stock: string,
-  top_ask_price: number,
-  timestamp: Date,
+  price_abc: number,
+      price_def: number,
+      ratio: number,
+      upperbound: number,
+      lowerbound: number,
+      triggerAlert: number | undefined,
+      timestamp: Date,
 }
 
 
 export class DataManipulator {
-  static generateRow(serverResponds: ServerRespond[]) {
-    return serverResponds.map((el: any) => {
+  static generateRow(serverResponds: ServerRespond[]) : Row {
+    const priceABC = (serverResponds[0].top_ask.price + serverResponds[0].top_bid.price)/2;
+    const priceDEF = (serverResponds[1].top_ask.price + serverResponds[1].top_bid.price)/2;
+    const ratio = priceABC/priceDEF;
+    const upperBound = 1 + 0.05;
+    const lowerBound = 1 - 0.05;
       return {
-        stock: el.stock,
-        top_ask_price: el.top_ask && el.top_ask.price || 0,
-        timestamp: el.timestamp,
+        price_abc: priceABC,
+        price_def: priceDEF,
+        ratio,
+        upperbound: upperBound,
+        lowerbound: lowerBound,
+        triggerAlert: (ratio > upperBound || ratio < lowerBound) ? ratio : undefined,
+        timestamp: serverResponds[0].timestamp > serverResponds[1].timestamp ? serverResponds[0].timestamp : serverResponds[1].timestamp,
       };
-    })
   }
 }
diff --git a/src/Graph.tsx b/src/Graph.tsx
index 277797d933..f98ea51db0 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Table } from '@finos/perspective';
+import { Table, TableData } from '@finos/perspective';
 import { ServerRespond } from './DataStreamer';
 import { DataManipulator } from './DataManipulator';
 import './Graph.css';
@@ -23,9 +23,12 @@ class Graph extends Component<IProps, {}> {
     const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
 
     const schema = {
-      stock: 'string',
-      top_ask_price: 'float',
-      top_bid_price: 'float',
+      price_abc: 'float',
+      price_def: 'float',
+      ratio: 'float',
+      upperbound: 'float',
+      lowerbound: 'float',
+      triggerAlert: 'float',
       timestamp: 'date',
     };
 
@@ -36,13 +39,15 @@ class Graph extends Component<IProps, {}> {
       // Load the `table` in the `<perspective-viewer>` DOM reference.
       elem.load(this.table);
       elem.setAttribute('view', 'y_line');
-      elem.setAttribute('column-pivots', '["stock"]');
+      elem.setAttribute('columns', '["ratio", "lowerbound", "upperbound", "triggerAlert"]');
       elem.setAttribute('row-pivots', '["timestamp"]');
-      elem.setAttribute('columns', '["top_ask_price"]');
       elem.setAttribute('aggregates', JSON.stringify({
-        stock: 'distinctcount',
-        top_ask_price: 'avg',
-        top_bid_price: 'avg',
+        price_abc: 'avg',
+        price_def: 'avg',
+        ratio: 'avg',
+        upperbound: 'avg',
+        lowerbound: 'avg',
+        triggerAlert: 'avg',
         timestamp: 'distinct count',
       }));
     }
@@ -50,9 +55,9 @@ class Graph extends Component<IProps, {}> {
 
   componentDidUpdate() {
     if (this.table) {
-      this.table.update(
+      this.table.update([
         DataManipulator.generateRow(this.props.data),
-      );
+      ] as unknown as TableData);
     }
   }
 }