Merge branch 'master' of https://github.com/pubnub/eon-c3

readme.md

@@ -3,41 +3,13 @@ EON Realtime Charts
 
 Realtime animated graphs with [PubNub](http://pubnub.com) and [C3](http://c3js.org/).
 
-## Examples
-
-#### Spline Chart
-
 ![](http://i.imgur.com/MRK20Kb.gif)
 
-[View Example](https://github.com/pubnub/eon-chart/blob/master/examples/spline.html)
-
-#### Gauge Chart
-
-![](http://i.imgur.com/hO4pwDp.gif)
-
-[View Example](https://github.com/pubnub/eon-chart/blob/master/examples/gauge.html)
-
-#### Donut Chart
-
-![](http://i.imgur.com/YDydwZi.gif)
-
-[View Example](https://github.com/pubnub/eon-chart/blob/master/examples/donut.html)
-
-#### Bar Chart
-
-![](http://i.imgur.com/cgecpFw.gif)
-
-[View Example](https://github.com/pubnub/eon-chart/blob/master/htdocs/pubnub/bar.html)
-
-#### Transforming Chart
-
-![](http://i.imgur.com/6sUQEDX.gif)
-
-[View Example](https://github.com/pubnub/eon-chart/blob/master/examples/transform.html)
-
 ## Quickstart
 
 ```html
+<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon-chart.js"></script>
+<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/lib/eon.css" />
 <div id="chart"></div>
 <script>
   eon.chart({
@@ -54,45 +26,41 @@ Parameter | Value | Default
 | subscribe_key | Your [PubNub subscribe_key](http://www.pubnub.com/knowledge-base/categories/licensing-api-keys) | ```demo```
 | channel | Your [PubNub channel name](http://www.pubnub.com/docs/javascript/overview/data-push.html). | ```false```
 | generate | Your [C3 chart generation config](http://c3js.org/gettingstarted.html#generate). | ```undefined```
-| flow | C3 flow configuration. You should only be concerned with ```flow.duration``` which will adjust how long the animation between updates lasts. | ```350```
+| flow | C3 flow configuration. You should only be concerned with ```flow.duration``` which will adjust how long the animation between updates lasts. | ```{duration: 100}```
 | limit | The size of your buffer. How many values to display on the chart before shifting the first value off and appending a new value. This is not native to C3. | ```10```
 | history | Fill the buffer by using PubNub history call to retrieve last ```limit``` messages. Requires [PubNub storage](http://www.pubnub.com/how-it-works/storage-and-playback/) to be enabled. | ```false```
+| message | A function to call everytime a PubNub message is recieved. See [PubNub subscribe](http://www.pubnub.com/docs/javascript/api/reference.html#subscribe) | function(message, env, channel){} |
+| connect | A function to call when PubNub makes a connection. See [PubNub subscribe](http://www.pubnub.com/docs/javascript/api/reference.html#subscribe) | function(){} |
 
 ## Simple Example
 
-Include the Javascripts within your file.
-
-```js
-<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-<script src="../js/c3.js"></script>
-<script src="../js/pubnub-c3.js"></script>
-```
-
 Plug your normal C3 config into the ```generate``` param. Supply a PubNub channel in `channel`` param. ```eon.chart``` returns the normal c3 chart object.
 
 ```html
 <div id="chart"></div>
 <script>
-eon.chart({
-  channel: "c3-spline",
-  generate: {
-    bindto: '#chart',
-    data: {
-      x: 'x',
-      columns: [],
-      labels: true
+  eon.chart({
+    history: false,
+    channel: "c3-spline",
+    flow: {
+      duration: 100
     },
-    axis : {
-      x : {
-        type : 'timeseries',
-        tick: {
-          format: '%H:%M:%S'
+    generate: {
+      bindto: '#chart',
+      data: {
+        x: 'x',
+        labels: true
+      },
+      axis : {
+        x : {
+          type : 'timeseries',
+          tick: {
+            format: '%H:%M:%S'
+          }
         }
       }
     }
-  }
-});
+  });
 </script>
 ```
 
@@ -142,11 +110,3 @@ Check out our docs for more info:
 eon-chart works will all supported graph types in C3. Just check out the examples above. 
 
 You can learn more about customizing your graph from [the official C3 docs](http://c3js.org/gettingstarted.html#customize).
-
-## Fast data with slow animations
-
-If you happen to publish data at a higher frequency than your ```flow.duration``` than messages will get backed up in quene. An error will be displayed in the console if this is happening. You can fix this by decreasing your ```flow.duration```. 
-
-## Message Quene
-
-Incoming messages from PubNub are stored in a message quene until they are rendered. You can use ```options.rate``` to configure how often messages in the quene will be rendered. ```rate``` is set to ```10``` (ms) by default which will render messages immediately.