• Edit
  • Download
  • <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="HSaY2YaHApqzYedZd1c7ag==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body class="zc-body">
    
      <script nonce="HSaY2YaHApqzYedZd1c7ag==" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js'></script>
      <script nonce="HSaY2YaHApqzYedZd1c7ag==" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'></script>
    
      <div id="myChart">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
      <script nonce="HSaY2YaHApqzYedZd1c7ag==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
        // -----------------------------
        var dependencies = [
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'
        ];
        init(dependencies);
    
        // DEFINE CHART LOCATIONS (IDS)
        // -----------------------------
        // Main chart render location(s)
        var chartId = 'myChart';
    
    
        // VARS
        // -----------------------------
        var bgColorMain = "#342F2B";
        var bgColor = "#3A3635";
    
        var 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';
        var oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';
    
        var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
        var aText = [
          'TRAVEL<br>OR TRAVEL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">14%</span>',
          'BANKS<br>OR FINANCIAL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">10%</span>',
          'CLOTHES<br>OR<br>SHOES<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">23%</span>',
          'EATING OUT<br>OR<br>RESTAURANTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">21%</span>',
          'MOBILE<br>PHONES &<br>SERVICES<br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">21%</span>',
          'PERSONAL<br>CARE<br>PRODUCTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">15%</span>',
          'CARS OR<br>TRUCKS<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
          'GROCERIES<br>OR FOOD<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
          'PRESCRIPTION<br>OR OTC<br>DRUGS<br><span style="color:#01AFC7">1%</span> & <span style="color:#01A661">10%</span>'
        ];
    
    
        // CHART CONFIG
        // -----------------------------
        var chartConfig = {
          backgroundColor: bgColorMain,
          graphset: [{
            backgroundColor: bgColorMain,
            title: {
              text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
              fontSize: 28,
              color: '#FFF',
              align: 'left',
              padding: '20 0 0 20'
            },
    
            type: null,
            widgets: [{
                type: 'dashboard_lc',
                id: 'gr1',
                height: '280px',
                width: '420px',
                x: '20px',
                y: '80px',
                bgColor: bgColor,
    
                fontColorTitle: '#B0D815',
                title: 'WORLDWIDE SOCIAL<br>NETWORKING AD<br>SPENDING',
    
                dataTop: [null, null, '155.0', '75', '26.6', '30.7', '29.1'],
                lineColorPlot: '#AFD619',
                colorMarker: '#60B631',
    
                valuesScaleX: ['YEAR:', '', '2017', '2018', '2019', '2020', '2021'],
                lineColorX: '#5FB83A',
    
                minValueY: 0,
                maxValueY: 4500,
                stepY: 500,
                textScaleY: '<b>Amount Spent:</b><br><br>Millions &<br>Annual % Change',
    
                valueSeries: [null, null, 1125, 2145, 2530, 3300, 4260],
                backgroundColorBar: '#4F4E4C'
              },
              {
                type: 'dashboard_lc',
                id: 'gr2',
                height: '280px',
                width: '420px',
                x: '20px',
                y: '380px',
                bgColor: bgColor,
    
                fontColorTitle: '#F78D03',
                title: 'U.S. SOCIAL NETWORK<br>ADVERTISING SPENDING',
    
                dataTop: [null, null, '17.2', '20.3', '24.2'],
                lineColorPlot: '#FF9406',
                colorMarker: '#F85625',
    
                valuesScaleX: ['YEAR:', '', '2019', '2020', '2021'],
                lineColorX: '#FF561F',
    
                minValueY: 1,
                maxValueY: 3,
                stepY: 1,
                textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
                valueSeries: [null, null, 1.40, 1.68, 2.09],
                backgroundColorBar: '#4F4E4C'
              },
              {
                type: 'dashboard_lc',
                id: 'gr3',
                height: '280px',
                width: '420px',
                x: '20px',
                y: '680px',
                bgColor: bgColor,
    
                fontColorTitle: '#00B0C8',
                title: 'PROJECTED TOTAL U.S. ONLINE<br>ADVERTISING SPENDING',
    
                dataTop: [null, null, '10.6', '-4.6', '5.5', '6.8', '12.3', '9.5'],
                lineColorPlot: '#00B0C8',
                colorMarker: '#00535e',
    
                valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
                lineColorX: '#00B0C8',
    
                minValueY: 20,
                maxValueY: 35,
                stepY: 1,
                textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
                valueSeries: [null, null, 23.4, 22.4, 23.6, 25.2, 28.3, 31.0],
                backgroundColorBar: '#4F4E4C'
              },
              {
                type: 'dashboard_lc',
                id: 'gr4',
                height: '280px',
                width: '440px',
                x: '460px',
                y: '680px',
                bgColor: bgColor,
    
                fontColorTitle: '#c60192',
                title: 'ONLINE ADVERTISING SPENDING<br>AS PERCENT OF TOTAL MEDIA<br>ADVERTISING',
    
                dataTop: [],
                lineColorPlot: '#A50079',
                colorMarker: '#720254',
    
                valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
                lineColorX: '#A50079',
    
                minValueY: 7,
                maxValueY: 16,
                stepY: 1,
                textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
                valueSeries: [null, null, 8.7, 9.9, 11.2, 12.3, 13.8, 15.2],
                backgroundColorBar: '#4F4E4C'
              },
              {
                type: 'dashboard_pie',
                id: 'gr5',
                height: '280px',
                width: '440px',
                x: '460px',
                y: '80px',
                bgColor: bgColor,
    
                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',
                fontColorLegend: '#FFF',
                fontColorPlot: '#FFF',
    
                aData: [
                  [
                    [36], '#00B0C8', 'Facebook $500', oImgF
                  ],
                  [
                    [32], '#A40174', 'Twitter $445', oImgTw
                  ],
                  [
                    [10], '#FF9000', 'Social Games $144', null
                  ],
                  [
                    [22], '#FF0028', 'Other Networks $310', null
                  ]
                ],
              },
              {
                type: 'dashboard_pie',
                id: 'gr6',
                height: '280px',
                width: '440px',
                x: '460px',
                y: '380px',
                bgColor: bgColor,
    
                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',
                fontColorLegend: '#FFF',
                fontColorPlot: '#FFF',
    
                aData: [
                  [
                    [50], '#00B0C8', 'Facebook $835', oImgF
                  ],
                  [
                    [19], '#A40174', 'Twitter $323', oImgTw
                  ],
                  [
                    [8], '#FF9000', 'Social Games $142', null
                  ],
                  [
                    [23], '#FF0028', 'Other Networks $383', null
                  ]
                ]
              }
            ]
          }]
        };
    
        // Add additional items
        var dimX = 20;
        for (var i = 0; i < aIcons.length; i++) {
          var idNr = i + 7;
          chartConfig.graphset[0]['widgets'].push({
            type: 'dashboard_lb',
            id: idNr,
            bgColor: bgColor,
            height: '220px',
            width: '96px',
            x: dimX + 'px',
            y: '980px',
            text: aText[i],
            imgIcon: aIcons[i]
          });
          dimX += 98;
        }
    
    
        // RENDER CHARTS
        // -----------------------------
        function render() {
          zingchart.render({
            id: chartId,
            data: chartConfig,
            width: '100%',
            height: 1200,
            output: 'svg'
          });
        }
    
    
        // HELPER FNS
        // -----------------------------
    
        // Init
        function init(dependencies) {
          if (!dependencies) return;
          var SCRIPT = document.createElement('SCRIPT'),
            tmp;
          var last = dependencies.length - 1;
          // Add <script> to <body>
          dependencies.forEach(function(d, i) {
            tmp = SCRIPT.cloneNode();
            tmp.src = d;
            tmp.id = 'dependancy-' + i;
            document.body.appendChild(tmp);
          });
          // Listen for last script to load
          var lastScript = document.querySelector('#dependancy-' + last);
          lastScript.addEventListener('load', render);
        }
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body class="zc-body">
    
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js'></script>
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'></script>
    
      <div id="myChart">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
    </body>
    
    </html>
    .zc-ref {
      display: none;
    }
    // INIT
    // -----------------------------
    var dependencies = [
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons24.js'
    ];
    init(dependencies);
    
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location(s)
    var chartId = 'myChart';
    
    
    // VARS
    // -----------------------------
    var bgColorMain = "#342F2B";
    var bgColor = "#3A3635";
    
    var 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';
    var oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';
    
    var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
    var aText = [
      'TRAVEL<br>OR TRAVEL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">14%</span>',
      'BANKS<br>OR FINANCIAL<br>SERVICES<br><span style="color:#01AFC7">4%</span> & <span style="color:#01A661">10%</span>',
      'CLOTHES<br>OR<br>SHOES<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">23%</span>',
      'EATING OUT<br>OR<br>RESTAURANTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">21%</span>',
      'MOBILE<br>PHONES &<br>SERVICES<br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">21%</span>',
      'PERSONAL<br>CARE<br>PRODUCTS<br><span style="color:#01AFC7">3%</span> & <span style="color:#01A661">15%</span>',
      'CARS OR<br>TRUCKS<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
      'GROCERIES<br>OR FOOD<br><br><span style="color:#01AFC7">2%</span> & <span style="color:#01A661">15%</span>',
      'PRESCRIPTION<br>OR OTC<br>DRUGS<br><span style="color:#01AFC7">1%</span> & <span style="color:#01A661">10%</span>'
    ];
    
    
    // CHART CONFIG
    // -----------------------------
    var chartConfig = {
      backgroundColor: bgColorMain,
      graphset: [{
        backgroundColor: bgColorMain,
        title: {
          text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
          fontSize: 28,
          color: '#FFF',
          align: 'left',
          padding: '20 0 0 20'
        },
    
        type: null,
        widgets: [{
            type: 'dashboard_lc',
            id: 'gr1',
            height: '280px',
            width: '420px',
            x: '20px',
            y: '80px',
            bgColor: bgColor,
    
            fontColorTitle: '#B0D815',
            title: 'WORLDWIDE SOCIAL<br>NETWORKING AD<br>SPENDING',
    
            dataTop: [null, null, '155.0', '75', '26.6', '30.7', '29.1'],
            lineColorPlot: '#AFD619',
            colorMarker: '#60B631',
    
            valuesScaleX: ['YEAR:', '', '2017', '2018', '2019', '2020', '2021'],
            lineColorX: '#5FB83A',
    
            minValueY: 0,
            maxValueY: 4500,
            stepY: 500,
            textScaleY: '<b>Amount Spent:</b><br><br>Millions &<br>Annual % Change',
    
            valueSeries: [null, null, 1125, 2145, 2530, 3300, 4260],
            backgroundColorBar: '#4F4E4C'
          },
          {
            type: 'dashboard_lc',
            id: 'gr2',
            height: '280px',
            width: '420px',
            x: '20px',
            y: '380px',
            bgColor: bgColor,
    
            fontColorTitle: '#F78D03',
            title: 'U.S. SOCIAL NETWORK<br>ADVERTISING SPENDING',
    
            dataTop: [null, null, '17.2', '20.3', '24.2'],
            lineColorPlot: '#FF9406',
            colorMarker: '#F85625',
    
            valuesScaleX: ['YEAR:', '', '2019', '2020', '2021'],
            lineColorX: '#FF561F',
    
            minValueY: 1,
            maxValueY: 3,
            stepY: 1,
            textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
            valueSeries: [null, null, 1.40, 1.68, 2.09],
            backgroundColorBar: '#4F4E4C'
          },
          {
            type: 'dashboard_lc',
            id: 'gr3',
            height: '280px',
            width: '420px',
            x: '20px',
            y: '680px',
            bgColor: bgColor,
    
            fontColorTitle: '#00B0C8',
            title: 'PROJECTED TOTAL U.S. ONLINE<br>ADVERTISING SPENDING',
    
            dataTop: [null, null, '10.6', '-4.6', '5.5', '6.8', '12.3', '9.5'],
            lineColorPlot: '#00B0C8',
            colorMarker: '#00535e',
    
            valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
            lineColorX: '#00B0C8',
    
            minValueY: 20,
            maxValueY: 35,
            stepY: 1,
            textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
            valueSeries: [null, null, 23.4, 22.4, 23.6, 25.2, 28.3, 31.0],
            backgroundColorBar: '#4F4E4C'
          },
          {
            type: 'dashboard_lc',
            id: 'gr4',
            height: '280px',
            width: '440px',
            x: '460px',
            y: '680px',
            bgColor: bgColor,
    
            fontColorTitle: '#c60192',
            title: 'ONLINE ADVERTISING SPENDING<br>AS PERCENT OF TOTAL MEDIA<br>ADVERTISING',
    
            dataTop: [],
            lineColorPlot: '#A50079',
            colorMarker: '#720254',
    
            valuesScaleX: ['YEAR:', '', '2018', '2019', '2020', '2021', '2012', '2013'],
            lineColorX: '#A50079',
    
            minValueY: 7,
            maxValueY: 16,
            stepY: 1,
            textScaleY: '<b>Annual Totals:</b><br><br>Billions &<br>Annual % Change',
    
            valueSeries: [null, null, 8.7, 9.9, 11.2, 12.3, 13.8, 15.2],
            backgroundColorBar: '#4F4E4C'
          },
          {
            type: 'dashboard_pie',
            id: 'gr5',
            height: '280px',
            width: '440px',
            x: '460px',
            y: '80px',
            bgColor: bgColor,
    
            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',
            fontColorLegend: '#FFF',
            fontColorPlot: '#FFF',
    
            aData: [
              [
                [36], '#00B0C8', 'Facebook $500', oImgF
              ],
              [
                [32], '#A40174', 'Twitter $445', oImgTw
              ],
              [
                [10], '#FF9000', 'Social Games $144', null
              ],
              [
                [22], '#FF0028', 'Other Networks $310', null
              ]
            ],
          },
          {
            type: 'dashboard_pie',
            id: 'gr6',
            height: '280px',
            width: '440px',
            x: '460px',
            y: '380px',
            bgColor: bgColor,
    
            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',
            fontColorLegend: '#FFF',
            fontColorPlot: '#FFF',
    
            aData: [
              [
                [50], '#00B0C8', 'Facebook $835', oImgF
              ],
              [
                [19], '#A40174', 'Twitter $323', oImgTw
              ],
              [
                [8], '#FF9000', 'Social Games $142', null
              ],
              [
                [23], '#FF0028', 'Other Networks $383', null
              ]
            ]
          }
        ]
      }]
    };
    
    // Add additional items
    var dimX = 20;
    for (var i = 0; i < aIcons.length; i++) {
      var idNr = i + 7;
      chartConfig.graphset[0]['widgets'].push({
        type: 'dashboard_lb',
        id: idNr,
        bgColor: bgColor,
        height: '220px',
        width: '96px',
        x: dimX + 'px',
        y: '980px',
        text: aText[i],
        imgIcon: aIcons[i]
      });
      dimX += 98;
    }
    
    
    // RENDER CHARTS
    // -----------------------------
    function render() {
      zingchart.render({
        id: chartId,
        data: chartConfig,
        width: '100%',
        height: 1200,
        output: 'svg'
      });
    }
    
    
    // HELPER FNS
    // -----------------------------
    
    // Init
    function init(dependencies) {
      if (!dependencies) return;
      var SCRIPT = document.createElement('SCRIPT'),
        tmp;
      var last = dependencies.length - 1;
      // Add <script> to <body>
      dependencies.forEach(function(d, i) {
        tmp = SCRIPT.cloneNode();
        tmp.src = d;
        tmp.id = 'dependancy-' + i;
        document.body.appendChild(tmp);
      });
      // Listen for last script to load
      var lastScript = document.querySelector('#dependancy-' + last);
      lastScript.addEventListener('load', render);
    }