Mixed Chart Dashboard

Please enable JavaScript to see the interactive demo.

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

<!doctype html>
<html class="zc-html">

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

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 800px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // full ZingChart schema can be found here:
    // https://www.zingchart.com/docs/api/json-configuration/
    let bgColor = '#004280';

    let oImg1 =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=';
    let oImg2 =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=';
    let oImg3 =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=';

    let g1 = {
      type: 'bar',
      backgroundColor: bgColor,
      height: '43%',
      width: '25%',
      x: '0%',
      y: '0%',
      title: {
        text: 'FAMILY SIZE',
        align: 'left',
        fontColor: '#FFF',
        fontSize: '16px',
        paddingLeft: '25px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        valueBox: {
          text: '%node-value%',
          color: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
          placement: 'top',
        },
        barWidth: '80%',
      },
      scaleX: {
        values: [1, 2, 3, 4, 5, '6+'],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          fontSize: '11px',
          textAlign: 'center',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        minValue: 0,
        maxValue: 40,
        step: 10,
        format: '%scale-value%',
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          fontSize: '11px',
        },
        lineWidth: '0px',
        label: {
          text: '% of families',
          fontSize: '11px',
          fontWeight: 'normal',
          color: '#FFF',
          paddingLeft: '45px',
        },
        maxItems: 2,
        tick: {
          visible: false,
        },
      },
      source: {
        text: '# of children',
        fontColor: '#FFF',
        fontSize: '11px',
        textAlign: 'left',
        fontWeight: 'normal',
        margin: 'auto auto 20 25',
      },
      series: [{
        values: [20, 28, 39, 10, 2, 1],
        backgroundColor: '#FFA300',
      }, ],
    };

    let g2 = {
      type: 'pie',
      backgroundColor: bgColor,
      height: '43%',
      width: '25%',
      x: '20%',
      y: '0%',
      title: {
        text: 'HOUSEHOLD INCOME',
        fontSize: '16px',
        fontColor: '#FFF',
        align: 'center',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        borderWidth: '0px',
        layout: 'auto',
      },
      series: [{
          values: [46],
          backgroundColor: '#FFDA00',
          valueBox: {
            text: '%v%<br>>$60K',
            fontColor: '#004280',
            offsetR: '-15px',
          },
        },
        {
          values: [54],
          backgroundColor: '#00AEEF',
          valueBox: {
            text: '%v%<br><$60K',
            fontColor: '#004280',
            offsetR: '-15px',
          },
        },
      ],
    };

    let g3 = {
      type: 'bar',
      backgroundColor: bgColor,
      height: '43%',
      width: '30%',
      x: '45%',
      y: '0%',
      title: {
        text: 'HOUSEHOLD INCOME:FAMILY SIZE',
        align: 'left',
        fontColor: '#FFF',
        fontSize: '16px',
        paddingLeft: '10px',
      },
      legend: {
        marginTop: '60px',
        borderColor: '#00AEEF',
        backgroundColor: bgColor,
        item: {
          fontColor: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
        },
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        barWidth: '80%',
      },
      plotarea: {
        marginLeft: '40px',
      },
      source: {
        text: '# of children',
        fontColor: '#FFF',
        fontSize: '11px',
        fontWeight: 'normal',
        margin: 'auto auto 20 15',
        textAlign: 'left',
      },
      scaleX: {
        values: [1, 2, 3, 4, 5, '6+'],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          textAlign: 'center',
          fontSize: '11px',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        minValue: 0,
        maxValue: 40,
        step: 10,
        format: '%scale-value%',
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          fontSize: '11px',
        },
        label: {
          text: '% of families',
          fontSize: '11px',
          fontWeight: 'normal',
          color: '#FFF',
          paddingLeft: '45px',
        },
        lineWidth: '0px',
        maxItems: 2,
        tick: {
          visible: false,
        },
      },
      series: [{
          text: '<$60K',
          values: [25, 30, 40, 8, 3, 2],
          backgroundColor: '#FFDA00',
        },
        {
          text: '>$60K',
          values: [20, 33, 40, 10, 2, 1],
          backgroundColor: '#00AEEF',
        },
      ],
    };

    let g4 = {
      type: 'treemap',
      backgroundColor: bgColor,
      height: '43%',
      width: '25%',
      x: '75%',
      y: '0%',
      title: {
        text: 'OTHER HOUSEHOLD MEMBERS',
        align: 'left',
        fontColor: '#FFF',
        fontSize: '16px',
      },
      options: {
        aspectType: 'palette',
        palette: ['#00AEEF', '#00BCF2', '#7DAB4B', '#7DAB4B', '#FFA300'],
        box: {
          borderColor: '#004280',
        },
        tooltipBox: {
          align: 'left',
          text: '%text: %value%',
        },
      },
      plotarea: {
        margin: '40 20 0 10',
      },
      series: [{
          text: 'spouse of<br>partner',
          value: 78,
        },
        {
          text: 'none of<br>these',
          value: 13,
        },
        {
          text: 'parent/s',
          value: 7,
        },
        {
          text: 'other<br>relatives',
          value: 7,
        },
        {
          text: 'other',
          value: 5,
        },
      ],
    };

    let g5 = {
      type: null,
      backgroundColor: bgColor,
      height: '14%',
      width: '100%',
      x: '0%',
      y: '43%',
      plotarea: {
        borderBottom: '1px solid #00AEEF',
        borderTop: '1px solid #00AEEF',
        margin: '10 25 10 25',
      },
      labels: [{
          text: '',
          width: '32px',
          height: '32px',
          backgroundImage: oImg1,
          backgroundRepeat: 'no-repeat',
          x: '40px',
          y: '20px',
        },
        {
          text: '2.5',
          fontColor: '#FFDA00',
          fontSize: '35px',
          x: '72px',
          y: '12px',
        },
        {
          text: 'Average number of children<br />in the families surveyed',
          align: 'left',
          fontColor: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
          x: '130px',
          y: '21px',
        },
        {
          text: '',
          width: '32px',
          height: '32px',
          backgroundImage: oImg2,
          backgroundRepeat: 'no-repeat',
          x: '340px',
          y: '20px',
        },
        {
          text: '>80%',
          fontColor: '#FFDA00',
          fontSize: '35px',
          x: '370px',
          y: '12px',
        },
        {
          text: 'Number of families<br />with 3 children or less.',
          align: 'left',
          fontColor: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
          x: '475px',
          y: '21px',
        },
        {
          text: '',
          backgroundImage: oImg3,
          backgroundRepeat: 'no-repeat',
          height: '32px',
          width: '32px',
          x: '680px',
          y: '20px',
        },
        {
          text: 'NA',
          fontColor: '#FFDA00',
          fontSize: '35px',
          x: '712px',
          y: '12px',
        },
        {
          text: 'There is no significant difference<br />in family size based on income.',
          fontColor: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
          align: 'left',
          x: '770px',
          y: '21px',
        },
      ],
    };

    let g6 = {
      type: 'hbar',
      backgroundColor: bgColor,
      height: '43%',
      width: '35%',
      x: '0%',
      y: '57%',
      title: {
        text: 'PARENTS EDUCATION LEVEL',
        fontSize: '16px',
        fontColor: '#FFF',
        align: 'left',
        paddingLeft: '20px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        valueBox: {
          text: '%node-value%',
          color: '#FFF',
          fontSize: '10px',
          fontWeight: 'normal',
        },
        barWidth: '70%',
      },
      plotarea: {
        margin: '40 40 20 130',
      },
      scaleX: {
        values: [
          'professional degree',
          'doctorat degree',
          'masters degree',
          '4-year college degree',
          '2-year college degree',
          'some college',
          'high school/GED',
          'less than high school',
        ],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          textAlign: 'center',
          fontWeight: 'normal',
          fontSize: '10px',
          offsetX: '-5px',
        },
        itemsOverlap: true,
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        minValue: 0,
        maxValue: 25,
        lineWidth: '0px',
        guide: {
          visible: false,
        },
        item: {
          visible: false,
        },
        tick: {
          visible: false,
        },
      },
      series: [{
        values: [2, 2, 9, 25, 14, 25, 21, 2],
        backgroundColor: '#FFA300',
      }, ],
    };

    let g7 = {
      type: 'pie',
      backgroundColor: bgColor,
      height: '43%',
      width: '20%',
      x: '30%',
      y: '57%',
      title: {
        text: 'PARENTS GENDER',
        align: 'center',
        fontColor: '#FFF',
        fontSize: '16px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        borderWidth: '0px',
      },
      scale: {
        sizeFactor: 0.8,
      },
      scaleR: {
        refAngle: 90,
      },
      series: [{
          values: [60],
          backgroundColor: '#00AEEF',
          valueBox: {
            text: '%v%<br>female',
            decimals: 0,
            fontColor: '#004280',
            fontSize: '11px',
            offsetR: '-15px',
          },
        },
        {
          values: [40],
          backgroundColor: '#FFDA00',
          valueBox: {
            text: '%v%<br>male',
            decimals: 0,
            fontColor: '#004280',
            fontSize: '11px',
            offsetR: '-15px',
          },
        },
      ],
    };

    let g8 = {
      type: 'hbar',
      backgroundColor: bgColor,
      height: '43%',
      width: '25%',
      x: '50%',
      y: '57%',
      title: {
        text: 'PARENTS EMPLOYMENT',
        align: 'left',
        fontColor: '#FFF',
        fontSize: '16px',
        paddingLeft: '25px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        valueBox: {
          text: '%node-value%',
          fontSize: '10px',
          fontWeight: 'normal',
          color: '#FFF',
        },
        barWidth: '70%',
      },
      plotarea: {
        margin: '40 30 50 120',
      },
      scaleX: {
        values: [
          'full time employee',
          'stay-at-home parent',
          'part-time employee',
          'self-employed',
          'unemployed',
          'full-time student',
        ],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#FFF',
          textAlign: 'center',
          fontWeight: 'normal',
          fontSize: '10px',
          offsetX: '-5px',
        },
        itemsOverlap: true,
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        minValue: 0,
        maxValue: 50,
        guide: {
          visible: false,
        },
        item: {
          visible: false,
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      series: [{
        values: [50, 24, 9, 8, 4, 4],
        backgroundColor: '#FFA300',
      }, ],
    };

    let g9 = {
      type: 'ring',
      backgroundColor: bgColor,
      height: '43%',
      width: '25%',
      x: '75%',
      y: '57%',
      title: {
        text: 'COMMUNITY SIZE',
        align: 'center',
        fontColor: '#FFF',
        fontSize: '16px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        borderWidth: '0px',
      },
      scale: {
        sizeFactor: 0.75,
      },
      scaleR: {
        refAngle: 270,
      },
      series: [{
          values: [37],
          backgroundColor: '#FFDA00',
          valueBox: [{
              text: '%node-value%',
              decimals: 0,
              fontColor: '#FFF',
              fontWeight: 'normal',
              fontSize: '11px',
              placement: 'out',
              offsetR: '-15px',
            },
            {
              text: 'SUB-<br>URBAN',
              fontColor: '#004280',
              fontSize: '10px',
              placement: 'fixed=50%;',
            },
          ],
        },
        {
          values: [28],
          backgroundColor: '#FFA300',
          valueBox: [{
              text: '%node-value%',
              decimals: 0,
              fontColor: '#FFF',
              fontSize: '11px',
              fontWeight: 'normal',
              offsetR: '-10px',
              placement: 'out',
            },
            {
              text: 'URBAN',
              fontColor: '#004280',
              fontSize: '10px',
              placement: 'fixed=50%;',
            },
          ],
        },
        {
          values: [18],
          backgroundColor: '#00BCF2',
          valueBox: [{
              text: '%node-value%',
              decimals: 0,
              fontColor: '#FFF',
              fontWeight: 'normal',
              fontSize: '11px',
              placement: 'out',
              offsetR: '-19px',
            },
            {
              text: 'RURAL',
              fontColor: '#004280',
              fontSize: '10px',
              placement: 'fixed=50%;',
            },
          ],
        },
        {
          values: [17],
          backgroundColor: '#7DAB4B',
          valueBox: [{
              text: '%node-value%',
              decimals: 0,
              fontColor: '#FFF',
              fontWeight: 'normal',
              fontSize: '11px',
              placement: 'out',
              offsetR: '-10px',
            },
            {
              text: 'SMALL<br>TOWN',
              fontColor: '#004280',
              fontSize: '10px',
              placement: 'fixed=50%;',
            },
          ],
        },
      ],
    };

    let chartConfig = {
      graphset: [g1, g2, g3, g4, g5, g6, g7, g8, g9],
    };

    // render chart
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-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">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let bgColor = '#004280';

