Dynamic Chart with JSON data - CanvasJS
You were not intreating correctly over data due to which you were getting y:null and x:NaN.
Content inside data is array of objects inside an array i.e. [[{}, {}, {}...]]so you need to iterate accordingly.
Use this code:
data.forEach(function(array) { array.forEach(function(arrayItem) { dataPoints.push({ y: new Date(arrayItem.source_ts), x: Number(arrayItem.renewablesobligationconsumption) }); }); });Below is complete working example. Now your dataPoints is ready, you can use it anywhere you want:
// Fetching the datafetch('https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').then(response => { return response.json();}).then(data => { // Generating Data Points var dataPoints = []; data.forEach(function(array) { array.forEach(function(arrayItem) { dataPoints.push({ y: new Date(arrayItem.source_ts), x: Number(arrayItem.renewablesobligationconsumption) }); }); }); console.log(dataPoints); var chart = new CanvasJS.Chart("chartContainer", { data: [{ dataPoints: dataPoints, type: "line", }] }); chart.render();}).catch(err => { throw new Error('Impossible to get data');});<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart --><div id="chartContainer" style="height: 300px; width: 100%;"></div>