Differences

This shows you the differences between two versions of the page.

--- x_howto:plugins [2022/02/13 06:51] – [Google Chart Plugin (Gchart Plugin)] mk
+++ x_howto:plugins [2022/02/13 07:36] (current) – old revision restored (2022/02/12 21:08) mk
@@ Line 11: / Line 11: @@
 === Google Chart Plugin (Gchart Plugin) ===
-[[https://www.dokuwiki.org/plugin:achart|ApexCharts Plugin]]
+[[https://www.dokuwiki.org/plugin:gchart|Google Chart Plugin]]
 Syntax
-  var options = {
+  <gchart 350x120 pie3d #0000ff #ffffff right>
-      chart: {
+  Apples       = 3
-          width: 380,
+  Peaches      = 23
-          type: 'pie',
+  Strawberries = 25
-          toolbar: { show: true,tools: { download: true } },
+  Peanuts      = 7
-      },
+  </gchart>
-      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-      series: [44, 55, 13, 43, 22],
-      responsive: [{
-          breakpoint: 480,
-          options: {
-              chart: {
-                  width: 200
-              },
-              legend: {
-                 position: 'bottom'
-              }
-          }
-      }]
-  }
-Remove @
+  * Size give in the form widthxheight in pixels. Defaults to 320x140
+  * Type defaults to pie3d, can be one of the following
+    * pie3d for a 3D pie graph
+    * pie2d for a 2D pie graph
+    * line for a line graph
+    * sparkline for a “sparkline” graph
+    * hbar for a horizontal bar graph
+    * vbar for a vertical bar graph
+    * qr for a two-dimensional barcode
+  * Graph color this is the first hex color given. Defaults to the configuration (see below) or orange if no config is given.
+  * Background color this is the second hex color given. Defaults to the configuration (see below) or white if no config is given.
+  * Alignment can be left, center or right. Defaults to right.
+  * Value Display if value is given, the entered values are added to the graph
+  * Legend is only available for pie graphs. If legend is given, the slices will not be labeled directly
+  * Title if you want to add a title to the graphic, give it in quotes. E.g. “this is my Title”
-  <@achart align="right" width=50% >
-    {
-      ...
-    }
-  </achart>
-The <achart> tag can carry optional attributes to customize the appearance of the chart. The attributes are separated by spaces, each specified in the format of name=value. Valid attributes are:
-<WRAP>
-^Name^Unit^Description^
-^width|Width of the chart, specified in CSS format, e.g. 50% or 320px.|
-^height|Height of the chart, in the same format as width.|
-^align|Chart alignment, can be left, right or center.|
-</WRAP>
-<WRAP clear></WRAP>

A Cloud In TheSky

User Tools

Site Tools

Differences

Page Tools