I'm trying to get the ChartJS line chart working for a project I am working on. I followed a tutorial as I need to get the data from mySQL database and use this data to be displayed on the line chart. I was wondering if anyone had experience using ChartJS and could tell me what's wrong with my code, please.
I have removed the weblink to the JSON data just for privacy reasons, but the data is shown in JSON format.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - LineGraph</title>
<style>
.chart-container {
width: 640px;
height: auto;
}
</style>
<!-- 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/linegraph.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div class="chart-container">
<canvas id="mycanvas" width="600" height="600"></canvas>
<script>
$(document).ready(function(){
$.ajax({
url : "**********",
type : "GET",
success : function(data){
console.log(data);
var user_id = [];
var pain = [];
var sleep = [];
var mood = [];
var heartrate = [];
var time_of_entry = [];
for(var i in data) {
user_id.push("UserID " + data[i].user_id);
pain.push(data[i].pain);
sleep.push(data[i].sleep);
mood.push(data[i].mood);
heartrate.push(data[i].heartrate);
time_of_entry.push(data[i].timeofentry);
}
var chartdata = {
labels: user_id,
datasets: [
{
label: "pain",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: pain
},
{
label: "sleep",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: sleep
},
{
label: "mood",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: mood
},
{
label: "heartrate",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: heartrate
},
{
label: "time_of_entry",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: time_of_entry
}
]
};
var ctx = $("#mycanvas");
var mycanvas = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
</script>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire