Add Documentation

og-scatter-plot.html

@@ -11,11 +11,22 @@
 <link rel="import" href="css/og-scatter-plot-styles.html">
 
 <!--
-REPLACE THIS TEXT WITH A COMPONENT DESCRIPTION
+Scatter plot implementation using D3
 
 ### Usage
 
-    <og-scatter-plot counter-value="1"></og-scatter-plot>
+    <og-scatter-plot
+      width="960"
+      height="300"
+      show-today-line
+      today="2017-04-30T00:00:00.000Z"
+      today-label="Today"
+      historical-label="Historical"
+      forecast-label="Forecast"
+      legend-alignment="right"
+      data='[{"x":"2017-04-25T00:00:00.000Z","y":["100","324","30","34"]},{"x":"2017-04-26T00:00:00.000Z","y":["233","34","123","565"]},{"x":"2017-04-27T00:00:00.000Z","y":["222","324","523","56"]},{"x":"2017-04-28T00:00:00.000Z","y":["111","234","323","546"]},{"x":"2017-04-29T00:00:00.000Z","y":["434","234","232","766"]},{"x":"2017-04-30T00:00:00.000Z","y":["55","23","567","234"]},{"x":"2017-05-01T00:00:00.000Z","y":["23","445","43","567"]},{"x":"2017-05-02T00:00:00.000Z","y":["123","898","987","12"]}]'
+      axis-data='{"x":{"color":"","axisLabel":"Time","legendLabel":"","inputDateFormat":"%Y-%m-%dT%H:%M:%S.%LZ","tickFormat":"","tickTimeFormat":"","hideGrid":false,"d3NiceType":"timeDay","niceTicks":0,"axisColor":"lightgrey","tickColor":"lightgrey"},"y":{"hideGrid":false,"axisLabel":"Numbers in thousands","axisColor":"lightgrey","tickColor":"lightgrey","niceTicks":6,"tickFormat":"","start":0,"series":[{"color":"green","legendLabel":"Apples","tickFormat":"", "radius": 5},{"color":"fuchsia","legendLabel":"Oranges","tickFormat":""},{"color":"red","legendLabel":"Strawberry","tickFormat":""},{"color":"violet","legendLabel":"Durians","tickFormat":""}]}}'>        
+    </og-scatter-plot>
 
 @element og-scatter-plot
 @blurb REPLACE THIS TEXT WITH A COMPONENT DESCRIPTION