score:0

no plan why it's empty for me..

my database output is correct it think!

data.php

[{"day":"15","quantity":"72"},{"day":"16","quantity":"157"},{"day":"17","quantity":"130"},{"day":"18","quantity":"91"},{"day":"19","quantity":"96"},{"day":"20","quantity":"129"},{"day":"21","quantity":"140"},{"day":"22","quantity":"141"}]

index.html

<!doctype html>
<html>
<head>
    <title>a simple chart</title>
    <style type="text/css">
        #chart-container {
            width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="chart-container">
        <canvas id="mycanvas"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js

$.ajax({
type: 'post',
url: 'data.php',
success: function (data) {
    linechartdata = json.parse(data); //parse the data into json

    var ctx = document.getelementbyid("mycanvas").getcontext("2d");
    var mylinechart = new chart(ctx, {
        type: 'line',
        data: linechartdata
    });
}
});

score:1

here is the main idea

data.foreach(function(packet) {

  labelsdata.push(packet.day);
  datasetdata.push(parsefloat(packet.quantity));

});

for example

var datajson = [{
  "day": "2017-11-15",
  "quantity": "72"
}, {
  "day": "2017-11-16",
  "quantity": "157"
}, {
  "day": "2017-11-17",
  "quantity": "130"
}, {
  "day": "2017-11-18",
  "quantity": "91"
}, {
  "day": "2017-11-19",
  "quantity": "96"
}];

var labelsdata = [];
var datasetdata = [];

datajson.foreach(function(packet) {

  labelsdata.push(packet.day);
  datasetdata.push(parsefloat(packet.quantity));

});

var chartdata = {
  type: 'bar',
  data: {
    labels: labelsdata,
    datasets: [{
      label: 'days',
      data: datasetdata
    }]
  }
}

working jsfiddle

https://jsfiddle.net/4v3nt7sl/1/


Related Query

More Query from same tag