I have JSON data in the following form:
{ "labels": ["12.11.2016", "13.11.2016", "14.11.2016", ...], "temperature": ["12", "35", "27", ...], "humidity": ["56", "70", "87", ...] } and want to show it in Chart.js.
I already found this example but it somehow isn't working...
My code for Chart.js is the following:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="/node_modules/chart.js/dist/Chart.bundle.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> canvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> <title>Temperatur und Feuchtigkeit</title> </head> <body> <div style="width: 100%;"> <canvas id="canvas"></canvas> </div> <script> var data; $.get('GetTestData.php', function(dataGet) { data = JSON.parse(dataGet); //console.log(data['labels']); }); var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.9') + ')'; }; var config = { type: 'line', data: { //labels: ["11.11.2016", "12.11.2016", "13.11.2016", "14.11.2016", "15.11.2016", "16.11.2016", "17.11.2016"], labels: labels datasets: [{ label: "Temperatur", //data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], data: temperature fill: false }//, //{ // label: "Feuchtigkeit", // data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], // fill: false //}] }, options: { responsive: true, title:{ display:true, text:'Temperatur und Feuchtigkeit' }, tooltips: { mode: 'label' }, hover: { mode: 'dataset' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Datum' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Wert' }, ticks: { suggestedMin: -20, suggestedMax: 250, } }], } } }; var labels = [], temperature=[], humidity=[]; data['labels'].forEach(function(singleResult) { labels.push(singleResult); }); data['temperature'].forEach(function(singleResult) { temperature.push(singleResult); }); data['humidity'].forEach(function(singleResult) { humidity.push(singleResult); }); $.each(config.data.datasets, function(i, dataset) { dataset.borderColor = randomColor(1.0); dataset.backgroundColor = randomColor(1.0); dataset.pointBorderColor = randomColor(1.0); dataset.pointBackgroundColor = randomColor(1.0); dataset.pointBorderWidth = 1; }); window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config); }; </script> </body> </html> With static values I get an very nice graph like this: 
But the dynamic data load (like in the above code) is not working :/ Does anyone have an idea here?
The error I'm getting is:
SyntaxError: missing } after property list[Weitere Informationen]