let oImg1 =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=';
let oImg2 =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=';
let oImg3 =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=';

let g1 = {
  type: 'bar',
  backgroundColor: bgColor,
  height: '43%',
  width: '25%',
  x: '0%',
  y: '0%',
  title: {
    text: 'FAMILY SIZE',
    align: 'left',
    fontColor: '#FFF',
    fontSize: '16px',
    paddingLeft: '25px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    valueBox: {
      text: '%node-value%',
      color: '#FFF',
      fontSize: '11px',
      fontWeight: 'normal',
      placement: 'top',
    },
    barWidth: '80%',
  },
  scaleX: {
    values: [1, 2, 3, 4, 5, '6+'],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      fontSize: '11px',
      textAlign: 'center',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    minValue: 0,
    maxValue: 40,
    step: 10,
    format: '%scale-value%',
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      fontSize: '11px',
    },
    lineWidth: '0px',
    label: {
      text: '% of families',
      fontSize: '11px',
      fontWeight: 'normal',
      color: '#FFF',
      paddingLeft: '45px',
    },
    maxItems: 2,
    tick: {
      visible: false,
    },
  },
  source: {
    text: '# of children',
    fontColor: '#FFF',
    fontSize: '11px',
    textAlign: 'left',
    fontWeight: 'normal',
    margin: 'auto auto 20 25',
  },
  series: [
    {
      values: [20, 28, 39, 10, 2, 1],
      backgroundColor: '#FFA300',
    },
  ],
};

