wizechart/README.md

A jQuery + Bootstrap simple progress bar chart plugin

# WizeChart

**WizeChart** is a simple, lightweight jQuery + Bootstrap plugin that renders clean and customizable horizontal progress bar charts.

Ideal for dashboards, reports, or anything needing a visual breakdown with tooltips, colors, and formatting control.

---


## 🚀 Features

- ✅ Simple jQuery plugin
- ✅ Uses Bootstrap `progress` for styling
- ✅ Supports static data or dynamic AJAX
- ✅ Custom formatting: labels, values, popovers
- ✅ Auto-scaled ruler
- ✅ Multi-color support with Bootstrap or CSS colors
- ✅ UMD + ESM support (`npm`, Vite, or CDN-ready)

---


## 📦 Installation

### Via npm

```bash
npm install wizechart
```

Then in your JS file:

```js
import "wizechart";
```

## 📋 Basic Usage

### Static Data Example

```html
<div id="chart"></div>

<script>
  $("#chart").WizeChart({
    data: {
      labels: ["Ibuprofen", "Paracetamol", "Amoxicillin"],
      values: [180, 240, 90],
    },
    label: "{label} 💊",
    value: (v) => `${v}x`,
    colors: ["primary", "success", "orange"],
    popover: {
      title: (l) => `Info for ${l}`,
      content: (v) => `Total given: ${v}`,
      placement: "top",
    },
  });
</script>
```

---


### AJAX Data Example

```html
<div id="chart"></div>

<script>
  $("#chart").WizeChart({
    ajax: {
      url: "/api/top-medicines",
      data: () => ({ filter: "weekly" }), // optional filter
    },
    color: "info",
    value: (v) => `${v} doses`,
    rulerPoints: [0, 100, 200, 300, 400],
  });
</script>
```

Expected server response format:

```json
{
  "success": true,
  "data": {
    "labels": ["Cetirizine", "Metformin"],
    "values": [120, 290]
  }
}
```

---


## ⚙️ Options

| Option        | Type                            | Description                                          |
| ------------- | ------------------------------- | ---------------------------------------------------- |
| `data`        | `{ labels, values }`            | Static data for chart                                |
| `ajax`        | `{ url, data? }`                | Dynamic fetch. Data can be function                  |
| `label`       | \`string                        | function\`                                           |
| `value`       | \`string                        | function\`                                           |
| `color`       | `string`                        | Default Bootstrap class or CSS color                 |
| `colors`      | `string[]`                      | List of colors (per bar)                             |
| `popover`     | `{ title, content, placement }` | Bootstrap popover config. Can use string or function |
| `rulerPoints` | \`number                        | number[]\`                                           |

---


## 🛠 Requirements

- jQuery ^3.6
- Bootstrap 5.x (uses `progress` + `popover`)

---


## 📝 License

MIT — © [WildanMZaki](https://github.com/WildanMZaki)

---


## 🔗 Links

- GitHub: [https://github.com/WildanMZaki/WizeChart](https://github.com/WildanMZaki/WizeChart)
- NPM: [https://www.npmjs.com/package/wizechart](https://www.npmjs.com/package/wizechart)