minor fixes to demos, updated readme

README.md

@@ -89,15 +89,15 @@ See http://c3js.org/examples.html for examples of how to use C3.
 ```
 
 ### Component Properties
-The properties match the corresponding C3 objects found in the [C3 Documentation](https://c3js.org/gettingstarted.html#generate).  As shown in the C3 documentation, most of the objects (i.e. bar, axis, size, etc) can be included in the data object.
+The properties match the corresponding C3 objects found in the [C3 Documentation](https://c3js.org/gettingstarted.html#generate).  As documented, most C3 settings (i.e. bar, axis, size, etc) can be included in the data object.
 
-The component properties break them out to make it simplify chart configuration.  Note: The chart type is _always_ assigned in the chart data object.
+The component properties break out the settings to simplify chart configuration.  Note: The chart type is **always** assigned in the chart data object.
 
 The properties with an asterisk are the only ones that are updated on the chart when a property change is triggered when `notifyPropertyChange` is called.  See examples in the dummy app.
 
 Property | Description | Example
 ---------|-------------|--------
-c3chart | Points to the c3 chart created by the component.  Any C3 api method can be executed using this property.  See the methods below, chart object and drill down examples | chart.hide("data1")
+c3chart | Points to the C3 chart generated by the component.  Any C3 api method can be executed using this property.  See the methods section below, chart object and drill down examples | chart.hide("data1")
   data* | C3 data [object](https://c3js.org/gettingstarted.html#generate). Chart data is mutable after the chart is created
   axis* | C3 axis [object](https://c3js.org/reference.html#axis-rotated). See C3 examples for combining with data object.  Chart axis are mutable after the chart is created
   regions | need to test may need to be with data
@@ -117,17 +117,17 @@ c3chart | Points to the c3 chart created by the component.  Any C3 api method ca
   padding | Set padding around graph.  See docs(https://c3js.org/reference.html#padding-top)  | padding: { top: 20}
   title | Set chart title | title: { text: "This is my chart" }
   color* | Used to assign color [properties](https://c3js.org/reference.html#color-pattern). The chart colors are mutable after chart creation
-  transition | Equivalent to [transition.duration](https://c3js.org/reference.html#transition-duration).  Default duration is 350ms
-  unloadDataBeforeChange | When set to true the data will be unloaded before new data is loaded with didUpdateAttrs().  This is useful for pie and donut charts.  Can now also manage data loading with .load()/.unload() methods on exposed c3chart
-  oninit | c3 chart event, see events section below | oninit=(action "init")
-  onrendered | c3 chart event, see events section below | onrendered=(action "init")
-  onmouseover | c3 chart event, see events section below | onmouseover=(action "mouseover")
-  onmouseout | c3 chart event, see events section below | onmouseout=(action "mouseout")
-  onresize | c3 chart event, see events section below | onresize=(action "resize")
-  onresized | c3 chart event, see events section below | onresized=(action "resized")
+  transition | Equivalent to [transition.duration](https://c3js.org/reference.html#transition-duration).  Default duration is 350ms.  Transition times less than 300ms may not render properly.  Use chart.load() and .unload() if shorter times are required
+  unloadDataBeforeChange | When set to true the data will be unloaded before new data is loaded with didUpdateAttrs().  Useful for pie and donut chart data changes.  Also do data changes with .load() and .unload()
+  oninit | C3 chart event, see events section below | oninit=(action "init")
+  onrendered | C3 chart event, see events section below | onrendered=(action "init")
+  onmouseover | C3 chart event, see events section below | onmouseover=(action "mouseover")
+  onmouseout | C3 chart event, see events section below | onmouseout=(action "mouseout")
+  onresize | C3 chart event, see events section below | onresize=(action "resize")
+  onresized | C3 chart event, see events section below | onresized=(action "resized")
 
 ### C3 Methods
-If you assign a value to the c3chart property, you can use most of the C3 [methods](https://c3js.org/reference.html#api-focus) found in the documentation.  Not all the methods have been tested but all should work as documented.
+If you assign a controller property to the c3chart property, you can use most of the C3 api [methods](https://c3js.org/reference.html#api-focus).  Not all the methods have been tested.
 
 templates/someroute.hbs
 ```
@@ -194,7 +194,7 @@ export default Controller.extend({
 ```
 
 ### C3 Events
-c3 emits two types of events - [chart](https://c3js.org/reference.html#oninit) and [data](https://c3js.org/reference.html#data-onclick) events.  Chart events can be assigned to a closure action via a property.  Data events **must** be assigned an action in the data object.
+C3 emits two types of events - [chart](https://c3js.org/reference.html#oninit) and [data](https://c3js.org/reference.html#data-onclick) events.  Chart events can be assigned to a closure action via a property.  Data events **must** be assigned an action in the data object.
 
 For connivence, the chart object is passed into all chart events.  An example of a chart and data event is shown below.  Note the use of `bind` for tying actions to data events. See the dummy app for more examples
 

tests/dummy/app/controllers/donut.js

@@ -42,7 +42,7 @@ export default Controller.extend({
         ]);
       this.notifyPropertyChange("data");
     },
-      1500);
+      500);
   },
 
   data: {

tests/dummy/app/controllers/gauge.js

@@ -1,5 +1,6 @@
-import { later } from "@ember/runloop";
 import Controller from "@ember/controller";
+import { later } from "@ember/runloop";
+import { computed }  from '@ember/object';
 /* eslint ember/avoid-leaking-state-in-ember-objects: "off" */
 
 export default Controller.extend({
@@ -13,21 +14,21 @@ export default Controller.extend({
         ["data", 10]
       ]);
       this.notifyPropertyChange("data");
-    }, 1000);
+    }, 500);
 
     later(this, () => {
       this.set("data.columns", [
         ["data", 50]
       ]);
       this.notifyPropertyChange("data");
-    }, 2000);
+    }, 1000);
 
     later(this, () => {
       this.set("data.columns", [
           ["data", 70]
       ]);
       this.notifyPropertyChange("data");
-    }, 3000);
+    }, 1500);
 
     later(this, () => {
       this.set("data.columns", [
@@ -41,7 +42,7 @@ export default Controller.extend({
           ["data", 100]
       ]);
       this.notifyPropertyChange("data");
-    }, 5000);
+    }, 2000);
 
   },
 
@@ -71,7 +72,7 @@ export default Controller.extend({
     animate(){
       this.animate();
     }
-  }
+  },
 
   size: computed(function() {
     return {

tests/dummy/app/controllers/index.js

@@ -1,7 +1,6 @@
 import Controller from "@ember/controller";
 
 export default Controller.extend({
-
   chart: null,
 
   // Data source in route index.js

tests/dummy/app/controllers/pie.js

@@ -36,7 +36,7 @@ export default Controller.extend({
         ]);
       this.notifyPropertyChange("data");
     },
-      1500);
+      500);
   },
 
   // iris data from R

tests/dummy/app/controllers/timeseries.js

@@ -14,7 +14,7 @@ export default Controller.extend({
         this.data.columns.push(["data3", 400, 500, 450, 700, 600, 500]);
         this.notifyPropertyChange("data");
       },
-      1000
+      500
     );
   },