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
    // -----------------------------
    let 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)
    let chartId = 'myChart';


    // letS
    // -----------------------------
    let bgColorMain = "#342F2B";
    let bgColor = "#3A3635";

    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';
    let oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';

    let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
    let 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
    // -----------------------------
    let chartConfig = {
      backgroundColor: bgColorMain,
      height: '100%',
      width: '100%',
      title: {
        text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
        align: 'left',
        color: '#FFF',
        fontSize: '28px',
        padding: '20px 0 0 20px'
      },

      type: null,
      widgets: [{
          type: 'dashboard_lc',
          id: 'gr1',
          bgColor: bgColor,
          height: '280px',
          width: '420px',
          x: '20px',
          y: '80px',

          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',
          bgColor: bgColor,
          height: '280px',
          width: '420px',
          x: '20px',
          y: '380px',

          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',
          bgColor: bgColor,
          height: '280px',
          width: '420px',
          x: '20px',
          y: '680px',

          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',
          bgColor: bgColor,
          height: '280px',
          width: '440px',
          x: '460px',
          y: '680px',

          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',
          bgColor: bgColor,
          height: '280px',
          width: '440px',
          x: '460px',
          y: '80px',

          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
    let dimX = 20;
    for (let i = 0; i < aIcons.length; i++) {
      let 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;
      let SCRIPT = document.createElement('SCRIPT'),
        tmp;
      let 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
      let 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
// -----------------------------
let 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)
let chartId = 'myChart';


// letS
// -----------------------------
let bgColorMain = "#342F2B";
let bgColor = "#3A3635";

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';
let oImgTw = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQ4T2MMWP3xPwOZgHHgNQtzMjG8//GP4R+SJ5gYGRjCNNkZzKRYGB59+sew694vBjZmRoYLL/+APQp3dowOO4MULxPDlDM/GL79hpjgocTGkG7EAQ+RP/8YGBZf/sGw6fYvVM2O8qwMeaacDB9//mfYfvcXw5nnfxj8VNkY7ORY4Zq//PrPkL79C9xwuM3mUiwM2SacDLxsjDjD/vGnfwx5u77A5eGatUWZGZrtuBkYcetl2PfgN8PkM98xNYNEIrXZGYI12BmYcRhQuf8rw423f7Fr1hRhZqi04sLq9L0PfjNMQbIVJbRBHFDUWMuwMmQZczBwsCCsP/rkN8OEU98ZQKGNDFD8HKnFwaAlyswA0gaK71vv/jJsuf2LAaQZG8BIniAbuVkZGD7/+s/wC+E94jSTkkcoyhgACZiJ1cjSiskAAAAASUVORK5CYII=';

let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 'ic06', 'ic07', 'ic08'];
let 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
// -----------------------------
let chartConfig = {
  backgroundColor: bgColorMain,
  height: '100%',
  width: '100%',
  title: {
    text: 'THE RISE OF SOCIAL NETWORKING AD SPENDING',
    align: 'left',
    color: '#FFF',
    fontSize: '28px',
    padding: '20px 0 0 20px'
  },

  type: null,
  widgets: [
    {
      type: 'dashboard_lc',
      id: 'gr1',
      bgColor: bgColor,
      height: '280px',
      width: '420px',
      x: '20px',
      y: '80px',

      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',
      bgColor: bgColor,
      height: '280px',
      width: '420px',
      x: '20px',
      y: '380px',

      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',
      bgColor: bgColor,
      height: '280px',
      width: '420px',
      x: '20px',
      y: '680px',

      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',
      bgColor: bgColor,
      height: '280px',
      width: '440px',
      x: '460px',
      y: '680px',

      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',
      bgColor: bgColor,
      height: '280px',
      width: '440px',
      x: '460px',
      y: '80px',

      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
let dimX = 20;
for (let i = 0; i < aIcons.length; i++) {
  let 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;
  let SCRIPT = document.createElement('SCRIPT'), tmp;
  let 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
  let 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: