html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<canvas id="myChart"></canvas>
<div id="filebin"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">
var dataTitles = [];
var dataValues = [];
var dataColor = [];
// this is need to overcome the cross origin browser issue when making a XMLHttpRequest
var cors = 'https://cors-anywhere.herokuapp.com/';
// this URL leads to a download page to get the files you stored on filebin.net
var URL = 'https://filebin.net/bddbcas2xtfiufnj/data.json?t=at5f150y';
// use the iframe to show the type of page being access via the url
document.querySelector('#filebin').innerHTML += `<iframe id="frame" src='https://filebin.net/bddbcas2xtfiufnj/data.json?t=at5f150y'></iframe>`;
//Get JSON Data -- should be fetch page
function loadJSON(callback)
{
console.log(URL)
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET', cors+URL, true);
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
testData = {
"labels": {
"x": "Country",
"y": "Population"
},
"items": [
{
"title": "South Africa",
"description": "South Africa is a country on the southernmost tip of the African continent, marked by several distinct ecosystems. Inland safari destination Kruger National Park is populated by big game. The Western Cape offers beaches, lush winelands around Stellenbosch and Paarl, craggy cliffs at the Cape of Good Hope, forest and lagoons along the Garden Route, and the city of Cape Town, beneath flat-topped Table Mountain.",
"color": "#253b6e",
"value": 58065097
},
{
"title": "Sudan",
"description": "Sudan, officially the Republic of the Sudan and sometimes referred to as North Sudan, is a country in Northeast Africa.",
"color": "#1f5f8b",
"value": 42514094
},
{
"title": "Ethiopia",
"description": "Ethiopia, in the Horn of Africa, is a rugged, landlocked country split by the Great Rift Valley. With archaeological finds dating back more than 3 million years, it’s a place of ancient culture. Among its important sites are Lalibela with its rock-cut Christian churches from the 12th–13th centuries. Aksum is the ruins of an ancient city with obelisks, tombs, castles and Our Lady Mary of Zion church.",
"color": "#253b6e",
"value": 110135635
},
{
"title": "Iran",
"description": "Iran, also called Persia, and officially the Islamic Republic of Iran, is a country in Western Asia. With over 81 million inhabitants, Iran is the world's 18th most populous country. Its territory spans 1,648,195 km², making it the second largest country in the Middle East and the 17th largest in the world.",
"color": "#80caef",
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run