let g2 = {
  type: 'pie',
  backgroundColor: bgColor,
  height: '43%',
  width: '25%',
  x: '20%',
  y: '0%',
  title: {
    text: 'HOUSEHOLD INCOME',
    fontSize: '16px',
    fontColor: '#FFF',
    align: 'center',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    borderWidth: '0px',
    layout: 'auto',
  },
  series: [
    {
      values: [46],
      backgroundColor: '#FFDA00',
      valueBox: {
        text: '%v%<br>>$60K',
        fontColor: '#004280',
        offsetR: '-15px',
      },
    },
    {
      values: [54],
      backgroundColor: '#00AEEF',
      valueBox: {
        text: '%v%<br><$60K',
        fontColor: '#004280',
        offsetR: '-15px',
      },
    },
  ],
};

let g3 = {
  type: 'bar',
  backgroundColor: bgColor,
  height: '43%',
  width: '30%',
  x: '45%',
  y: '0%',
  title: {
    text: 'HOUSEHOLD INCOME:FAMILY SIZE',
    align: 'left',
    fontColor: '#FFF',
    fontSize: '16px',
    paddingLeft: '10px',
  },
  legend: {
    marginTop: '60px',
    borderColor: '#00AEEF',
    backgroundColor: bgColor,
    item: {
      fontColor: '#FFF',
      fontSize: '11px',
      fontWeight: 'normal',
    },
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    barWidth: '80%',
  },
  plotarea: {
    marginLeft: '40px',
  },
  source: {
    text: '# of children',
    fontColor: '#FFF',
    fontSize: '11px',
    fontWeight: 'normal',
    margin: 'auto auto 20 15',
    textAlign: 'left',
  },
  scaleX: {
    values: [1, 2, 3, 4, 5, '6+'],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      textAlign: 'center',
      fontSize: '11px',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    minValue: 0,
    maxValue: 40,
    step: 10,
    format: '%scale-value%',
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      fontSize: '11px',
    },
    label: {
      text: '% of families',
      fontSize: '11px',
      fontWeight: 'normal',
      color: '#FFF',
      paddingLeft: '45px',
    },
    lineWidth: '0px',
    maxItems: 2,
    tick: {
      visible: false,
    },
  },
  series: [
    {
      text: '<$60K',
      values: [25, 30, 40, 8, 3, 2],
      backgroundColor: '#FFDA00',
    },
    {
      text: '>$60K',
      values: [20, 33, 40, 10, 2, 1],
      backgroundColor: '#00AEEF',
    },
  ],
};

