score:0

...
$data = [];
// set all data to d.
foreach ($result as $d) {
  $data[] = $d;
}
?>

in chart.js

var jarray = <?php echo implode(',', $data); ?>

score:0

after alot of reasearch of other chart libaries i noticed highcharts used echo join() and got it to look like this enter image description here

here is my solution

<div class="row bg-dark">
    <div class="col-12 border">
    <canvas id="mychart"></canvas>
    </div>
</div>

<div class="container">
  <div>
    <?php
      $sth = $db->prepare("select actual from csvhoejde1");
      $sth->execute();

      /* fetch all of the remaining rows in the result set */
      $result = $sth->fetchall(pdo::fetch_column, 0);
      // $result = explode("@", implode(",@", $result));
      // print_r for at se resultaterne.
      echo'<pre>';
      print_r($result);
      echo'</pre>';

    ?>
  <div>
</div>
  <!----------------------mychart---------------------->
  <script src="./assets/charts/dist/chart.js"></script>
<script>



var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");

var horizonallineplugin = {
  afterdraw: function(chartinstance) {
    var yscale = chartinstance.scales["y-axis-0"];
    var canvas = chartinstance.chart;
    var ctx = canvas.ctx;
    var index;
    var line;
    var style;

    if (chartinstance.options.horizontalline) {
      for (index = 0; index < chartinstance.options.horizontalline.length; index++) {
        line = chartinstance.options.horizontalline[index];

        if (!line.style) {
          style = "rgba(169,169,169, .6)";
        } else {
          style = line.style;
        }

        if (line.y) {
          yvalue = yscale.getpixelforvalue(line.y);
        } else {
          yvalue = 0;
        }

        ctx.linewidth = 3;

        if (yvalue) {
          ctx.beginpath();
          ctx.moveto(0, yvalue);
          ctx.lineto(canvas.width, yvalue);
          ctx.strokestyle = style;
          ctx.stroke();
        }

        if (line.text) {
          ctx.fillstyle = style;
          ctx.filltext(line.text, 0, yvalue + ctx.linewidth);
        }
      }
      return;
    };
  }
};
chart.pluginservice.register(horizonallineplugin);

var data = {
  labels: ["1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14","15", "16", "17", "18", "19", "20", "21", "22", "23", "24","25", "26", "27", "28", "29", "30", "31", "32", "33", "31"],
  datasets: [{
    label: "my first dataset",
    fill: false,
    linetension: 0,
    backgroundcolor: "rgba(75,192,192,0.4)",
    bordercolor: "rgba(75,192,192,1)",
    bordercapstyle: 'butt',
    borderdash: [],
    borderdashoffset: 0.0,
    borderjoinstyle: 'miter',
    pointbordercolor: "rgba(75,192,192,1)",
    pointbackgroundcolor: "#fff",
    pointborderwidth: 1,
    pointhoverradius: 5,
    pointhoverbackgroundcolor: "rgba(75,192,192,1)",
    pointhoverbordercolor: "rgba(220,220,220,1)",
    pointhoverborderwidth: 2,
    pointradius: 4,
    pointhitradius: 10,
    data: [<?php echo join($result, ',') ?>],
  }]
};

var mychart = new chart(ctx, {
  type: 'line',
  data: data,
  options: {
    "horizontalline": [{
      "y": 140,
      "style": "rgba(255, 0, 0, .4)",
    }, {
      "y": 120,
      "style": "#00ffff",
    }]
  }
});
</script>

Related Query

More Query from same tag