• Edit
  • Download
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-ref {
    10.       display: none;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body class="zc-body">
    16.  
    17.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js'></script>
    18.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'></script>
    19.  
    20.   <div id="myChart">
    21.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    22.   </div>
    23.  
    24.   <script>
    25.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
    26.     // -----------------------------
    27.     let dependencies = [
    28.       'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js',
    29.       'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'
    30.     ];
    31.     init(dependencies);
    32.  
    33.     // DEFINE CHART LOCATIONS (IDS)
    34.     // -----------------------------
    35.     // Main chart render location(s)
    36.     let chartId = 'myChart';
    37.  
    38.  
    39.     // letS
    40.     // -----------------------------
    41.     let bgColorMain = "#342F2B";
    42.     let bgColor = "#3A3635";
    43.  
    44.     let oImgF = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALUSURBVDhPVdJZT5NBFIDh76cY44VxuUKlWgqFiqWUYqG1LSiLFGhZS1gLymKthUptAVkLkaWKEgGxtC6oEZdgUDExmmjUuF2a+AtcXifmS9BzN5PzzDlnZqTO3jm2a1pJMHSxN/sUe40eEnO9KHLPcMDkI9HUwzZ1CykWP3p7Lyqzj63JTRRVDyAlGDwkZJ1hn9EvEgMozEESrSEO5PWjsPaxQ+vl7fuv/Bs3H7xgi6oVKdnSIyr5UVoCKG19KAVKKjiPqnCQPQKfHonKZDO8Ym+XrgtJnR9EYQmhzO//C1KKh0mzj6Kxj5OYN8yV+HOZgKF8kO0HO0myBNlvDiBpCvoFHEAtUKo9zMHyCbTOSXQV0+w2h4nENvEea4CdJjGWbRCVLYh0qGSIlKJhNKVh0p1TZFRdRFc7S0r5NBtvP/Lt23eZwtNX73j97jM1nsso8kJI6SUDosUwusopMmsvo2+cx9ByDVVFRCYifv/gFz/lBdSfvY7S2o+kLexDfWyIdHGAvnKW7Pp5cpqXMDQt4pt5xJNXn2QC3WM36RlbQV86SrLtHFKGaDu1eAytYxJ91SxG11VyG5bJcd9AXXWdq/ffyBR0zghJxRfQiPxU8SJSpn0ETcmEuKAIh2vnyGm8hrntNrbOuxhb7xB9/EGmkFs3R0bFJTLKJtCIl5EyRQtpx8fFqTNk1SyQ3byMqX0Fq2cVfds9oo82sUlgrcCHSidIKxxCOuIMU3ZikcquGDXdKzQEHuM+v07b8AZ1waesbnyRKTT4b+HwxKjoWOKwYxzpaPUUdvc8jo4oVd5b1Pkf0hRawz34DNe59f+wyxenrHMZ58lFjlRPI5kcYzhaBG6PUumN4+q+/7d6c+gJrt411l5u/muXLyaKxHG0LZAj5pZCk3fJOj6KuWYGa8Msx9wLFJ2IUtwRo6A9zqmRVSYX15la2iC/8RIWVwSj+IX13iv8AXJMWAb9C5iDAAAAAElFTkSuQmCC';
    45.     let oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';
    46.  
    47.     let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
    48.     let aText = [
    49.       'TRAVEL<br>OR TRAVEL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">14%</span>',
    50.       'BANKS<br>OR FINANCIAL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">10%</span>',
    51.       'CLOTHES<br>OR<br>SHOES<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">23%</span>',
    52.       'EATING OUT<br>OR<br>RESTAURANTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">21%</span>',
    53.       'MOBILE<br>PHONES &<br>SERVICES<br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">21%</span>',
    54.       'PERSONAL<br>CARE<br>PRODUCTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">15%</span>',
    55.       'CARS OR<br>TRUCKS<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
    56.       'GROCERIES<br>OR FOOD<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
    57.       'PRESCRIPTION<br>OR OTC<br>DRUGS<br><span style="color:#01AFC7">1%</span> & <span style="color:#01A661">10%</span>'
    58.     ];
    59.  
    60.  
    61.     // CHART CONFIG
    62.     // -----------------------------
    63.     let chartConfig = {
    64.       backgroundColor: bgColorMain,
    65.       height: '100%',
    66.       width: '100%',
    67.       title: {
    68.         text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
    69.         align: 'left',
    70.         color: '#FFF',
    71.         fontSize: '28px',
    72.         padding: '20px 0 0 20px'
    73.       },
    74.  
    75.       type: null,
    76.       widgets: [{
    77.           type: 'dashboard_lc',
    78.           id: 'gr1',
    79.           bgColor: bgColor,
    80.           height: '280px',
    81.           width: '420px',
    82.           x: '20px',
    83.           y: '80px',
    84.  
    85.           fontColorTitle: '#B0D815',
    86.           title: 'WORLDWIDE SOCIAL<br>NETWORKING AD<br>SPENDING',
    87.  
    88.           dataTop: [null, null, '155.0', '75', '26.6', '30.7', '29.1'],
    89.           lineColorPlot: '#AFD619',
    90.           colorMarker: '#60B631',
    91.  
    92.           valuesScaleX: ['YEAR:', '', '2017', '2018', '2019', '2020', '2021'],
    93.           lineColorX: '#5FB83A',
    94.  
    95.           minValueY: 0,
    96.           maxValueY: 4500,
    97.           stepY: 500,
    98.           textScaleY: '<b>Amount Spent:</b><br><br>Millions &<br>Annual % Change',
    99.  
    100.           valueSeries: [null, null, 1125, 2145, 2530, 3300, 4260],
    101.           backgroundColorBar: '#4F4E4C'
    102.         },
    103.         {
    104.           type: 'dashboard_lc',
    105.           id: 'gr2',
    106.           bgColor: bgColor,
    107.           height: '280px',
    108.           width: '420px',
    109.           x: '20px',
    110.           y: '380px',
    111.  
    112.           fontColorTitle: '#F78D03',
    113.           title: 'U.S. SOCIAL NETWORK<br>ADVERTISING SPENDING',
    114.  
    115.           dataTop: [null, null, '17.2', '20.3', '24.2'],
    116.           lineColorPlot: '#FF9406',
    117.           colorMarker: '#F85625',
    118.  
    119.           valuesScaleX: ['YEAR:', '', '2019', '2020', '2021'],
    120.           lineColorX: '#FF561F',
    121.  
    122.           minValueY: 1,
    123.           maxValueY: 3,
    124.           stepY: 1,
    125.           textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    126.  
    127.           valueSeries: [null, null, 1.40, 1.68, 2.09],
    128.           backgroundColorBar: '#4F4E4C'
    129.         },
    130.         {
    131.           type: 'dashboard_lc',
    132.           id: 'gr3',
    133.           bgColor: bgColor,
    134.           height: '280px',
    135.           width: '420px',
    136.           x: '20px',
    137.           y: '680px',
    138.  
    139.           fontColorTitle: '#00B0C8',
    140.           title: 'PROJECTED TOTAL U.S. ONLINE<br>ADVERTISING SPENDING',
    141.  
    142.           dataTop: [null, null, '10.6', '-4.6', '5.5', '6.8', '12.3', '9.5'],
    143.           lineColorPlot: '#00B0C8',
    144.           colorMarker: '#00535e',
    145.  
    146.           valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
    147.           lineColorX: '#00B0C8',
    148.  
    149.           minValueY: 20,
    150.           maxValueY: 35,
    151.           stepY: 1,
    152.           textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    153.  
    154.           valueSeries: [null, null, 23.4, 22.4, 23.6, 25.2, 28.3, 31.0],
    155.           backgroundColorBar: '#4F4E4C'
    156.         },
    157.         {
    158.           type: 'dashboard_lc',
    159.           id: 'gr4',
    160.           bgColor: bgColor,
    161.           height: '280px',
    162.           width: '440px',
    163.           x: '460px',
    164.           y: '680px',
    165.  
    166.           fontColorTitle: '#c60192',
    167.           title: 'ONLINE ADVERTISING SPENDING<br>AS PERCENT OF TOTAL MEDIA<br>ADVERTISING',
    168.  
    169.           dataTop: [],
    170.           lineColorPlot: '#A50079',
    171.           colorMarker: '#720254',
    172.  
    173.           valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
    174.           lineColorX: '#A50079',
    175.  
    176.           minValueY: 7,
    177.           maxValueY: 16,
    178.           stepY: 1,
    179.           textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    180.  
    181.           valueSeries: [null, null, 8.7, 9.9, 11.2, 12.3, 13.8, 15.2],
    182.           backgroundColorBar: '#4F4E4C'
    183.         },
    184.         {
    185.           type: 'dashboard_pie',
    186.           id: 'gr5',
    187.           bgColor: bgColor,
    188.           height: '280px',
    189.           width: '440px',
    190.           x: '460px',
    191.           y: '80px',
    192.  
    193.           title: '<span style="color:#FF9000;">SPENDING BY VENUE</span><br><span style="font-style:italic">(millions and percent of total)</span><br><span style="color:#FF9000;">2019</span> U.S. only',
    194.           fontColorLegend: '#FFF',
    195.           fontColorPlot: '#FFF',
    196.  
    197.           aData: [
    198.             [
    199.               [36], '#00B0C8', 'Facebook $500', oImgF
    200.             ],
    201.             [
    202.               [32], '#A40174', 'Twitter $445', oImgTw
    203.             ],
    204.             [
    205.               [10], '#FF9000', 'Social Games $144', null
    206.             ],
    207.             [
    208.               [22], '#FF0028', 'Other Networks $310', null
    209.             ]
    210.           ],
    211.         },
    212.         {
    213.           type: 'dashboard_pie',
    214.           id: 'gr6',
    215.           height: '280px',
    216.           width: '440px',
    217.           x: '460px',
    218.           y: '380px',
    219.           bgColor: bgColor,
    220.  
    221.           title: '<span style="color:#FF9000;">SPENDING BY VENUE</span><br><span style="font-style:italic">(millions and percent of total)</span><br><span style="color:#FF9000;">2020</span> U.S. only',
    222.           fontColorLegend: '#FFF',
    223.           fontColorPlot: '#FFF',
    224.  
    225.           aData: [
    226.             [
    227.               [50], '#00B0C8', 'Facebook $835', oImgF
    228.             ],
    229.             [
    230.               [19], '#A40174', 'Twitter $323', oImgTw
    231.             ],
    232.             [
    233.               [8], '#FF9000', 'Social Games $142', null
    234.             ],
    235.             [
    236.               [23], '#FF0028', 'Other Networks $383', null
    237.             ]
    238.           ]
    239.         }
    240.       ]
    241.     };
    242.  
    243.     // Add additional items
    244.     let dimX = 20;
    245.     for (let i = 0; i < aIcons.length; i++) {
    246.       let idNr = i + 7;
    247.       chartConfig.graphset[0]['widgets'].push({
    248.         type: 'dashboard_lb',
    249.         id: idNr,
    250.         bgColor: bgColor,
    251.         height: '220px',
    252.         width: '96px',
    253.         x: dimX + 'px',
    254.         y: '980px',
    255.         text: aText[i],
    256.         imgIcon: aIcons[i]
    257.       });
    258.       dimX += 98;
    259.     }
    260.  
    261.  
    262.     // RENDER CHARTS
    263.     // -----------------------------
    264.     function render() {
    265.       zingchart.render({
    266.         id: chartId,
    267.         data: chartConfig,
    268.         width: '100%',
    269.         height: 1200,
    270.         output: 'svg'
    271.       });
    272.     }
    273.  
    274.  
    275.     // HELPER FNS
    276.     // -----------------------------
    277.  
    278.     // Init
    279.     function init(dependencies) {
    280.       if (!dependencies) return;
    281.       let SCRIPT = document.createElement('SCRIPT'),
    282.         tmp;
    283.       let last = dependencies.length - 1;
    284.       dependencies.forEach(function(d, i) {
    285.         tmp = SCRIPT.cloneNode();
    286.         tmp.src = d;
    287.         tmp.id = 'dependancy-' + i;
    288.         document.body.appendChild(tmp);
    289.       });
    290.       // Listen for last script to load
    291.       let lastScript = document.querySelector('#dependancy-' + last);
    292.       lastScript.addEventListener('load', render);
    293.     }
    294.   </script>
    295. </body>
    296.  
    297. </html>
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.  
    12.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js'></script>
    13.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'></script>
    14.  
    15.   <div id="myChart">
    16.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    17.   </div>
    18.  
    19. </body>
    20.  
    21. </html>
    1. .zc-ref {
    2.   display: none;
    3. }
    1. // INIT
    2. // -----------------------------
    3. let dependencies = [
    4.   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js',
    5.   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'
    6. ];
    7. init(dependencies);
    8.  
    9. // DEFINE CHART LOCATIONS (IDS)
    10. // -----------------------------
    11. // Main chart render location(s)
    12. let chartId = 'myChart';
    13.  
    14.  
    15. // letS
    16. // -----------------------------
    17. let bgColorMain = "#342F2B";
    18. let bgColor = "#3A3635";
    19.  
    20. let oImgF = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALUSURBVDhPVdJZT5NBFIDh76cY44VxuUKlWgqFiqWUYqG1LSiLFGhZS1gLymKthUptAVkLkaWKEgGxtC6oEZdgUDExmmjUuF2a+AtcXifmS9BzN5PzzDlnZqTO3jm2a1pJMHSxN/sUe40eEnO9KHLPcMDkI9HUwzZ1CykWP3p7Lyqzj63JTRRVDyAlGDwkZJ1hn9EvEgMozEESrSEO5PWjsPaxQ+vl7fuv/Bs3H7xgi6oVKdnSIyr5UVoCKG19KAVKKjiPqnCQPQKfHonKZDO8Ym+XrgtJnR9EYQmhzO//C1KKh0mzj6Kxj5OYN8yV+HOZgKF8kO0HO0myBNlvDiBpCvoFHEAtUKo9zMHyCbTOSXQV0+w2h4nENvEea4CdJjGWbRCVLYh0qGSIlKJhNKVh0p1TZFRdRFc7S0r5NBtvP/Lt23eZwtNX73j97jM1nsso8kJI6SUDosUwusopMmsvo2+cx9ByDVVFRCYifv/gFz/lBdSfvY7S2o+kLexDfWyIdHGAvnKW7Pp5cpqXMDQt4pt5xJNXn2QC3WM36RlbQV86SrLtHFKGaDu1eAytYxJ91SxG11VyG5bJcd9AXXWdq/ffyBR0zghJxRfQiPxU8SJSpn0ETcmEuKAIh2vnyGm8hrntNrbOuxhb7xB9/EGmkFs3R0bFJTLKJtCIl5EyRQtpx8fFqTNk1SyQ3byMqX0Fq2cVfds9oo82sUlgrcCHSidIKxxCOuIMU3ZikcquGDXdKzQEHuM+v07b8AZ1waesbnyRKTT4b+HwxKjoWOKwYxzpaPUUdvc8jo4oVd5b1Pkf0hRawz34DNe59f+wyxenrHMZ58lFjlRPI5kcYzhaBG6PUumN4+q+/7d6c+gJrt411l5u/muXLyaKxHG0LZAj5pZCk3fJOj6KuWYGa8Msx9wLFJ2IUtwRo6A9zqmRVSYX15la2iC/8RIWVwSj+IX13iv8AXJMWAb9C5iDAAAAAElFTkSuQmCC';
    21. let oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';
    22.  
    23. let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
    24. let aText = [
    25.   'TRAVEL<br>OR TRAVEL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">14%</span>',
    26.   'BANKS<br>OR FINANCIAL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">10%</span>',
    27.   'CLOTHES<br>OR<br>SHOES<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">23%</span>',
    28.   'EATING OUT<br>OR<br>RESTAURANTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">21%</span>',
    29.   'MOBILE<br>PHONES &<br>SERVICES<br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">21%</span>',
    30.   'PERSONAL<br>CARE<br>PRODUCTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">15%</span>',
    31.   'CARS OR<br>TRUCKS<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
    32.   'GROCERIES<br>OR FOOD<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
    33.   'PRESCRIPTION<br>OR OTC<br>DRUGS<br><span style="color:#01AFC7">1%</span> & <span style="color:#01A661">10%</span>'
    34. ];
    35.  
    36.  
    37. // CHART CONFIG
    38. // -----------------------------
    39. let chartConfig = {
    40.   backgroundColor: bgColorMain,
    41.   height: '100%',
    42.   width: '100%',
    43.   title: {
    44.     text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
    45.     align: 'left',
    46.     color: '#FFF',
    47.     fontSize: '28px',
    48.     padding: '20px 0 0 20px'
    49.   },
    50.  
    51.   type: null,
    52.   widgets: [{
    53.       type: 'dashboard_lc',
    54.       id: 'gr1',
    55.       bgColor: bgColor,
    56.       height: '280px',
    57.       width: '420px',
    58.       x: '20px',
    59.       y: '80px',
    60.  
    61.       fontColorTitle: '#B0D815',
    62.       title: 'WORLDWIDE SOCIAL<br>NETWORKING AD<br>SPENDING',
    63.  
    64.       dataTop: [null, null, '155.0', '75', '26.6', '30.7', '29.1'],
    65.       lineColorPlot: '#AFD619',
    66.       colorMarker: '#60B631',
    67.  
    68.       valuesScaleX: ['YEAR:', '', '2017', '2018', '2019', '2020', '2021'],
    69.       lineColorX: '#5FB83A',
    70.  
    71.       minValueY: 0,
    72.       maxValueY: 4500,
    73.       stepY: 500,
    74.       textScaleY: '<b>Amount Spent:</b><br><br>Millions &<br>Annual % Change',
    75.  
    76.       valueSeries: [null, null, 1125, 2145, 2530, 3300, 4260],
    77.       backgroundColorBar: '#4F4E4C'
    78.     },
    79.     {
    80.       type: 'dashboard_lc',
    81.       id: 'gr2',
    82.       bgColor: bgColor,
    83.       height: '280px',
    84.       width: '420px',
    85.       x: '20px',
    86.       y: '380px',
    87.  
    88.       fontColorTitle: '#F78D03',
    89.       title: 'U.S. SOCIAL NETWORK<br>ADVERTISING SPENDING',
    90.  
    91.       dataTop: [null, null, '17.2', '20.3', '24.2'],
    92.       lineColorPlot: '#FF9406',
    93.       colorMarker: '#F85625',
    94.  
    95.       valuesScaleX: ['YEAR:', '', '2019', '2020', '2021'],
    96.       lineColorX: '#FF561F',
    97.  
    98.       minValueY: 1,
    99.       maxValueY: 3,
    100.       stepY: 1,
    101.       textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    102.  
    103.       valueSeries: [null, null, 1.40, 1.68, 2.09],
    104.       backgroundColorBar: '#4F4E4C'
    105.     },
    106.     {
    107.       type: 'dashboard_lc',
    108.       id: 'gr3',
    109.       bgColor: bgColor,
    110.       height: '280px',
    111.       width: '420px',
    112.       x: '20px',
    113.       y: '680px',
    114.  
    115.       fontColorTitle: '#00B0C8',
    116.       title: 'PROJECTED TOTAL U.S. ONLINE<br>ADVERTISING SPENDING',
    117.  
    118.       dataTop: [null, null, '10.6', '-4.6', '5.5', '6.8', '12.3', '9.5'],
    119.       lineColorPlot: '#00B0C8',
    120.       colorMarker: '#00535e',
    121.  
    122.       valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
    123.       lineColorX: '#00B0C8',
    124.  
    125.       minValueY: 20,
    126.       maxValueY: 35,
    127.       stepY: 1,
    128.       textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    129.  
    130.       valueSeries: [null, null, 23.4, 22.4, 23.6, 25.2, 28.3, 31.0],
    131.       backgroundColorBar: '#4F4E4C'
    132.     },
    133.     {
    134.       type: 'dashboard_lc',
    135.       id: 'gr4',
    136.       bgColor: bgColor,
    137.       height: '280px',
    138.       width: '440px',
    139.       x: '460px',
    140.       y: '680px',
    141.  
    142.       fontColorTitle: '#c60192',
    143.       title: 'ONLINE ADVERTISING SPENDING<br>AS PERCENT OF TOTAL MEDIA<br>ADVERTISING',
    144.  
    145.       dataTop: [],
    146.       lineColorPlot: '#A50079',
    147.       colorMarker: '#720254',
    148.  
    149.       valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
    150.       lineColorX: '#A50079',
    151.  
    152.       minValueY: 7,
    153.       maxValueY: 16,
    154.       stepY: 1,
    155.       textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    156.  
    157.       valueSeries: [null, null, 8.7, 9.9, 11.2, 12.3, 13.8, 15.2],
    158.       backgroundColorBar: '#4F4E4C'
    159.     },
    160.     {
    161.       type: 'dashboard_pie',
    162.       id: 'gr5',
    163.       bgColor: bgColor,
    164.       height: '280px',
    165.       width: '440px',
    166.       x: '460px',
    167.       y: '80px',
    168.  
    169.       title: '<span style="color:#FF9000;">SPENDING BY VENUE</span><br><span style="font-style:italic">(millions and percent of total)</span><br><span style="color:#FF9000;">2019</span> U.S. only',
    170.       fontColorLegend: '#FFF',
    171.       fontColorPlot: '#FFF',
    172.  
    173.       aData: [
    174.         [
    175.           [36], '#00B0C8', 'Facebook $500', oImgF
    176.         ],
    177.         [
    178.           [32], '#A40174', 'Twitter $445', oImgTw
    179.         ],
    180.         [
    181.           [10], '#FF9000', 'Social Games $144', null
    182.         ],
    183.         [
    184.           [22], '#FF0028', 'Other Networks $310', null
    185.         ]
    186.       ],
    187.     },
    188.     {
    189.       type: 'dashboard_pie',
    190.       id: 'gr6',
    191.       height: '280px',
    192.       width: '440px',
    193.       x: '460px',
    194.       y: '380px',
    195.       bgColor: bgColor,
    196.  
    197.       title: '<span style="color:#FF9000;">SPENDING BY VENUE</span><br><span style="font-style:italic">(millions and percent of total)</span><br><span style="color:#FF9000;">2020</span> U.S. only',
    198.       fontColorLegend: '#FFF',
    199.       fontColorPlot: '#FFF',
    200.  
    201.       aData: [
    202.         [
    203.           [50], '#00B0C8', 'Facebook $835', oImgF
    204.         ],
    205.         [
    206.           [19], '#A40174', 'Twitter $323', oImgTw
    207.         ],
    208.         [
    209.           [8], '#FF9000', 'Social Games $142', null
    210.         ],
    211.         [
    212.           [23], '#FF0028', 'Other Networks $383', null
    213.         ]
    214.       ]
    215.     }
    216.   ]
    217. };
    218.  
    219. // Add additional items
    220. let dimX = 20;
    221. for (let i = 0; i < aIcons.length; i++) {
    222.   let idNr = i + 7;
    223.   chartConfig.graphset[0]['widgets'].push({
    224.     type: 'dashboard_lb',
    225.     id: idNr,
    226.     bgColor: bgColor,
    227.     height: '220px',
    228.     width: '96px',
    229.     x: dimX + 'px',
    230.     y: '980px',
    231.     text: aText[i],
    232.     imgIcon: aIcons[i]
    233.   });
    234.   dimX += 98;
    235. }
    236.  
    237.  
    238. // RENDER CHARTS
    239. // -----------------------------
    240. function render() {
    241.   zingchart.render({
    242.     id: chartId,
    243.     data: chartConfig,
    244.     width: '100%',
    245.     height: 1200,
    246.     output: 'svg'
    247.   });
    248. }
    249.  
    250.  
    251. // HELPER FNS
    252. // -----------------------------
    253.  
    254. // Init
    255. function init(dependencies) {
    256.   if (!dependencies) return;
    257.   let SCRIPT = document.createElement('SCRIPT'),
    258.     tmp;
    259.   let last = dependencies.length - 1;
    260.   dependencies.forEach(function(d, i) {
    261.     tmp = SCRIPT.cloneNode();
    262.     tmp.src = d;
    263.     tmp.id = 'dependancy-' + i;
    264.     document.body.appendChild(tmp);
    265.   });
    266.   // Listen for last script to load
    267.   let lastScript = document.querySelector('#dependancy-' + last);
    268.   lastScript.addEventListener('load', render);
    269. }