I'm creating a JSchart with some JSON data i gathered from a FitBit.
https://jsfiddle.net/d0708akg/4/
This is my Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="chart-wrap" style="width: 100%; height: 100%;">
<canvas id="canvas" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>
</body>
</html>
<script>
$.getJSON("fitbitdata.json", function (json) {
// will generate array with ['Monday', 'Tuesday', 'Wednesday']
var labels = json.map(function(item) {
return item.Weight;
});
});
//there was a comma separating these two var declarations. Changed it to a `;`
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "Gewicht",
fillColor : "rgba(141,255,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
backgroundColor : "rgba(215, 44, 44, 0.2)",
pointStrokeColor : "#fff",
data: []
},
{
label : "BMI",
fillColor : "rgba(215, 40, 40, 0.9)",
strokeColor : "rgba(151,187,205,1)",
backgroundColor : "green",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : []
}
]
};
// I put the canvas element in a var just to clean up the 'new Chart' syntax
var canvas = document.getElementById("canvas").getContext("2d");
//this is the new syntax
var myLine = new Chart(canvas, {
type: 'line',
data: lineChartData//,
//options: options //if you had any to pass
});
</script>
What I'm trying to do is this:
I've got a json file with some data like this:
[{<br>
"Datum":"Week 1",
"Weight":74,
"BMI":21.39,
"Fat":0,
"CaloriesBurned":2.103,
"Steps":3.53,
<br>
}]
when I do alert(labels)
It shows all the values. Why not in my jschart?