Mixed Pie and Line Chart Dashboard

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/D4PCH0CF

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets24.js'></script>
  <script nonce="undefined" 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>
    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>

// 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);
}

.zc-ref { display:none; }

College Organization Tree 50/270 Range Chart with Median Values

Mixed Pie and Line Chart Dashboard

Related Documentation: