[docs] add more pages

- [init] annotations
- basic chart
- [outline] stacked and mixed
- [outline] trends and regions

docs/_sidebar.md

@@ -4,14 +4,14 @@
 * Axis charts
   * [A basic chart](basic/basic_chart.md)
   * [Trends and Region Charts](basic/trends_regions.md)
-  * [Adding more datasets](basic/multiple_datasets.md)
+  * [Annotations and Tooltip format](basic/annotations.md)
+  * [Stacked and Mixed Charts](basic/stacked_and_mixed.md)
 
 * Aggregation Charts
-  * [Aka Sliced Diagrams](basic/aggr_sliced_diags.md)
+  * [Pies and Percentages](basic/aggr_sliced_diags.md)
 
-* Update data
-  * [Single Points]()
-  * [Entire Data]()
+* Update state
+  * [Modify data](update_data/modify_data.md)
 
 * Events
   * [Navigation]()

docs/basic/annotations.md

@@ -0,0 +1,44 @@
+Annotations are for special values (like range points). They are defined within the `data` property itself.
+
+## Markers
+
+To highlight certain values on the Y axis, `yMarkers` can be set. They will shown ad dotted lines on the graph.
+
+```js
+data = {
+	// labels: [],
+	// datasets: [],
+	yMarkers: [
+		{
+			label: "Marker",
+			value: 43,
+			options: { labelPos: 'right' }
+		}
+	]
+}
+```
+
+[demo only marker]
+
+## Regions
+
+2D counterparts to markers, they have a `start` and `end` instead of value:
+
+```js
+yRegions: [
+	{
+		label: "Region",
+		start: -10,
+		end: 50,
+		options: { labelPos: 'left' }
+	},
+],
+```
+Shown as a a greyed out area between the extremes.
+
+[demo only region]
+
+## Tooltips
+
+Tooltips are by default
+[demo format]

docs/basic/basic_chart.md

@@ -10,7 +10,7 @@ data = {
 }
 ```
 
-Plug that in with a type `bar`, a color and height,
+Rendering it doesn't require much more that that. Plug the data in with a [type]() `bar`, with an optional [color]() and [height]():
 
 ```js
 new frappe.Chart( "#chart", {
@@ -22,34 +22,54 @@ new frappe.Chart( "#chart", {
 ```
 <div class="demo" id="bar-basic-1"></div>
 
-And similarly, a `line` chart:
+And similarly, a `line` chart is data-wise homomorphic to a bar chart:
 
 ```js
 type:'line'
 ```
 <div class="demo" id="line-basic-1"></div>
 
-## Tweaks
+## Adding more datasets
 
-Axes lines are configurable. By default they are long `span`ning lines, but can also be short `tick`s:`
+A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
 
 ```js
-axisOptions: {
-	xAxisMode: 'tick' // default: 'span'
-},
+data: {
+    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    datasets: [
+      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+    ]
+}
 ```
-<div class="demo" id="bar-axis-tick"></div>
+<div class="demo" id="multi-dataset-line-bar"></div>
+
+## Responsiveness
 
-The bar <b>width</b> can be set by defining the <b>ratio of the space</b> between bars to the bar width.
+Frappe Charts are responsive, as they rerender all the data in the current available container width. To demonstrate, let's take the example of setting the [bar width]() for bar charts.
+
+In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
 
 ```js
 barOptions: {
 	spaceRatio: 0.2 // default: 1
 },
 ```
+Try resizing the window to see the effect, with different ratio values.
 <div class="demo" id="bar-barwidth"></div>
 
-So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.
+## More Tweaks
+
+Axis lines define a chart presentation. By default they are long `span`ning lines, but to give prominence to data points, X and/or Y axes can also be short `tick`s:
+
+```js
+axisOptions: {
+	xAxisMode: 'tick' // default: 'span'
+},
+```
+<div class="demo" id="bar-axis-tick"></div>
+
+Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
 
 ```js
 lineOptions: {
@@ -58,4 +78,4 @@ lineOptions: {
 ```
 <div class="demo" id="line-dotsize"></div>
 
-Next up, we'll discover how multiple datasets can behave in different charts.
+These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section.

docs/basic/heatmap.md

@@ -1 +1,26 @@
-## Day-based Month-wise data
+## Day-based Month-wise data
+
+The heatmap is a representation of day-wise data (similar to [the GitHub Contribution Graph]()). It spaces out data values linearly, across 5 levels (zero data kept exclusive).
+
+In this case, the data has three parts,
+
+```js
+let heatmapData = {
+	dataPoints: {
+		"1426744959": 20,
+		"1463673055": 113,
+		"1476892421": 57,
+		// ...
+	},
+	start: startDate, // a JS date object
+	end: endDate
+}
+```
+(We are working on making the start date and end date implicit and optional). [tip]
+
+The chart is rendered by the type `heatmap`:
+
+```js
+
+```
+

docs/basic/multiple_datasets.md

@@ -1,18 +0,0 @@
-## Multiple datasets
-
-A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
-
-```js
-data: {
-    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-    datasets: [
-      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
-      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
-    ]
-}
-```
-<div class="demo" id="multi-dataset-line-bar"></div>
-
-All the `lineOptions` and `barOptions` apply to mutliple datasets as well.
-
-In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.

docs/basic/stacked_and_mixed.md

@@ -0,0 +1,47 @@
+## Adding more datasets
+
+As we have seen, chart can have [multiple datasets](). In an axis chart, every dataset is represented individually.
+
+```js
+data: {
+    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    datasets: [
+      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+    ]
+}
+```
+<div class="demo" id="multi-dataset-line-bar"></div>
+
+## Stacked Bar Chart
+
+Bars have two ways to show multiple data point values. The property [`stacked`]() in `barOptions` renders a stacked bar chart instead of the default adjacent bars:
+
+```js
+barOptions: {
+  stacked: 1    // default 0
+}
+```
+
+[stacked/adjacent]
+
+
+## Mixed Bar/Line Chart
+Each dataset can also have a different `chartType`, which if specified, will take precedence over the `type` property.
+
+```js
+data: {
+    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    datasets: [
+      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+    ]
+}
+```
+
+
+All the `lineOptions` and `barOptions` apply to mix and match datasets as well.
+
+[mix and match demo, no buttons]
+
+In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.

docs/basic/trends_regions.md

@@ -1,11 +1,67 @@
-`lineOptions` have a bunch of other properties too. Region charts are ...
+## Plotting Trends
+Line charts a great to show trends data. Given that such data usually involves a large number of data points. Changing some properties of a default line chart can reduce clutter.
 
+The X axis is a continuous (usually time) axis.
+
+
+## Data points
+For a homomorphic to plot
+
+Or you could just choose to show only the dots instead
+
+
+
+## Region Chart
+
+Or a more subtle way to show gradation of values.
+
+
+
+
+## Combinations
 ```js
 lineOptions: {
 	dotSize: 8 // default: 4
 },
 ```
 
+Here's a demo using different combinations of the line options.
+
 <div class="demo" id="line-trends-region-toggle"></div>
 
-Next up, we'll see how multiple datasets play out in charts.
+Next up, we'll play around with more than one datasets play out in charts.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

docs/getting_started/quick_start.md

@@ -45,3 +45,6 @@ const chart = new frappe.Chart("#chart", {  // or a DOM element,
     colors: ['#7cd6fd', '#743ee2']
 })
 ```
+
+## Demo
+Here's a demo to try out yourself: