add more functions to generate and document them in the README

3 files changed, 99 insertions, 33 deletions

diff --git a/README.md b/README.md
index 9e1c96a..f925582 100644
--- a/README.md
+++ b/README.md
@@ -80,15 +80,55 @@ This generates the chart and binds it to the HTML.
 
 | Variable | Default | Required | Description |
 | --- | --- | --- | --- |
-| chart | chart | no | The name of the chart. |
-| url | null | yes | The URL for the CSV. |
+| [chart](https://c3js.org/reference.html#bindto) | chart | no | The name of the chart. |
+| [url](https://c3js.org/reference.html#data-url) | null | yes | The URL for the CSV. |
 | [type](https://c3js.org/reference.html#data-type) | line | no | The type of chart it is. |
 | [x](https://c3js.org/reference.html#data-x) | null | no | The column name to use for X axis info. |
-| xLabel | null | no | The label for the X axis. |
-| yLabel | null | no | The label for the Y axis. |
+| [xLabel](https://c3js.org/reference.html#axis-x-label) | null | no | The label for the X axis. |
+| [yLabel](https://c3js.org/reference.html#axis-y-label) | null | no | The label for the Y axis. |
+| [xType](https://c3js.org/reference.html#axis-x-type) | null | no | The type of data for the X axis. |
+| [xFormat](https://c3js.org/reference.html#axis-x-tick-format) | null | no | The format for the X ticks, largely for use if xType is set to 'timeseries'. |
+| [axis-rotated](https://c3js.org/reference.html#axis-rotated) | null | no | If X and Y should be reversed. |
+| [grid-x-show](https://c3js.org/samples/options_gridline.html) | null | no | If the X grid should be shown. Set to 'true' to enable. |
+| [grid-y-show](https://c3js.org/samples/options_gridline.html) | null | no | If the X grid should be shown. Set to 'true' to enable. |
+| [legend-hide](https://c3js.org/samples/options_legend.html) | null | no | If defined, this hides the legend. |
 
 Please note that while C3 supports area and gauge, this currently lacks support for those.
 
+#### chart-generate-raw
+
+As to how to start using this, it is highly started reading https://c3js.org/gettingstarted.html .
+
+| Variable | Default | Required | Description |
+| --- | --- | --- | --- |
+| raw | null | yes | The raw inner JSON for c3.generate. |
+
+
+```
+{{% chart-generate-raw raw="bindto: '#chart',
+    data: {
+      columns: [
+        ['data1', 30, 200, 100, 400, 150, 250],
+        ['data2', 50, 20, 10, 40, 15, 25]
+      ]
+    }"
+%}}
+```
+
+is the equivalent of this...
+
+```
+var chart = c3.generate({
+    bindto: '#chart',
+    data: {
+      columns: [
+        ['data1', 30, 200, 100, 400, 150, 250],
+        ['data2', 50, 20, 10, 40, 15, 25]
+      ]
+    }
+});
+```
+
 ## Configuration
 
 ### Disable Pagination
diff --git a/layouts/shortcodes/chart-generate-raw.html b/layouts/shortcodes/chart-generate-raw.html
new file mode 100644
index 0000000..368ce86
--- /dev/null
+++ b/layouts/shortcodes/chart-generate-raw.html
@@ -0,0 +1,5 @@
+<script>
+var chart = c3.generate({
+{{ .Get "raw" }}
+});
+</script>
diff --git a/layouts/shortcodes/chart-generate.html b/layouts/shortcodes/chart-generate.html
index e7befbc..7f9921c 100644
--- a/layouts/shortcodes/chart-generate.html
+++ b/layouts/shortcodes/chart-generate.html
@@ -1,34 +1,55 @@
 <script>
 var chart = c3.generate({
-    bindto: '#{{ .Get "chart" | default "chart" }}',
-    data: {
-        {{ with .Get "x" }}
-         x: '{{.}}',
-        {{ end }}
-        url: '{{ .Get "url" }}',
-        type: '{{ .Get "type" | default "line" }}'
+	bindto: '#{{ .Get "chart" | default "chart" }}',
+	data: {
+		{{ with .Get "x" }}
+			x: '{{.}}',
+		{{ end }}
+		url: '{{ .Get "url" }}',
+	type: '{{ .Get "type" | default "line" }}'
+	}
+	,axis: {
+		x: {
+			label: '{{ with .Get "xLabel" }}{{.}}{{ end }}'
+
+			{{ with .Get "xType" }}
+				,type: '{{.}}'
+			{{ end }}
+
+			{{ with .Get "xFormat" }}
+				,tick: {
+					format: '{{.}}'
+				}
+			{{ end }}
+		}
+
+		{{ with .Get "yLabel" }}
+			,y: {
+				label: '{{.}}'
+			}
+		{{ end }}
+
+		{{ with .Get "y2Label" }}
+			,y2: {
+				show: true,
+				label: '{{.}}'
+			}
+		{{ end }}
+
+		{{ with .Get "axis-rotated" }}
+			,rotated: '{{.}}'
+		{{ end }}
     }
-    {{ if or (isset .Params "xLabel") (or (isset .Params "yLabel") (isset .Params "y2Label") ) }}
-     ,axis: {
-         {{ with .Get "xLabel" }}
-          x: {
-              label: '{{.}}'
-          }
-         {{ end }}
-         {{ if isset .Params "yLabel" }},{{end}}
-         {{ with .Get "yLabel" }}
-          y: {
-              label: '{{.}}'
-          }
-         {{ end }}
-         {{ if isset .Params "y2Label" }},{{end}}
-         {{ with .Get "y2Label" }}
-          y2: {
-              show: true,
-              label: '{{.}}'
-          }
-          {{ end }}
-     }
-    {{ end }}
+	,grid: {
+		x: {
+			{{ with .Get "grid-x-show" }}show: '{{.}}'{{ end }}
+		},
+		y: {
+			{{ with .Get "grid-y-show" }}show: '{{.}}'{{ end }}
+		}
+	}
+	,legend: {
+		{{ with .Get "legend-hide" }}show: false{{ end }}
+	}
 });
 </script>