Merge pull request #96 from apinf/feature/sample-chartUsage-demo

sample chart demo with package added

Author: elijah

.gitignore

@@ -3,3 +3,4 @@
 .meteor/.id
 settings.json
 .idea/
+settings.json

.meteor/packages

@@ -56,5 +56,6 @@ yogiben:admin
 timmyg:wow
 tsega:skrollr
 accounts-github
+chart:chart
 brylie:api-umbrella
 percolate:synced-cron

.meteor/versions

@@ -40,6 +40,7 @@ cfs:storage-adapter@0.2.2
 cfs:tempstore@0.1.5
 cfs:upload-http@0.0.20
 cfs:worker@0.1.4
+chart:chart@1.0.1-beta.4
 check@1.0.5
 cmather:handlebars-server@0.2.0
 coffeescript@1.0.6

client/layouts/home_layout/chart_layout.html

@@ -0,0 +1,43 @@
+<template name="chartLayout">
+    <div class="layout master-layout ">
+        {{> navbar}}
+
+        <div class="sampleChart">
+            <canvas id="canvasChart"></canvas>
+        </div>
+    </div>
+    <script>
+        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+        var lineChartData = {
+            labels : ["January","February","March","April","May","June","July"],
+            datasets : [
+                {
+                    label: "My First dataset",
+                    fillColor : "rgba(220,220,220,0.2)",
+                    strokeColor : "rgba(220,220,220,1)",
+                    pointColor : "rgba(220,220,220,1)",
+                    pointStrokeColor : "#fff",
+                    pointHighlightFill : "#fff",
+                    pointHighlightStroke : "rgba(220,220,220,1)",
+                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+                },
+                {
+                    label: "My Second dataset",
+                    fillColor : "rgba(151,187,205,0.2)",
+                    strokeColor : "rgba(151,187,205,1)",
+                    pointColor : "rgba(151,187,205,1)",
+                    pointStrokeColor : "#fff",
+                    pointHighlightFill : "#fff",
+                    pointHighlightStroke : "rgba(151,187,205,1)",
+                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+                }
+            ]
+        }
+        window.onload = function(){
+            var ctx = document.getElementById("canvasChart").getContext("2d");
+            window.myLine = new Chart(ctx).Line(lineChartData, {
+                responsive: true
+            });
+        }
+    </script>
+</template>

client/style/base.import.less

@@ -22,4 +22,4 @@ button.navbar-toggle {
 
 #iron-router-progress.spinner:before {
     border-color : darken(@brand-primary,20%);
-}
+}

client/style/chart.css

@@ -0,0 +1,9 @@
+.sampleChart{
+    position: absolute;
+    top:100px;
+    left:100px;
+    right:100px;
+}
+#canvasChart{
+    height:400px;
+}

lib/router/main.coffee

@@ -13,3 +13,7 @@ Router.map ->
       ]
     data: ->
       posts: Posts.find({},{sort: {createdAt: -1}}).fetch()
+
+  @route "chart",
+      path: "/chart"
+      layoutTemplate: "chartLayout"