====== Google Chart Plugin ======

---- plugin ----
description: Allows to embed simple chart graphics using the Google Chart API
author     : Andreas Gohr
email      : andi@splitbrain.org
type       : syntax
lastupdate : 2024-05-05
compatible : Kaos
depends    : 
conflicts  : 
similar    : pchart
tags       : media, images, diagram, chart, google, embed, barcode

downloadurl: https://github.com/splitbrain/dokuwiki-plugin-gchart/zipball/master
sourcerepo : https://github.com/splitbrain/dokuwiki-plugin-gchart/
bugtracker : https://github.com/splitbrain/dokuwiki-plugin-gchart/issues
donationurl: http://donate.dokuwiki.org/gChart
----

:!: This plugin used to use the Google Image Chart API. This API has been deprecated for years and finally stopped working in 2024. The plugin now relies on the Open Source [[https://quickchart.io/|QuickChart.io]] service. Old charts should continue to work, but will probably look different.

===== Download and Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.


==== Changes ====

{{rss>https://github.com/splitbrain/dokuwiki-plugin-gchart/commits/master.atom date}}

===== Syntax =====

Let's start with an example:

{{ :plugin:gchart.png?nolink}}
<code>
<gchart 350x120 pie3d #0000ff #ffffff right>
Apples       = 3
Peaches      = 23
Strawberries = 25
Peanuts      = 7
</gchart>
</code>

As you can see, the usage is simple. You give your data as name=value pairs inside the ''<gchart>'' tags. In the start tag you can add various optional options:

  * **Size** give in the form ''//width//x//height//'' in pixels. Defaults to ''%%320x140%%''
  * **Type** defaults to ''pie3d'', can be one of the following
    * ''pie3d'' for a 3D pie graph((Not supported by quickcharts.io, will fall back to pie2d))
    * ''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).
  * **Background color** this is the second hex color given. Defaults to the configuration (see below).
  * **Alignment** can be ''left'', ''center'' or ''right''. Defaults to ''right''.
  * **Value Display** if ''value'' is given, the entered values are added to the graph
  * **Title** if you want to add a title to the graphic, give it in quotes. E.g. ''"this is my Title"''

Hex colors can be the typical 3 part RGB hexcodes known from HTML or can contain a 4th alpha transparency value.

For QR-codes, the first line of data may contain a unique letter ''L'', ''M'', ''Q'' or ''H'' to indicate the error correction level. The default value is ''L''. The other lines are joined with a semi-colon (;) and encoded in the barcode:

<code>
<gchart qr 120x120>
M
URLTO:www.dokuwiki.org/plugin:gchart
</gchart>
</code>

===== Configuration =====

The default graph and background color can be set in the [[config|configuration manager]] to match the style of your template.

It is recommended to enable the [[config:fetchsize]] option to make use of image caching.

===== Limitations =====

  * No encoding is used for the values, it might not work for big or many values
  * An internet connection is needed (because quickchart.io servers are used)
  * Only single dimensional charts (a single row of data pairs) are supported
  * If this is too limiting for you I recommend one of the similar plugins