Skip to main content

Presenting PHP Data with JavaScript Charts

PHP can query and process database data, then pass a small prepared result to JavaScript for presentation.

<?php
$labels = array_column($rows, "team_name");
$points = array_map("intval", array_column($rows, "points"));
?>
<script>
const labels = <?= json_encode($labels) ?>;
const points = <?= json_encode($points) ?>;
</script>

Use a chart library or your own display code with these arrays. Do not construct JavaScript by concatenating unescaped database text.

Preserve meaning

Include:

  • descriptive chart title
  • labels and units
  • adequate contrast
  • predictable category order
  • a table or textual alternative
  • an empty-data message

The chart should visualise a result that responds to a user need or success criterion. JavaScript is one presentation option, not the evidence by itself.

Check

  • PHP output uses json_encode().
  • Data is already filtered or aggregated appropriately.
  • Chart has a non-visual alternative.
  • Empty and extreme values are tested.
  • Script errors do not hide all useful output.
Back to top