More polish on the graph example

1 files changed, 15 insertions, 8 deletions

diff --git a/examples/graph/graph.qml b/examples/graph/graph.qml
index 8abdea8..38e399e 100644
--- a/examples/graph/graph.qml
+++ b/examples/graph/graph.qml
@@ -9,10 +9,10 @@ Canvas {
 
     Column {
         id:sliders
-        anchors.verticalCenter: parent.verticalCenter
+        y:30
         anchors.right: parent.right
-        anchors.margins: 10
-        spacing:16
+        anchors.margins: 30
+        spacing:12
 
         Slider { nodecolor: "#88aaaa" ; onValueChanged:{updateCanvas()}}
         Slider { nodecolor: "#aa8888" ; onValueChanged:{updateCanvas()}}
@@ -29,7 +29,7 @@ Canvas {
 
         var grad = ctx.createLinearGradient(0, 0, 0, height);
         grad.addColorStop(0,   '#fff'); // red
-        grad.addColorStop(0.5, '#eee'); // yellow
+        grad.addColorStop(1, '#ccc'); // yellow
         ctx.fillStyle = grad;
 
         ctx.fillRect(0, 0, width, height);
@@ -77,11 +77,18 @@ Canvas {
             xPos += horizSpace;
         }
 
-        ctx.strokeStyle = "rgb(110,110,110)";
-
 	// Draw Axis
-	ctx.beginPath();
-	ctx.moveTo(graphPadding, graphPadding);
+
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "rgba(0, 0, 0, 0.05)"
+        for (var y = 0; y < height - graphPadding; y += height/20) {
+          ctx.moveTo(graphPadding, y);
+          ctx.lineTo(width - graphPadding, y);
+        }
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(graphPadding, graphPadding);
         ctx.lineTo(graphPadding,cHeight - graphPadding);
         ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
 	ctx.stroke();