let g4 = {
  type: 'treemap',
  backgroundColor: bgColor,
  height: '43%',
  width: '25%',
  x: '75%',
  y: '0%',
  title: {
    text: 'OTHER HOUSEHOLD MEMBERS',
    align: 'left',
    fontColor: '#FFF',
    fontSize: '16px',
  },
  options: {
    aspectType: 'palette',
    palette: ['#00AEEF', '#00BCF2', '#7DAB4B', '#7DAB4B', '#FFA300'],
    box: {
      borderColor: '#004280',
    },
    tooltipBox: {
      align: 'left',
      text: '%text: %value%',
    },
  },
  plotarea: {
    margin: '40 20 0 10',
  },
  series: [
    {
      text: 'spouse of<br>partner',
      value: 78,
    },
    {
      text: 'none of<br>these',
      value: 13,
    },
    {
      text: 'parent/s',
      value: 7,
    },
    {
      text: 'other<br>relatives',
      value: 7,
    },
    {
      text: 'other',
      value: 5,
    },
  ],
};

let g5 = {
  type: null,
  backgroundColor: bgColor,
  height: '14%',
  width: '100%',
  x: '0%',
  y: '43%',
  plotarea: {
    borderBottom: '1px solid #00AEEF',
    borderTop: '1px solid #00AEEF',
    margin: '10 25 10 25',
  },
  labels: [
    {
      text: '',
      width: '32px',
      height: '32px',
      backgroundImage: oImg1,
      backgroundRepeat: 'no-repeat',
      x: '40px',
      y: '20px',
    },
    {
      text: '2.5',
      fontColor: '#FFDA00',
      fontSize: '35px',
      x: '72px',
      y: '12px',
    },
    {
      text: 'Average number of children<br />in the families surveyed',
      align: 'left',
      fontColor: '#FFF',
      fontSize: '11px',
      fontWeight: 'normal',
      x: '130px',
      y: '21px',
    },
    {
      text: '',
      width: '32px',
      height: '32px',
      backgroundImage: oImg2,
      backgroundRepeat: 'no-repeat',
      x: '340px',
      y: '20px',
    },
    {
      text: '>80%',
      fontColor: '#FFDA00',
      fontSize: '35px',
      x: '370px',
      y: '12px',
    },
    {
      text: 'Number of families<br />with 3 children or less.',
      align: 'left',
      fontColor: '#FFF',
      fontSize: '11px',
      fontWeight: 'normal',
      x: '475px',
      y: '21px',
    },
    {
      text: '',
      backgroundImage: oImg3,
      backgroundRepeat: 'no-repeat',
      height: '32px',
      width: '32px',
      x: '680px',
      y: '20px',
    },
    {
      text: 'NA',
      fontColor: '#FFDA00',
      fontSize: '35px',
      x: '712px',
      y: '12px',
    },
    {
      text: 'There is no significant difference<br />in family size based on income.',
      fontColor: '#FFF',
      fontSize: '11px',
      fontWeight: 'normal',
      align: 'left',
      x: '770px',
      y: '21px',
    },
  ],
};

let g6 = {
  type: 'hbar',
  backgroundColor: bgColor,
  height: '43%',
  width: '35%',
  x: '0%',
  y: '57%',
  title: {
    text: 'PARENTS EDUCATION LEVEL',
    fontSize: '16px',
    fontColor: '#FFF',
    align: 'left',
    paddingLeft: '20px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    valueBox: {
      text: '%node-value%',
      color: '#FFF',
      fontSize: '10px',
      fontWeight: 'normal',
    },
    barWidth: '70%',
  },
  plotarea: {
    margin: '40 40 20 130',
  },
  scaleX: {
    values: [
      'professional degree',
      'doctorat degree',
      'masters degree',
      '4-year college degree',
      '2-year college degree',
      'some college',
      'high school/GED',
      'less than high school',
    ],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      textAlign: 'center',
      fontWeight: 'normal',
      fontSize: '10px',
      offsetX: '-5px',
    },
    itemsOverlap: true,
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    minValue: 0,
    maxValue: 25,
    lineWidth: '0px',
    guide: {
      visible: false,
    },
    item: {
      visible: false,
    },
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [2, 2, 9, 25, 14, 25, 21, 2],
      backgroundColor: '#FFA300',
    },
  ],
};

let g7 = {
  type: 'pie',
  backgroundColor: bgColor,
  height: '43%',
  width: '20%',
  x: '30%',
  y: '57%',
  title: {
    text: 'PARENTS GENDER',
    align: 'center',
    fontColor: '#FFF',
    fontSize: '16px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    borderWidth: '0px',
  },
  scale: {
    sizeFactor: 0.8,
  },
  scaleR: {
    refAngle: 90,
  },
  series: [
    {
      values: [60],
      backgroundColor: '#00AEEF',
      valueBox: {
        text: '%v%<br>female',
        decimals: 0,
        fontColor: '#004280',
        fontSize: '11px',
        offsetR: '-15px',
      },
    },
    {
      values: [40],
      backgroundColor: '#FFDA00',
      valueBox: {
        text: '%v%<br>male',
        decimals: 0,
        fontColor: '#004280',
        fontSize: '11px',
        offsetR: '-15px',
      },
    },
  ],
};

