Member Avatar for iamy1204

i want to ask.......if i have the data in a database of mysql....how can I generate html, chart from the database(mysql)

  • 4 Contributors
  • 3 Replies
  • 337 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ferensick

Dani AI

Generated

Two simple patterns solve this: produce an HTML view (a table or list) or produce a chart/graph. As hinted, decide which you want first. The modern, reliable flow is: query MySQL server‑side with a safe call, return structured data (JSON), and render either plain HTML or a chart in the browser. This builds on ’s “loop” idea and sits well alongside ’s tool suggestions, while using current, secure APIs.

Server side (example: PHP + PDO) — return JSON that any page or chart library can consume:

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

$dsn = 'mysql:host=localhost;dbname=your_db;charset=utf8mb4';
$user = 'dbuser';
$pass = 'dbpass';

try {
    $pdo = new PDO($dsn, $user, $pass, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
    $stmt = $pdo->prepare('SELECT label, value FROM metrics ORDER BY id');
    $stmt->execute();
    echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}

Client side — fetch that JSON and draw a chart (example using Chart.js):

<!doctype html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/chart.js"></script></head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    fetch('/data.php').then(r=>r.json()).then(data=>{
      const labels = data.map(x=>x.label);
      const values = data.map(x=>+x.value);
      new Chart(document.getElementById('myChart'), {
        type:'bar',
        data:{ labels, datasets:[{label:'Value', data:values, backgroundColor:'rgba(54,162,235,0.5)'}] }
      });
    }).catch(console.error);
  </script>
</body>
</html>

Notes and cautions: always use prepared statements to avoid SQL injection; set proper Content-Type headers; cast numeric fields before plotting; paginate or aggregate server‑side for large tables; consider caching the JSON for heavy queries; if clients can’t run JavaScript, generate server‑side images or export CSV. This approach keeps your presentation layer separate from data access and is easy to adapt to other stacks (Node, Python, etc.).

Recommended Answers

All 3 Replies

Member Avatar for dottomm

I'm not sure what you mean.

Are you asking how to display sql data in a HTML table? Or would you like to display graphs and charts based on your sql data?

Member Avatar for ebookfinder

i want to ask.......if i have the data in a database of mysql....how can I generate html, chart from the database(mysql)

given the row set that you want to render,
for your html issue, you may use the repeater control or a loop of echos to your row set.
for your chart, please use a chart control, there a bulk free, and give the control the row set.

Member Avatar for ferensick

To Generate HTML based on your MySQL database you can use QCODO: http://www.qcodo.com/
I've used this before and it's pretty handy.
Also what is the overall objective? Are you trying to manage your DB via your web browser? Or are you trying to make a simple report? For managing PHPMyAdmin is very useful.
And to simply have a table displayed on a web page in a chart form, use PHP to get the table values, and HTML to format the table.
QCODO may be too much if you just want to display one table in HTML.
http://www.freewebmasterhelp.com/tutorials/phpmysql/4
Example:

<?
$username="username";
$password="password";
$database="your_database";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM contacts";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

echo "<b><center>Database Output</center></b><br><br>";

$i=0;
while ($i < $num) {

$first=mysql_result($result,$i,"first");
$last=mysql_result($result,$i,"last");
$phone=mysql_result($result,$i,"phone");
$mobile=mysql_result($result,$i,"mobile");
$fax=mysql_result($result,$i,"fax");
$email=mysql_result($result,$i,"email");
$web=mysql_result($result,$i,"web");

echo "<b>$first $last</b><br>Phone: $phone<br>Mobile: $mobile<br>Fax: $fax<br>E-mail: $email<br>Web: $web<br><hr><br>";

$i++;
}

?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.