wizechart
Version:
A jQuery + Bootstrap simple progress bar chart plugin
75 lines (67 loc) • 2.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WizeChart Playground</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding: 2rem; background: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h2 class="mb-4">WizeChart Demo</h2>
<div id="chart-static" class="mb-5"></div>
<button id="load-ajax" class="btn btn-primary mb-3">Load AJAX Chart</button>
<div id="chart-ajax"></div>
</div>
<!-- jQuery, Bootstrap, WizeChart Plugin -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- WizeChart Plugin -->
<script src="./dist/WizeChart.js"></script>
<script>
// Static Data Example
$('#chart-static').WizeChart({
data: {
labels: ['Paracetamol', 'Ibuprofen', 'Amoxicillin', 'Ciprofloxacin'],
values: [120, 200, 75, 300]
},
label: '{label} 💊',
value: v => `${v} doses`,
colors: ['#007bff', '#28a745', 'danger', 'orange'],
popover: {
title: l => `Info for ${l}`,
content: v => `Used ${v} times`,
placement: 'top'
}
});
// Mock AJAX Handler
$('#load-ajax').on('click', () => {
$('#chart-ajax').WizeChart({
ajax: {
url: '/mock-api',
data: () => ({ filter: 'last7days' })
},
label: l => `Med: ${l}`,
value: v => `${v}x`,
color: 'info',
rulerPoints: [0, 100, 200, 300, 400]
});
});
// Fake jQuery.get override for AJAX demo
$.get = function(url, data, cb) {
setTimeout(() => {
cb({
success: true,
data: {
labels: ['Cetirizine', 'Metformin', 'Simvastatin', 'Amlodipine'],
values: [145, 230, 310, 95]
}
});
}, 500);
};
</script>
</body>
</html>