====== Radarchart Plugin ======

---- plugin ----
description: A flexible DokuWiki plugin for creating radar charts with multiple datasets, custom styling, and extensive configuration options.
author     : HeinrichKrupp 
email      : heinrich.krupp@gmail.com 
type       : syntax
lastupdate : 2024-11-10
compatible : Kaos
depends    : 
conflicts  : 
similar    : 
tags       : Charts Radar Spider_web

downloadurl: https://github.com/doobidoo/dokuwiki-plugin-radarchart/archive/refs/heads/main.zip
bugtracker : https://github.com/doobidoo/dokuwiki-plugin-radarchart/issues
sourcerepo : https://github.com/doobidoo/dokuwiki-plugin-radarchart/
donationurl: https://paypal.me/HeinrichKrupp

screenshot_img : https://i.imgur.com/gY9bEM2.png

----

===== Installation =====

1. Create a new folder named 'radarchart' in your DokuWiki's lib/plugins directory
2. Copy all the provided files into this directory
3. Log into your DokuWiki installation as an administrator
4. Go to the Configuration Settings page
5. Look for the radarchart plugin in the list and enable it if necessary
Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

===== Key features of the plugin: =====

  - Responsive design that works on all devices
  - Interactive tooltips showing values
  - Clean, modern appearance
  - Easy-to-use syntax
  - Automatic scaling of values
  - Support for multiple charts on one page
  - Multiple datasets support
  - Customizable colors
  - Dark mode support
  - Smooth hover effects
  - Improved accessibility
  - Graceful fallback for invalid colors
  - Default values for missing configurations((Default values can be configured in configuration manager))
  - Protection against malformed input

===== Examples/Usage =====

==== Syntax ====

Use the following syntax in your wiki pages to create a radar chart:

=== Basic Example ===

The basic sample uses the default properties, hence no attributes in <radar> tag needed.
<code>
<radar>
Speed|85
Accuracy|92
Power|78
Control|95
Endurance|88
</radar>
</code>
Eeach line represents a data point with:
  - Label before the pipe symbol (|)
  - Value after the pipe symbol (between 0 and 100 recommended)

=== Advanced Sample with multiple overlays ===

1. **Multiple Color Schemes**:
   - Default: Professional blue-based scheme
   - Pastel: Soft, muted colors
   - Dark: Monochromatic dark theme
   - Neon: High contrast, vibrant colors

2. **Configurable Chart Settings**:
<code>
<radar width="600" height="600" colorScheme="pastel" minScale="0" maxScale="100" legendPosition="top" borderWidth="2" pointRadius="3">
@dataset Player 1|rgba(255,0,0,0.2)|rgb(255,0,0)
Speed|85
Accuracy|92
...
</radar>
</code>

3. **Custom Dataset Colors**:
<code>
@dataset Player 1|rgba(255,0,0,0.2)|rgb(255,0,0)
</code>
Format: `@dataset Label|backgroundColor|borderColor`

4. **Configuration Options**:
   - `width`: Chart width in pixels
   - `height`: Chart height in pixels
   - `colorScheme`: Choose from predefined schemes
   - `minScale`: Minimum scale value
   - `maxScale`: Maximum scale value
   - `legendPosition`: Legend placement (top, bottom, left, right)
   - `borderWidth`: Line thickness
   - `pointRadius`: Size of data points
   - `fillOpacity`: Opacity of filled areas

Example usage with all features:
<code>
<radar width="600" height="600" colorScheme="pastel" minScale="0" maxScale="100" legendPosition="right" borderWidth="3" pointRadius="4">
@dataset Player 1|rgba(255,100,100,0.2)|rgb(255,100,100)
Speed|85
Accuracy|92
Power|78
Control|95
Endurance|88

@dataset Player 2|rgba(100,255,100,0.2)|rgb(100,255,100)
Speed|75
Accuracy|88
Power|92
Control|85
Endurance|79
</radar>
</code>


==== Requirements ====
  - DokuWiki
  - Modern web browser with JavaScript enabled
  - Internet connection (for loading Chart.js from CDN)

==== Files Structure ====
<code>
radarchart/
├── conf
│   ├── default.php
│   └── metadata.php
├── helper.php
├── lang
│   └── en
│       └── settings.php
├── manager.dat
├── plugin.info.txt
├── radarchart_sample.png
├── README.md
├── style.css
└── syntax.php
</code>

===== Configuration and Settings =====

not applicable

===== Development =====

The source code of the plugin is available at GitHub: https://github.com/HeinrichKrupp/dokuwiki-plugin-radarchart.

=== Changelog ===

{{rss>https://github.com/HeinrichKrupp/dokuwiki-plugin-radarchart/commits/master.atom date 8}}

=== ToDo/Wish List ===

Maybe some additional features...

===== FAQ =====