- Refactoring Graph for AudioManagerMonitor

1) Redesign Graph object with method and property.
2) Remove unnecessary code.
3) Adjust offset of line color for AudioManagerGraph.
4) Draw Tranisent line of PulseAudioGraph according to play's status

Signed-off-by: vincent.jeong <vincent.jeong@windriver.com>
Signed-off-by: Jooncheol Park <jooncheol.park@windriver.com>

3 files changed, 341 insertions, 326 deletions

diff --git a/Diagram.qml b/Diagram.qml
index a320881..21f0a53 100644
--- a/Diagram.qml
+++ b/Diagram.qml
@@ -46,7 +46,7 @@ Item {
         onSinkInfoChanged: {
             console.log("onSinkInfoChanged " + sinkinfo.index + " Volume " + sinkinfo.volume);
             Code.savePASinkInfo(sinkinfo);
-	    architectureDiagram.requestPaint();
+            architectureDiagram.requestPaint();
 
             audiomanagerChart.updateData(sinkinfo.name, sinkinfo.index, sinkinfo.volume);
             sinkInfoProcessed(0, sinkinfo.index);
@@ -262,12 +262,13 @@ Item {
             id: audiomanagerChart
             graphName : "AudiomanagerChart"
             title: "Sinks of GENIVI® Audio Manager"
-	    description: "AM's Sink volume changes by Control Plugin"
+            description: "AM's Sink volume changes by Control Plugin"
             anchors.fill: parent
             defaultValue : 0
             maxDataLength: 100
             width: parent.width
             height: parent.height
+            type: Code.GraphType.CONTINUOUS_LINE
         }
     }
 
@@ -281,13 +282,14 @@ Item {
         Graph {
             id: pulseaudioChart
             title: "Sink Inputs of PulseAudio"
-	    description: "PA's Sink Input volume changes"
+            description: "PA's Sink Input volume changes"
             anchors.fill: parent
             graphName : "PulseAudioChart"
             defaultValue : 0
             maxDataLength: 100
             width: parent.width
             height: parent.height
+            type: Code.GraphType.TRANSIENT_LINE
         }
     }
 
@@ -570,7 +572,7 @@ Item {
 			}
 		    );
 		    ctx.save();
-		    ctx.strokeStyle = Code.getGraphNodeData("AudiomanagerChart", sink.name).color;
+		    ctx.strokeStyle = audiomanagerChart.getGraphNodeColor(sink.name);
 		    ctx.beginPath();
 		    ctx.moveTo(tx+tw, ty+(th+th/4)*i+th/2);
 		    ctx.lineTo(tx+tw+tw*2/5, ty+(th+th/4)*i+th/2);
@@ -626,7 +628,7 @@ Item {
 			var sink = Code.paSinks[j];
 			if(sink.index == client.sinkInput.sinkIndex) {
 			    ctx.fillText(" Stream idx: "+sinkInput.index, tx+tw,ty+(th+th/4)*i+th/2);
-			    ctx.strokeStyle = Code.getGraphNodeColor("PulseAudioChart", client.sinkInput.role);
+			    ctx.strokeStyle = pulseaudioChart.getGraphNodeColor(client.sinkInput.role);
 			    ctx.beginPath();
 			    ctx.moveTo(tx+tw,ty+(th+th/4)*i+th/2);
 			    ctx.lineTo(sinkJCX, sinkJCY+(sinkH+sinkH/4)*j+sinkH/2);
diff --git a/Graph.qml b/Graph.qml
index e6434da..4223f06 100644
--- a/Graph.qml
+++ b/Graph.qml
@@ -3,7 +3,6 @@ import com.windriver.ammonitor 1.0
 import "code.js" as Code
 
 Rectangle {
-
     property string title : "No name"
     property string description : "No description"
     property string backgroundColor : "#F0F0F0"
@@ -15,18 +14,37 @@ Rectangle {
     property int maxDataLength : 100
     property int maxValue : 100
     property int graphLineWidth : 1
+    property int type : 0
+    property var graph : null
+    property var graphInfo : ({})
 
     Component.onCompleted: {
-        Code.addGraphDataset(graphName,refreshInterval);
+        graph = new Code.Graph(type);
         refreshTimer.start();
     }
 
+    function getGraphNodeColor(nodeName) {
+        return graph.getGraphNodeColor(nodeName);
+    }
+
     function updateData(name, id, value) {
-        Code.updateGraphNode(graphName, name, id, maxDataLength, value);
+        var index = graph.checkGraphNodeInList(name, id);
+        if (index < 0) {
+            console.log("Try to add graphNode(name: " + name + ", id: " + id + " )");
+            graph.addGraphNode(name, id, maxDataLength, value);
+            return;
+        }
+
+        graph.updateGraphNode(index, value);
     }
 
     function removeData(name, id) {
-        Code.removeGraphNode(graphName, name, id);
+        var index = graph.checkGraphNodeInList(name, id);
+        if (index < 0)
+            return;
+
+        console.log("Try to remove graphNode(name: " + name + ", id: " + id + " )");
+        graph.removeGraphNode(index);
     }
 
     function startTimer() {
@@ -37,25 +55,24 @@ Rectangle {
         refreshTimer.stop();
     }
 
-
     Text {
         text: title
         font.pixelSize: parent.height / 20
-        anchors.bottom: background.top
-        anchors.left: background.left
+        anchors.bottom: canvas.top
+        anchors.left:  canvas.left
     }
 
     Text {
         text: maxValue
         font.pixelSize: parent.height / 30
-        anchors.right: background.left
+        anchors.right: canvas.left
         anchors.rightMargin: 5
         y: parent.height * 0.25
     }
     Text {
         text: maxValue / 2
         font.pixelSize: parent.height / 30
-        anchors.right: background.left
+        anchors.right: canvas.left
         anchors.verticalCenter: parent.verticalCenter
         anchors.rightMargin: 5
         y: parent.height * 0.5
@@ -64,7 +81,7 @@ Rectangle {
         id: volume0
         text: "0"
         font.pixelSize: parent.height / 30
-        anchors.right: background.left
+        anchors.right: canvas.left
         anchors.rightMargin: 5
         y: parent.height * 0.70
     }
@@ -72,175 +89,50 @@ Rectangle {
     Text {
         text: "Volume"
         font.pixelSize: parent.height / 30
-        anchors.right: background.left
+        anchors.right: canvas.left
         anchors.rightMargin: 2
         anchors.top: volume0.bottom
     }
 
     Canvas {
-        id: background
+        id: canvas
         width: parent.width
         height: parent.height
         anchors.fill: parent
         anchors.margins: parent.width / 10
         antialiasing: true
 
-        function drawBackground() {
-            // Get Drawing Context
-            var context = getContext('2d');
-	    context.clearRect(0, 0, width, height);
-            var bgColor = parent.backgroundColor;
-            var bgLineColor = parent.backgroundLineColor;
-            var bgLineWidth = parent.backgroundLineWidth;
-
-            // Fill background color
-            context.save();
-            /*
-            context.beginPath();
-            context.fillStyle = bgColor;
-            context.fillRect(0,0,width, height);
-            context.closePath();
-            context.fill();
-            */
-
-            // Draw Guide Line
-
-            context.translate(0.8,0.8);
-            var horizontalWidth = width / 10;
-            var verticalWidth = height / 10;
-
-            for(var i = 0; i < 10; i++) {
-                if(i==0)
-                    continue
-                // Draw Horizontal Line
-                context.beginPath();
-                context.lineWidth = bgLineWidth;
-                context.strokeStyle = bgLineColor;
-                context.moveTo(0, verticalWidth * i);
-                context.lineTo(width-1, verticalWidth * i);
-                context.closePath();
-                context.stroke();
+        signal refreshGraphNode();
 
-                // Draw Vertical Line
-                context.moveTo(horizontalWidth * i, 0);
-                context.lineTo(horizontalWidth * i, height);
+        Component.onCompleted: {
+            graphInfo.width = width + 91;
+            graphInfo.height = height - 22;
+            graphInfo.maxDataLength = parent.maxDataLength;
+            graphInfo.lineWidth = parent.graphLineWidth;
+            graphInfo.maxValue = parent.maxValue;
+            graphInfo.backgroundColor = parent.backgroundColor;
+            graphInfo.backgroundLineColor = parent.backgroundLineColor;
+            graphInfo.backgroundLineWidth = parent.backgroundLineWidth;
 
-                // Stroke!!
-                context.stroke();
-            }
-
-            // Draw Right, Bottom border line
-
-            context.translate(-0.8, -0.8);
-            var w = width -1;
-            var h = height -1;
-            context.beginPath();
-            context.strokeStyle = "black";
-            context.lineWidth = 1;
-            context.moveTo(0,0);
-            context.lineTo(0, height);
-            context.moveTo(0, verticalWidth * 8);
-            context.lineTo(width, verticalWidth * 8);
-            context.closePath();
-            context.stroke();
-
-            context.restore();
+            graph.loadGraphInfo(graphInfo);
+        }
 
+        onRefreshGraphNode: {
+            graph.refreshGraphNode();
         }
 
-        function drawGraphNode() {
-            var context = getContext('2d');
-            var graphWidth = width-2;
-            var graphHeight = height * (0.6);
-            var nodeList = Code.takeGraphDataset(graphName);
-            var lineColor = "black";
-            var dataDrawingWidth = graphWidth / maxDataLength;
+        onPaint: {
+            var context = canvas.getContext("2d");
+            context.reset();
 
-            if (nodeList.length == 0) {
+            if (graph == null) {
+                console.log("Error: Cannot create graph, " + graph.name);
                 return;
             }
 
-            context.lineWidth = graphLineWidth;
-
-            for (var i = 0; i < nodeList.length; i++) {
-                var node = nodeList[i];
-                var startX = width-1;
-                var startY = height-1;
-                var endX = 0;
-                var endY = 0;
-
-                context.beginPath();
-                lineColor = node.color;
-                context.strokeStyle = lineColor;
-                if (node.removed)
-                    startX = dataDrawingWidth * node.data.length;
-
-                for (var j = node.data.length-1; j > 0; j--) {
-                    var value = node.data[j];
-                    var adjustY = 0;
-                    if (j == node.data.length-1) {
-                        startY = getYPosition(value, graphHeight, adjustY);
-                    }
-
-                    for (var k = 0; k < nodeList.length; k++) {
-                        if (k != i && nodeList[k].data.length >= j && nodeList[k].data[j] == value) {
-                            adjustY = i * graphLineWidth * 2 + 1;
-                            break;
-                        }
-                    }
-
-                    endX = startX - dataDrawingWidth;
-                    endY = getYPosition(value, graphHeight, adjustY);
-
-                    if ((value < 0 && node.data[j-1] > 0) ||
-                            (value < 0 && j == 0) ||
-                            (j!= nodeList.length -1 &&value < 0 && node.data[j+1] > 0)) {
-
-                        context.moveTo(startX, startY);
-                        context.fillStyle = node.color;
-                        context.arc(startX, startY, dataDrawingWidth, 0, Math.PI * 2, true);
-                        context.fill();
-                    } else {
-                        context.moveTo(startX, startY);
-                        context.lineTo(endX, endY);
-                    }
-
-                    context.stroke();
-                    startX = endX;
-                    startY = endY;
-                }
-                context.closePath();
-
-            }
+            graph.drawBackground(context);
+            graph.drawGraphNode(context);
         }
-
-        function getYPosition(value, graphHeight, adjustY) {
-            var pos = 0;
-            if (value < 0)
-                value = value * -1;
-
-            pos = graphHeight - (graphHeight * (value / maxValue));
-
-            if (pos < 0)
-                pos = graphHeight;
-
-            pos = pos + ((height - graphHeight) / 2);
-            pos = pos + adjustY;
-
-            return pos
-        }
-
-        onPaint:{
-            drawBackground();
-            drawGraphNode();
-        }
-    }
-
-    Canvas {
-        id: node
-        width: parent.width
-        height: parent.height
-        anchors.fill: parent
     }
 
     Timer {
@@ -248,17 +140,16 @@ Rectangle {
         interval: parent.refreshInterval
         repeat: true
         onTriggered: {
-            Code.refreshGraphNode(graphName);
-            background.requestPaint();
+            canvas.refreshGraphNode();
+            canvas.requestPaint();
         }
     }
 
     Text {
-	text: "("+description+")"
-	font.pixelSize: parent.height / 30
-	anchors.bottom: parent.bottom
-	anchors.horizontalCenter: parent.horizontalCenter
-	anchors.bottomMargin: parent.height/14
-    }
+        text: "("+description+")"
+        font.pixelSize: parent.height / 30
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottomMargin: parent.height/14
+   }
 }
-
diff --git a/code.js b/code.js
index 911c77c..38d9e1c 100644
--- a/code.js
+++ b/code.js
@@ -5,12 +5,11 @@ var amConnections = [];
 var paSinkInputs = [];
 var paSinks = [];
 var paClients = [];
-var colorListByName = [["MEDIA","red"], ["NAVI","green"],["skype","blue"],["TextToSpeach","orange"], ["reverse","cyan"]];
 
 function saveAMConnection(connection) {
     var exist = false;
 
-    
+
     for (var i = 0; i < amConnections.length; i++) {
         var info = amConnections[i];
 
@@ -173,204 +172,327 @@ function takePASinkInput(index) {
     return null;
 }
 
-var graphDataset = [];
-var colorList = ["red", "orange", "green", "blue", "black", "cyan"];
-var colorListLength = colorList.length;
-
-function Graph() {
-    var name = "";
-    var dataset;
-    var nextColorIndex = 0;
+var GraphType = {
+    CONTINUOUS_LINE: 1,
+    TRANSIENT_LINE: 2,
+};
+
+var GraphLineColor = {
+    colorList : ["red", "orange", "green", "blue", "black", "cyan"],
+    colorListByRole : [["MEDIA","red"],
+                       ["NAVI","green"],
+                       ["skype","blue"],
+                       ["TextToSpeach","orange"],
+                       ["reverse","cyan"]]
 }
 
-function Node() {
-    var nodeName = "";
-    var color ="";
-    var data;
-    var id = -1;
-    var removed = false;
-}
+var Graph = function(type) {
+    var graph = this;
+
+    this.type = type;
+
+    this.colorList = GraphLineColor.colorList;
+    this.colorListByRole = GraphLineColor.colorListByRole;
+
+    this.nodeList = new Array();
+    this.nextColorIndex = 0;
+
+    this.width = 0;
+    this.height = 0;
+    this.backgroundColor = 0;
+    this.maxValue = 0;
+    this.maxDataLength = 0;
+    this.lineWidth = 0;
+    this.backgroundLineColor = 0;
+    this.backgroundLineWidth = 0;
+
+    this.loadGraphInfo = function(info) {
+        this.width = info.width;
+        this.height = info.height;
+        this.maxValue = info.maxValue;
+        this.lineWidth = info.lineWidth;
+        this.maxDataLength = info.maxDataLength;
+        this.backgroundColor = info.backgroundColor;
+        this.backgroundLineColor = info.backgroundLineColor;
+        this.backgroundLineWidth = info.backgroundLineWidth;
+    }
 
-function addGraphDataset(name) {
-    var newGraphDataset = new Graph();
+    this.drawBackground = function(context) {
+        var width = this.width;
+        var height = this.height;
+        var bgColor = this.backgroundColor;
+        var bgLineColor = this.backgroundLineColor;
+        var bgLineWidth = this.backgroundLineWidth;
+
+        // Fill background color
+        context.save();
+
+        // Draw Guide Line
+        context.translate(0.8,0.8);
+        var horizontalWidth = width / 10;
+        var verticalWidth = height / 10;
+
+        for(var i = 0; i < 10; i++) {
+            if (i == 0)
+                continue
+                // Draw Horizontal Line
+            context.beginPath();
+            context.lineWidth = bgLineWidth;
+            context.strokeStyle = bgLineColor;
+            context.moveTo(0, verticalWidth * i);
+            context.lineTo(width-1, verticalWidth * i);
+            context.closePath();
+            context.stroke();
+
+            // Draw Vertical Line
+            context.moveTo(horizontalWidth * i, 0);
+            context.lineTo(horizontalWidth * i, height);
+
+             // Stroke!!
+             context.stroke();
+        }
 
-    newGraphDataset.name = name;
-    newGraphDataset.dataset = new Array();
-    newGraphDataset.nextColorIndex = 0;
+        // Draw Right, Bottom border line
+        context.translate(-0.8, -0.8);
+        var w = width -1;
+        var h = height -1;
+        context.beginPath();
+        context.strokeStyle = "black";
+        context.lineWidth = 1;
+        context.moveTo(0,0);
+        context.lineTo(0, height);
+        context.moveTo(0, (verticalWidth * 8) + 7);
+        context.lineTo(width, (verticalWidth * 8) + 7);
+        context.closePath();
+        context.stroke();
+        context.restore();
+    }
 
-    graphDataset[graphDataset.length] = newGraphDataset;
-}
+    this.drawGraphNode = function(context) {
+        var graphWidth = this.width - 2;
+        var graphHeight = this.height * (0.6);
+        var graphLineWidth = this.lineWidth;
+        var nodeList = this.nodeList;
+        var lineColor = "black";
+        var dataDrawingWidth = graphWidth / this.maxDataLength;
 
-function removeGraphDataset(name) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == name) {
-            graphDataset.splice(i,1);
-            break;
+        if (nodeList.length == 0)
+            return;
+
+        context.lineWidth = graphLineWidth;
+
+        for (var i = 0; i < nodeList.length; i++) {
+            var node = nodeList[i];
+            var startX = graph.width-1;
+            var startY = graph.height-1;
+            var endX = 0;
+            var endY = 0;
+
+            context.beginPath();
+            lineColor = node.color;
+            context.strokeStyle = lineColor;
+            if (node.removed)
+                startX = dataDrawingWidth * node.data.length;
+
+            var offsetY = getOffsetY(node);
+            for (var j = node.data.length-1; j > 0; j--) {
+                var value = node.data[j];
+
+                if (j == node.data.length-1)
+                    startY = getYPosition(value, graphHeight, offsetY);
+
+                endX = startX - dataDrawingWidth;
+                endY = getYPosition(value, graphHeight, offsetY);
+
+                if (value < 0) {
+                    startX = endX;
+                    startY = endY;
+                    continue;
+                }
+
+                context.moveTo(startX, startY);
+                context.lineTo(endX, endY);
+                context.stroke();
+
+                startX = endX;
+                startY = endY;
+            }
+
+            context.closePath();
         }
     }
-}
 
-function addGraphNode(graphName, nodeName, id, maxDatalength, defaultValue) {
-    var newNode = new Node();
-    newNode.data = new Array(maxDatalength);
+    this.checkGraphNodeInList = function(nodeName, id) {
+        for (var index = 0; index < graph.nodeList.length; index++) {
+            var node = graph.nodeList[index];
+            if (node.nodeName == nodeName && node.id == id) {
+                console.log("Found GraphNode, nodeName = " + nodeName +
+                    " id = " + id);
+                return index;
+            }
+        }
 
-    for (var i = 0; i < maxDatalength; i++)
-        newNode.data[i] = defaultValue;
+        return -1;
+    }
 
-    newNode.nodeName = nodeName;
-    newNode.id = id;
+    this.updateGraphNode = function(index, value) {
+        var node = this.nodeList[index];
+        var lastLength = node.data.length;
+        node.data[lastLength-1] = value;
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        var graphdata = graphDataset[i];
-        if (graphdata.name == graphName) {
-            newNode.color = getGraphNodeColor(graphName, nodeName);
-            graphDataset[i].dataset[graphdata.dataset.length] = newNode;
-            return;
-        }
+        console.log("Try to update Volume(" + value + ")" + " for " + node.nodeName);
     }
 
-}
+    this.addGraphNode = function(nodeName, id, maxDatalength, value) {
+        var newNode = new Node(nodeName, id, value, maxDatalength);
 
-function getGraphNodeColor(graphName, nodeName) {
-    console.log(colorList);
-    for (var i = 0; i < colorListByName.length; i++) {
-        if (nodeName == colorListByName[i][0]) {
-            console.log("RETURN FIXED COLOR : " + nodeName + " / " + colorListByName[i][1]);
+        newNode.data = new Array(
+                        (this.type == GraphType.TRANSIENT_LINE) ?
+                        1 : maxDatalength);
 
-            return colorListByName[i][1];
-        }
+        for (var i = 0; i < newNode.data.length; i++)
+            newNode.data[i] = value;
+
+        newNode.color = getGraphListColor(nodeName);
+        this.nodeList.push(newNode);
     }
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            var index = graphDataset[i].nextColorIndex;
-            console.log("NEXT INDEX : " + index);
+    this.removeGraphNode = function(index) {
+        this.nodeList[index].removed = true;
 
-            if (index == colorListLength) {
-                graphDataset[i].nextColorIndex = 0;
-                return colorList[0];
-            }
-            graphDataset[i].nextColorIndex++;
+        if (this.type == GraphType.TRANSIENT_LINE)
+            insertPaddingDataInGraphNode(this.nodeList[index]);
+    }
+
+    this.getGraphNodeColor = function(nodeName) {
+        var nodeColor = null;
 
-            console.log("RETURN DEFAULT VALUE : " + colorList[index]);
-            return colorList[index];
+        for (var i = 0; i < this.nodeList.length; i++) {
+            if (this.nodeList[i].nodeName == nodeName)
+                    nodeColor = this.nodeList[i].color;
         }
+
+        return nodeColor;
     }
 
-    console.log("RETURN DEFAULT VALUE : " + colorList[0]);
-    return colorList[0];
-}
+    this.refreshGraphNode = function() {
+        for (var i = 0; i < this.nodeList.length; i++) {
+            var node = this.nodeList[i];
+            var lastIndex = node.data.length - 1;
+            var lastValue = node.data[lastIndex];
 
-function updateGraphNode(graphName, nodeName, id, maxDatalength, value) {
-
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName && graphDataset[i].dataset !== "undefined") {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                console.log("UPDATE GRAPH NODE : " + graphDataset[i].name + " //// " + graphName + " //// " + nodeName + graphDataset[i].dataset[j].nodeName);
-                if (graphDataset[i].dataset[j].nodeName == nodeName) {
-                    var nodeData = graphDataset[i].dataset[j];
-                    var isRebirth = false;
-
-                    // Node Rebirth
-                    if (nodeData.id != id) {
-                        console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
-                        console.log("REBIRTH NODE : " + nodeName);
-                        console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
-                        var startIndexToFillMinus = graphDataset[i].dataset[j].data.length-1;
-                        var filledData = graphDataset[i].dataset[j].data[startIndexToFillMinus -1] * -1;
-                        for (var k = startIndexToFillMinus; k < maxDatalength-1; k++)
-                            graphDataset[i].dataset[j].data[k] = filledData;
-                        graphDataset[i].dataset[j].removed = false;
-                        graphDataset[i].dataset[j].id = id;
-                        isRebirth = true;
+            if (node.data.length == 0) {
+                eraseGraphNode(node.nodeName, node.id);
+                return;
+            }
+
+            switch (this.type) {
+                case GraphType.CONTINUOUS_LINE:
+                {
+                    node.data.shift();
+                    node.data.push(lastValue);
+                    break;
+                }
+
+                case GraphType.TRANSIENT_LINE:
+                {
+                    if (node.removed) {
+                        node.data.shift();
+                        break;
                     }
 
-                    if (isRebirth || (!nodeData.removed && nodeData.id == id))
-                        graphDataset[i].dataset[j].data[graphDataset[i].dataset[j].data.length] = value;
+                    if (node.data.length > this.maxDataLength) {
+                        console.log("Info: OverFlow data buffer. Try to delete front element");
+                        node.data.shift();
+                    }
 
-                    if (nodeData.data.length > maxDatalength)
-                        graphDataset[i].dataset[j].data.splice(0,nodeData.data.length - maxDatalength);
-                    return;
+                    node.data.push(lastValue);
+
+                    break;
                 }
+
+                default:
+                    console.log("Error: Invalid GraphType in refreshGraphNode");
             }
         }
     }
 
-    addGraphNode(graphName, nodeName, id, maxDatalength, value);
-}
-
-function takeGraphDataset(graphName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        var dataset = graphDataset[i];
-        if (dataset.name == graphName)
-            return dataset.dataset;
+    function insertPaddingDataInGraphNode(node) {
+        var currentLength = node.data.length;
+        var remainingLength = graph.maxDataLength - currentLength;
+        for (var i = 0 ; i < remainingLength ; i++)
+            node.data.unshift(-1);
     }
-    return 0;
-}
 
-function getGraphNodeData(graphName, nodeName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        var dataset = graphDataset[i];
+    function eraseGraphNode(nodeName, id) {
+        var index = graph.checkGraphNodeInList(nodeName, id);
+
+        if (index < 0) return;
 
-	if (dataset.name == graphName) {
-	    for (var j = 0; j < dataset.dataset.length; j++) {
-	        if (dataset.dataset[j].nodeName == nodeName)
-		    return dataset.dataset[j];
-	    }
-	}
+        if (graph.nodeList[index].removed) {
+            console.log("Erase it " + nodeName + " / " + id );
+            graph.nodeList.splice(index, 1);
+        }
     }
-}
 
-function removeGraphNode(graphName, name, id) {
+    function getGraphListColor(nodeName) {
+        var index;
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                if (graphDataset[i].dataset[j].nodeName == name &&
-                        graphDataset[i].dataset[j].id == id) {
-                    console.log("REMOVE CHECK : " + graphName + " / " + name + " / " + id  );
-                    graphDataset[i].dataset[j].removed = true;
-                    return;
-                }
+        for (index = 0; index < graph.colorListByRole.length; index++) {
+            if (nodeName == graph.colorListByRole[index][0]) {
+                console.log("RETURN FIXED COLOR : " +
+                    nodeName + " / " + graph.colorListByRole[index][1]);
+                return graph.colorListByRole[index][1];
             }
         }
+
+        index = graph.nextColorIndex;
+
+        if (index == graph.colorList.length) {
+            console.log("OverFlow color list for node");
+            graph.nextColorIndex = 0;
+            return graph.colorList[0];
+        }
+
+        graph.nextColorIndex++;
+
+        console.log("RETURN DEFAULT VALUE : " + graph.colorList[index]);
+        return graph.colorList[index];
     }
-}
 
-function eraseGraphNode(graphName, name, id) {
-
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                if (graphDataset[i].dataset[j].nodeName == name &&
-                        graphDataset[i].dataset[j].id == id &&
-                        graphDataset[i].dataset[j].removed) {
-                    console.log("ERASE IT " + name + " / " + id );
-                    graphDataset[i].dataset.splice(j,1);
-                    return;
-                }
-            }
+    function getOffsetY(node) {
+        for (var i=0 ; i < graph.colorList.length; i++) {
+            if (node.color == graph.colorList[i])
+                 return i * graph.lineWidth * 2 + 1;
         }
+
+        console.log("Error: Cannot get offset for  " + node);
+
+        return -1;
     }
-}
-function refreshGraphNode(graphName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                var lastIndex = graphDataset[i].dataset[j].data.length-1;
-                var lastValue = graphDataset[i].dataset[j].data[lastIndex];
-                if (lastIndex < 0) {
-                    eraseGraphNode(graphName, graphDataset[i].dataset[j].nodeName, graphDataset[i].dataset[j].id);
-                    return;
-                }
 
-                graphDataset[i].dataset[j].data.splice(0,1);
+    function getYPosition(value, graphHeight, offsetY) {
+        var pos = 0;
 
-                if (!graphDataset[i].dataset[j].removed)
-                    graphDataset[i].dataset[j].data[lastIndex] = lastValue;
-            }
-        }
+        if (value < 0)
+            value = value * -1;
+
+        pos = graphHeight - (graphHeight * (value / graph.maxValue));
+
+        if (pos < 0)
+            pos = graphHeight;
+
+        pos = pos + ((graph.height - graphHeight) / 2);
+        pos = pos + offsetY;
+
+        return pos
     }
 }
 
-
+var Node = function(nodeName, id, value, maxDatalength) {
+    this.nodeName = nodeName;
+    this.id = id;
+    this.removed = false;
+    this.nextColorIndex = 0;
+    this.data = null;
+}