The data which was used to create the chart shows the GDP value for the selected country, according to the World Bank's World Development Indicators. The content of the data source shows the indicator name (GDP), country name, year value and GDP value. The data structure from the source is shown in form of json, with each object showcasing the above contents.
The chart was implemented through the use of a javascript library called 'Chart.js' For the library to work, it requires extracting the required data for the x and y axis (year value and GDP value respectively). In addition, it also requires to specify the type of chart to be created, labels for the chart, chart colors and, optional, if the chart should begin at zero. This forms the chart configuration, which is used to create a chart from the specified canvas element in the html file. A method was also created to filter data based on the selected year ranges. The method involves extracting the x-axis values, getting the selected start and end years from the user's input, get the years only within the specified start and end years and then show the data in which the x-axis values is wihtin the range.
The below links are the API links used for the created charts.
http://api.worldbank.org/v2/country/ke/indicator/NY.GDP.MKTP.CD?date=2000:2021&format=json http://api.worldbank.org/v2/country/rw/indicator/NY.GDP.MKTP.CD?date=2000:2021&format=json http://api.worldbank.org/v2/country/ng/indicator/NY.GDP.MKTP.CD?date=2000:2021&format=json http://api.worldbank.org/v2/country/zw/indicator/NY.GDP.MKTP.CD?date=2000:2021&format=json