let g8 = {
  type: 'hbar',
  backgroundColor: bgColor,
  height: '43%',
  width: '25%',
  x: '50%',
  y: '57%',
  title: {
    text: 'PARENTS EMPLOYMENT',
    align: 'left',
    fontColor: '#FFF',
    fontSize: '16px',
    paddingLeft: '25px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    valueBox: {
      text: '%node-value%',
      fontSize: '10px',
      fontWeight: 'normal',
      color: '#FFF',
    },
    barWidth: '70%',
  },
  plotarea: {
    margin: '40 30 50 120',
  },
  scaleX: {
    values: [
      'full time employee',
      'stay-at-home parent',
      'part-time employee',
      'self-employed',
      'unemployed',
      'full-time student',
    ],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#FFF',
      textAlign: 'center',
      fontWeight: 'normal',
      fontSize: '10px',
      offsetX: '-5px',
    },
    itemsOverlap: true,
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    minValue: 0,
    maxValue: 50,
    guide: {
      visible: false,
    },
    item: {
      visible: false,
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [50, 24, 9, 8, 4, 4],
      backgroundColor: '#FFA300',
    },
  ],
};

let g9 = {
  type: 'ring',
  backgroundColor: bgColor,
  height: '43%',
  width: '25%',
  x: '75%',
  y: '57%',
  title: {
    text: 'COMMUNITY SIZE',
    align: 'center',
    fontColor: '#FFF',
    fontSize: '16px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    borderWidth: '0px',
  },
  scale: {
    sizeFactor: 0.75,
  },
  scaleR: {
    refAngle: 270,
  },
  series: [
    {
      values: [37],
      backgroundColor: '#FFDA00',
      valueBox: [
        {
          text: '%node-value%',
          decimals: 0,
          fontColor: '#FFF',
          fontWeight: 'normal',
          fontSize: '11px',
          placement: 'out',
          offsetR: '-15px',
        },
        {
          text: 'SUB-<br>URBAN',
          fontColor: '#004280',
          fontSize: '10px',
          placement: 'fixed=50%;',
        },
      ],
    },
    {
      values: [28],
      backgroundColor: '#FFA300',
      valueBox: [
        {
          text: '%node-value%',
          decimals: 0,
          fontColor: '#FFF',
          fontSize: '11px',
          fontWeight: 'normal',
          offsetR: '-10px',
          placement: 'out',
        },
        {
          text: 'URBAN',
          fontColor: '#004280',
          fontSize: '10px',
          placement: 'fixed=50%;',
        },
      ],
    },
    {
      values: [18],
      backgroundColor: '#00BCF2',
      valueBox: [
        {
          text: '%node-value%',
          decimals: 0,
          fontColor: '#FFF',
          fontWeight: 'normal',
          fontSize: '11px',
          placement: 'out',
          offsetR: '-19px',
        },
        {
          text: 'RURAL',
          fontColor: '#004280',
          fontSize: '10px',
          placement: 'fixed=50%;',
        },
      ],
    },
    {
      values: [17],
      backgroundColor: '#7DAB4B',
      valueBox: [
        {
          text: '%node-value%',
          decimals: 0,
          fontColor: '#FFF',
          fontWeight: 'normal',
          fontSize: '11px',
          placement: 'out',
          offsetR: '-10px',
        },
        {
          text: 'SMALL<br>TOWN',
          fontColor: '#004280',
          fontSize: '10px',
          placement: 'fixed=50%;',
        },
      ],
    },
  ],
};

let chartConfig = {
  graphset: [g1, g2, g3, g4, g5, g6, g7, g8, g9],
};

// render chart
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

.zc-body { background:#004280; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 800px;
}

.zc-ref {
  display: none;
}

Filesystem Treemap 71/281 France Population Heat Map

Mixed Chart Dashboard

Related Documentation: