{"id":9415,"date":"2016-10-10T23:28:29","date_gmt":"2016-10-10T21:28:29","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9415"},"modified":"2026-01-12T09:07:55","modified_gmt":"2026-01-12T09:07:55","slug":"238-way-to-react-to-api-failure","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/238-way-to-react-to-api-failure\/","title":{"rendered":"Way to react to API failure"},"content":{"rendered":"

APIs<\/a><\/b> can be described as a tap delivering data instead of water, as it provides a continuous stream of information. With APIs, developers send queries to a server and get access to data or even plug web applications to an up-to-date data-source.<\/p>\n

In my field, International Development, The World Bank<\/a><\/b> is the most important source of data to study economic and social development. World Bank’s API<\/a><\/b> allows developers to take advantage of open data and automation; so that everyone can create up-to-date applications, as applications can be plugged directly to the data servers, and have access to live data.<\/p>\n

But here is my issue, I am torn between a full automatization and a constant monitoring of an update. If I go with an automatization, there is a risk of a crash when major updates occur, such as indicators names revision, series discontinuity, etc. And if I don\u2019t use automation, that means I have to constantly monitor any data update. As a developer and maintainer of a dataviz portal on international development for the French Development Agency<\/a><\/b>; I have to provide users with a continuous service.<\/p>\n

To provide that service and enjoy the holidays gained out of automation, I need a backup plan.<\/p>\n

CONTINUOUS SERVICE: LOCAL BACKUP AND URL SWITCH<\/h2>\n

Hospitals have local generators that switch on in a case of a power grid crash. To allow a continuous dataviz service a switching mechanism and a local generator are required. But how this concept could be used in my case? If the API request fails, the chart will\u00a0use a local\u00a0data. The local generator will be our local JSON file, and the switch will be probably a script in javascript.<\/p>\n

Let\u2019s do it.<\/p>\n

1ST STEP: CREATE A LOCAL JSON FILE<\/h2>\n

Click on the following link<\/a><\/b> to download the JSON file.<\/p>\n

2ND STEP: A SWITCHING MECHANISM
\n<\/a><\/b><\/h2>\n

The following javascript send the initial request to the API with the method getJSON. If it succeeds; \u00a0the chart will use the requested URL data. Otherwise, local file will be selected:<\/p>\n

\/\/ Request to the API\r\nvar url_API =\"http:\/\/api.worldbank.org\/countries\/CIV;\r\nLMC;SSA;WLD\/indicators\/EG.USE.COMM.FO.ZS?\r\nper_page=80&MRV=20&format=jsonP&prefix=?\"\r\n\/\/ Local folder where the file created in step 1 is stored\r\nvar url_local =\"data\/CIV_EG_USE_COMM_FO_ZS.json\"\r\n\r\n\/\/ variable that will take the value 1 if the call is successful\r\nAPI_success =0\r\n\r\n\/\/------- Try 1st url, if succeed, API_success=1\r\n$.getJSON(url_API, function(d) {\r\nAPI_success =1; \/\/ if failure, API_succes remains=0\r\nurl_success=url_API;\r\ndocument.getElementById('bulb_success').style.color =\"#6E9FC5\";\r\n});\r\n\r\n\/\/--------- if getJSON fails give a new URL ------------\r\nsetTimeout(function() {\r\nif (API_success ==0) { \/\/ i.e. if failure\r\nurl_success = url_local\r\ndocument.getElementById('bulb_success').style.color =\"red\";\r\n};\r\n}, 200);\r\n<\/pre>\n
LAST STEP: CREATE THE DATAVIZ WITH HIGHCHARTS<\/h2>\n
To create the interactive charts, I use Highcharts library; as It is very easy to implement and can be customized with CSS<\/a><\/b>. In this example, I use IPython notebook<\/a><\/b> to write the HTML file hosting the chart (click here<\/a><\/b>)<\/p>\n