CanvasJs chart using json data

I am trying to draw CanvasJs chart using data from json file but for some reason it does not work.

The data which I am trying to display are data which is in json file represented as number "####" and value "#"

Please take a look at the code below.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Years"
	},
	axisY: {
		title: "Value",
		titleFontSize: 24
      	
	},
	data: [{
		type: "column",
		yValueFormatString: "# Value",
		dataPoints: dataPoints
	}]
});

function addData(data) {
	for (var i = 0; i < data.length; i++) {
		dataPoints.push({
			x: new Year(data[i].date),
			y: data[i].value
		});
	}
	chart.render();

}

$.getJSON("https://api.worldbank.org/v2/countries/gbr/indicators/UIS.FOSEP.56.F600?format=json", addData);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution

First you need to call the json, $.getJson gives a callback, so once the api gives the data you need to create the dataPoints, once its created create the chart.

I hope the below solution will solve the issue.

Note: If required you can add a loader for the mean time while its loading , so the user will know that some thing is loading

const chartCreation = (data) => {
$("#chartContainer").CanvasJSChart({
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Years"
	},
	axisY: {
		title: "Value",
		titleFontSize: 24
      	
	},
	data: [{
		type: "column",
		yValueFormatString: "# Value",
		dataPoints: dataPoints
	}]
});

}

let dataPoints = [];


const addData = (data) => {
  dataPoints = data[1].filter(obj => +(obj.date) >= 2010 && +(obj.date) <=2018 
  ).map(obj => ({x: +(obj.date),
     y: obj.value ? obj.value :  0}))
  // once we have the data pass it to chart creation 
  // function
  chartCreation(dataPoints);
}  



$.getJSON("https://api.worldbank.org/v2/countries/gbr/indicators/UIS.FOSEP.56.F600?format=json", (data) =>{
  // pass the data to function
  addData(data);
});

return{
     
   }

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

Updated

As per the comment, first you can array.filter , once you filter you will get a new array where you can return the properties whatever that you want. using array.map to return what ever the properties.