Long description

Set 1 is labeled J SON data received from external A P I. Line 1: Open square bracket open curly brace. Line 2: Open double quotes year close double quote colon 2017 comma. Line 3: Open double quotes portfolio close double quotes colon open square bracket open curly brace. Line 4: Open double quotes symbol close double quotes colon open double quotes M S F T close double quotes comma. Line 5: Open double quotes owned close double quotes colon 425. Line 6: Close curly brace comma open curly brace. Line 7: Open double quotes symbol close double quotes colon open double quotes G I S close double quotes comma. Line 8: Open double quotes owned close double quotes colon 300. Line 9: Close curly brace comma open curly brace. Line 10: Open double quotes symbol close double quotes colon open double quotes A P P L close double quotes comma. Line 11: Open double quotes owned close double quotes colon 600. Line 12: Close curly brace comma open curly brace. Line 13: Open double quotes symbol close double quotes colon open double quotes F B close double quotes comma. Line 14: Open double quotes owned close double quotes colon 400. Line 15: Close curly brace close square bracket. Line 16: Close curly brace comma. Line 17: Open curly brace. Line 18: Open double quotes year close double quotes colon 2018 comma. Line 19: Open double quotes portfolio close double quotes colon open square bracket ellipsis close square bracket. Line 20: Close curly brace comma. Line 21: Open curly brace. Line 22: Open double quotes year close double quotes colon 2019 comma. Line 23: Open double quotes portfolio close double quotes colon open square bracket ellipsis close square bracket. Line 24: Close curly bracket close square bracket. An arrow labeled That data needs to be transformed into the structure expected by the charting A P I points from set 1 points to the right at set 2.

Set 2 consists of 14 lines of code. Line 1: function transformDataForCharting open parenthesis data close parenthesis open curly brace. Line 2: const portfolioData equals open square bracket close bracket semicolon. Line 3: data dot StartCommand for Each EndCommand open parenthesis open parenthesis s close parenthesis arrow function open curly brace. Line 4: StartCommand let EndCommand trace equals open curly brace close curly brace. Semicolon. Line 5: trace dot x equals open square bracket close square bracket semicolon. Line 6: trace dot y equals open square bracket close square bracket semicolon. Line 7: trace dot type equals open single quote bar close single quote semicolon. Line 8: trace dot name equals s dot year semicolon. Line 9: StartCommand for EndCommand open parenthesis StartCommand let EndCommand p of s dot portfolio close parenthesis open curly brace. Line 10: trace dot x dot push open parenthesis p dot symbol close parenthesis semicolon. Line 11: trace dot y dot push open parenthesis p dot owned close parenthesis semicolon. Line 12: Close curly brace. Line 13: portfolioData dot push open parenthesis trace close parenthesis semicolon. Line 13: Close curly brace close parenthesis semicolon. Line 14: return portfolioData semicolon. Line 14: Close curly brace. An arrow labeled Transformation function returns data in format needed by charting API points from set 2 to set 3.

Set 3 consists of eight lines of code. Line 1: Open square bracket open curly brace. Line 2: x colon open square bracket open double quotes M S F T close double quotes comma open double quotes G I S close double quotes comma open double quotes A P P L close double quotes comma open double quotes A M Z N close double quotes comma open double quotes F B close double quotes close square bracket comma. Line 3: y colon open square bracket 425 comma 300 comma 600 comma 50 comma 400 close square bracket comma. Line 4: type colon open double quotes bar close double quotes comma. Line 5: name colon 2017. Line 6: Close curly brace comma. Line 7: Open curly brace ellipsis close curly brace comma. Line 8: Open curly brace ellipsis close curly brace close square bracket. An arrow labeled Chart can now be generated using the re-formatted data points from set 3 to the homepage at the left.

The chart in the homepage is labeled Portfolio Changes. The horizontal axis has the markings M S F T, G I S, A P P L, A M Z N, and F B. The vertical axis ranges from 0 to 600 in increments of 100 units. The bars of the chart are grouped for the years 2017, 2018, and 2019 and are represented by the colors blue, orange, and green, respectively. The vertical values that correspond to the group at M S F T are approximately at 420, 200, and 140. The vertical values that correspond to the group at G I S are approximately at 300, 300, and 360. The vertical values that correspond to the group at A P P L are approximately at 600, 500, and 460. The vertical values that correspond to the group at A M Z N are approximately at 50, 80, and 210. The vertical values that correspond to the group at F B are approximately at 400, 300, and 280. Three squares labeled 2017, 2018, and 2019 are placed one below the other at the right of the chart. The square that corresponds to 2017 is colored blue. The square that corresponds to 2018 is colored orange. The square that corresponds to 2019 is colored green.