DevTools ???? ??? ???? ?? ??? ?? ?? ??????. ??? ??? ??? ????.

???! ??? ??? ????? ??? ?? ??? ?????.

?? ?? ?? ???? ?? ?? ??? ???? ???? (Chart.js? ??? ??? ??? ???). ?? ?? ???? ?? ???? ???? ????.

? ????? JSON ?? ? ?? ?????. ?? ?? ??? ?? ? ? ????.

 // ? JSON ? ???? ?? var var var labels = json.map (function (e) {
  ?? e.year;
});
Console.log (???); // [ "2016", "2017", "2018", "2019"]]

// JSON ? ??? ?? ? ?? var value = json.map (function (e) {
  return e.itemssold;
});
Console.log (?); // [ "10", "25", "55", "120"]

// BuildChart ??? ???? ??? ??????. var ?? = BuildChart (???, ?, "?? ??");

?? ??! ?? ???? ???? JavaScript ???? ???? ????????.

(... ?? ??? ??? ??? ???????? ?? ??? ? ? ???? ????? ...)

??? ?? 2 : ??? API

???? ?? ?? API? ???, ? ? ?? ???? ??? ???? ?? ?????. API ? ??? ???? ??? ??? ???? ??? ??? ?? ?????. ?? Forbes 400 Rich List API? ???? ???? ?? ?? ? 10 ?? ?? ? ???? ?? ??? ?? ?? ????. ???? ! ?? ?? ?? ??? ???? ??? API? ? ?? ???? ?????. ??? ?? ??? ??? JavaScript? ???? ??? ??? ? ????? ??? ????? ???? ?????!

?? ?? ??? ?? ???? ???? ? ?? ??? ?????.

 // ... (??? ????? 'HorizontalBar'? ?? ??? ???? ??) ...

???? ??? ?????? ??? HTML ??? ??? ?????.

<canvas id="myChart"></canvas>

?? ??? ???? ?????. Console?? Forbes API ??? ??? ????? ???.

(... API? ?? ? JSON ???? ?? ??? ??????? API? ?? ?? ? ? ???? ????? ...)

?? ? JSON ????? ? ? ??? ??? ?? ? ??? ?? ??? ??? ????. ??? ??? ??? ??? ???!

??? JavaScript ??? ???? API? ???? ???? ??? ????? ?? ???? ???? ????? ???? ???? ??? ??? ? ? ????.

 // ... (buildChart ?? ??) ...

var xhttp = new xmlhttprequest ();
xhttp.onreadystatechange = function () {
  if (this.readystate == 4 && this.status == 200) {
    var json = json.parse (this.response);
    // JSON ??? ? ?? var var labels = json.map (function (e) {? ?? ?????.
      ?? e.name;
    });
    // JSON ? ??? ?? ? ?? var value = json.map (function (e) {
      ?? (e.realtimeworth / 1000); // 1000?? ???, ??? 10 ????});
    BuildChart (???, ?, "??? ? ??"); // ???? ???? ?? ??? ??}}
};
xhttp.open ( "get", "https://forbes400.https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send ();

(... ?? ??? ??? ??? ???????? ?? ??? ? ? ???? ????? ...)

??? ?? 3 : Google ??

???? ??? ?? HTML ???? API? ???? ???? ??? ? ???. ??? ?? ?? ?????? Google ??? ??? ????? ??? ??? ???? ??? ?? ? ????!

?? Google ??? ????? ? ?? ??? ????.

• Google ??? ???????
• Google ??? ???????? (?, ?? ???? ???? ??)

? ? ??? ???? ? JSON ??? Google ??? ??? ? ? ????.

??? ??? ???? ?? ????? ?? ? Google ?????. ???? ?? ID, ?? ? ?? ? ?? ??? ? ?? ??? ??? ???? ????.

?? ???? URL? ?? ??? ??? ? ?? ????? ???????.

 <code>https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg</code>

??? ??? ID?? Get ??? Google? ??? ? ??? ????. JSON?? GET ??? ????? ???? ?? URL? ?????.

 <code>https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json</code>

??? ???? ??? ?? URL? ? ????.

 <code>https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json</code>

???? ?? ??? ??? ????.

(... Google Sheets API? ?? ? JSON ??? ??? ??? ???????? API? ?? ?? ? ? ???? ????? ...)

??? ??? feed.entry ?? ?????. ??? ??? ???? ???? ??? ?? ? ? ??? ????.

(... Google Sheets API? ?? ? JSON ??? ??? feed.entry ??? ??? ??? ????????. gsx$date ? gsx$productsproduced ?? ????? API? ?? ?? ? ? ???? ????? ...)

????? ??? ??? ??????. Google Sheets API? gsx$ (? : gsx$date )? ? ? ???? ?????. ???? ???? ?? ? ??? ???? ??? ???? ???? ?????. ??? ??? ?? ?? ???? ??? ? ??? ???? ?? ???? ???????.

 // ... (??? ????? 'bar'? ???? ??? ??? ??????) ...

var xhttp = new xmlhttprequest ();
xhttp.onreadystatechange = function () {
  if (this.readystate == 4 && this.status == 200) {
    var json = json.parse (this.response);
    Console.log (JSON);

    // JSON ??? ? ?? var var labels = json.feed.entry.map (function (e) {? ?????.
      return e.gsx $ date. $ t;
    });

    // JSON ? ??? ?? ? ?? var value = json.feed.entry.map (function (e) {
      return e.gsx $ products -produced. $ t;
    });

    BuildChart (???, ?, "?? ???");
  }
};
xhttp.open ( "get", "https://spreadsheets.google.com/feeds/list/1yshjh6imn0akimycuvhozq_tvs6npt4mdxpkdtsfvfg/od6/public/full?alt=json", false);
xhttp.send ();

(... ?? ??? ??? ??? ???????? ?? ??? ? ? ???? ????? ...)

???? ??? ?? ?????

???? ??? ??? ?? ???? ?? ??? ?? ?? ??? ??? ?? ???? ????. ??? ? ??? ??? ??? ???????? ? ??? ??? ?? ? ????.

???? ?? ??? ??? ?? ??? ???? ??? ???? ??? ?? ???? ????! ??? ??? ?? ???? ???? ????. ??? ??? ??? ? ?? ???? ??? ?? ?? ?? ?? ???????.

? ?? ?? ?????

• Chart.js
• NVD3 (D3.JS ?)
• ? ??
• Canvasjs

? ?? ??? ???? ??

• ?????
• ??
• ???

? ?? ? ??? ?? ??? ?? ??? ????? ?? ??? ?????. ??? ??? ?? ??? ??? ???? ??? ? ?? ??? ???? ?? ?? ?? ?????. ???? ?? ???? ???? ?????.