patege

Dynamic Chart.js using PHP

Jun 19th, 2019
70
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2. $dataPoints = array(
  3.   array( "data" => 4 , "label" => "Gold Star" , "backgroundColor" => "rgba(255,215,0,1)"),
  4.   array( "data" => 2 , "label" => "Green Light" , "backgroundColor" => "rgba(0,128,0,1)"),
  5.   array( "data" => 0 , "label" => "Yellow Light" , "backgroundColor" => "rgba(255,255,0,1)"),
  6.   array( "data" => 0 , "label" => "Red Light" , "backgroundColor" => "rgba(255,0,0,1)" )
  7. );
  8.  
  9. ?>
  10.  
  11. <!doctype html>
  12. <html>
  13. <head>
  14. <meta charset="utf-8">
  15. <title>Untitled Document</title>
  16. </head>
  17.  
  18. <body>
  19.     <script src="../assets/chart28/dist/Chart.js"></script>
  20.     <canvas id="myChart" width="100" height="20"></canvas>
  21. <script>
  22. var ctx = document.getElementById('myChart');
  23. var myChart = new Chart(ctx, {
  24.     type: 'bar',
  25.     data: {
  26.         labels: ['Gold Star', 'Green Light', 'Yellow Light', 'Red Light'],
  27.         datasets: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
  28.     },
  29.     options: {
  30.         scales: {
  31.             yAxes: [{
  32.                 ticks: {
  33.                     beginAtZero: true
  34.                 }
  35.             }]
  36.         }
  37.     }
  38. });
  39. </script>
  40. </body>
  41. </html>
RAW Paste Data