Chart.js Guide | Flymann Digital Solutions

Why use Chart.js?

Chart.js is a lightweight, flexible JavaScript charting library that renders beautiful, responsive charts using the HTML5 <canvas> element. It's perfect for admin dashboards like ModernISP because it is easy to set up, supports animations and tooltips out of the box, and updates gracefully when you push new data.

Quick setup (CDN)

Add the Chart.js CDN to your page header or before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Example: Line chart (HTML + JS)

Minimal HTML and JS to render a responsive line chart:

<canvas id="usersChart" width="600" height="300"></canvas>

<script>
const ctx = document.getElementById('usersChart').getContext('2d');
const usersChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        datasets: [{
            label: 'Active Sessions',
            data: [12, 19, 8, 14, 22, 30, 25],
            tension: 0.4,
            fill: true,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'top' },
            tooltip: { mode: 'index', intersect: false }
        },
        scales: {
            x: { display: true },
            y: { beginAtZero: true }
        }
    }
});
</script>

Feeding Chart.js from your PHP API

Keep chart rendering on the client and fetch data from a small PHP endpoint that returns JSON — this keeps charts responsive and lets you cache or transform data server-side.

Example PHP endpoint (api/chart-data.php) — using PDO (works for MySQL or PostgreSQL with the right DSN):

<?php
// api/chart-data.php
header('Content-Type: application/json; charset=utf-8');

try {
    // Replace DSN, user, pass with your settings
    $pdo = new PDO('mysql:host=127.0.0.1;dbname=modernisp;charset=utf8mb4','dbuser','dbpass');
    $stmt = $pdo->query(\"SELECT date, active_sessions FROM daily_sessions ORDER BY date DESC LIMIT 30\");
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    // send oldest-first
    $rows = array_reverse($rows);
    $labels = array_column($rows, 'date');
    $data = array_map(function($r){ return (int)$r['active_sessions']; }, $rows);
    echo json_encode(['labels'=>$labels, 'data'=>$data], JSON_UNESCAPED_SLASHES);
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['error'=>'Database error']);
}
?>

Client-side fetch + update:

<script>
async function loadChart() {
  const res = await fetch('/api/chart-data.php');
  const json = await res.json();
  usersChart.data.labels = json.labels;
  usersChart.data.datasets[0].data = json.data;
  usersChart.update();
}
loadChart();
// optional: refresh every 60s
setInterval(loadChart, 60000);
</script>

Tips & best practices

Limit points: only query as much history as you need. Use aggregations on the server for long time ranges (daily/monthly rollups).
Use streaming/patch updates: update dataset values rather than re-creating charts to keep animations smooth.
Accessibility: provide tabular fallbacks for screen readers (a small hidden table with the same numbers).
Performance: disable animations for very large datasets and use simplified tooltips.
Mobile: Chart.js is responsive by default — ensure your container uses percentage widths to get the best results.

Conclusion

Chart.js gives you a fast, flexible way to add polished charts to your ModernISP admin panel. Pair it with small server-side JSON endpoints and you'll have dynamic visualizations that are easy to maintain and scale.

Want example chart endpoints or a custom dashboard demo? Contact us — we can wire up live charts from your MikroTik stats.

Chart.js Guide: Building Interactive Charts for Your Dashboard