[json] graphset > shapes > options > choropleth

<!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-body {
      background: #fff;
    }

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

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

<body class="zc-body">
  <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
    // -----------------------------
    // Define Module Location
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    // Load Maps
    zingchart.loadModules('maps, maps-fraL2, color-scale', init);

    function init() {
      let items = zingchart.maps.getItems('fraL2');

      // For each department, create fake data with percentages for each party
      let scores = {
        REM: {},
        LR: {},
        PS: {}
      }
      // Fill w/ data
      for (let i = 0; i < items.length; i++) {
        let base = 35000;
        let above90 = rand(0, 100) > 90;
        let lenCheck = i % (Math.round(items.length / 4)) === 0;
        if (above90 || lenCheck) base = 25000;
        let pp1 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
        let pp2 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
        let pp3 = parseFloat((100 - pp1 - pp2).toFixed(3));
        scores['REM'][items[i]] = pp1;
        scores['LR'][items[i]] = pp2;
        scores['PS'][items[i]] = pp3;
      }

      // Main chart config
      let gmain = {
        type: 'null',
        title: {
          fontSize: '13px',
          text: 'Choropleth Demo'
        },
        shapes: [{
          type: 'zingchart.maps',
          options: {
            name: 'fraL2',
            scale: true,
            zooming: false,
            panning: false,
            scrolling: false,
            choropleth: {
              aspect: 'gradient',
              steps: [0, 1, 2, 3],
              effect: 'darken',
            },
            style: {
              borderAlpha: 0.1,
              borderColor: '#fff',
              controls: {
                visible: false
              },
              label: {
                visible: false
              },
              items: {}
            }
          }
        }]
      };

      for (let i = 0; i < items.length; i++) {
        let fVal = 0,
          sPreview = '';

        let aPreview = [];
        aPreview.push(['REM', scores['REM'][items[i]]]);
        aPreview.push(['LR', scores['LR'][items[i]]]);
        aPreview.push(['PS', scores['PS'][items[i]]]);
        aPreview.sort(function(a, b) {
          return b[1] - a[1];
        });

        if (scores['REM'][items[i]] > scores['LR'][items[i]] && scores['REM'][items[i]] > scores['PS'][items[i]]) {
          fVal = 0.5;
        }
        if (scores['LR'][items[i]] > scores['REM'][items[i]] && scores['LR'][items[i]] > scores['PS'][items[i]]) {
          fVal = 1.5;
        }
        if (scores['PS'][items[i]] > scores['REM'][items[i]] && scores['PS'][items[i]] > scores['LR'][items[i]]) {
          fVal = 2.5;
        }
        gmain.shapes[0].options.style.items[items[i]] = {
          dataValue: fVal,
          dataPreview: sPreview
        };
      }



      // CHART CONFIG
      // -----------------------------
      let cdata = {
        backgroundColor: '#fff',
        borderColor: '#ddd',
        borderWidth: '2px',
        graphset: [gmain]
      };


      // RENDER CHARTS
      // -----------------------------
      zingchart.render({
        id: 'myChart',
        width: 600,
        height: 600,
        output: 'svg',
        data: cdata,
        modules: 'color-scale'
      });
    }


    // HELPER FNS
    // -----------------------------

    function createBar(score, color) {
      let sBar = "<span style='font-weight:bold;color:" + color + "'>";
      for (let b = 0; b < Math.round(score / 4); b++) {
        sBar += '\u2588';
      }
      sBar += '</span>';
      return sBar;
    }

    function rand(min, max) {
      return Math.round(min + (max - min) * Math.random());
    };
  </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">
  <div id="myChart">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
</body>

</html>

.zc-body {
  background: #fff;
}

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

.zc-ref {
  display: none;
}

// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load Maps
zingchart.loadModules('maps, maps-fraL2, color-scale', init);

function init() {
  let items = zingchart.maps.getItems('fraL2');

  // For each department, create fake data with percentages for each party
  let scores = {
    REM: {},
    LR: {},
    PS: {}
  }
  // Fill w/ data
  for (let i = 0; i < items.length; i++) {
    let base = 35000;
    let above90 = rand(0, 100) > 90;
    let lenCheck = i % (Math.round(items.length / 4)) === 0;
    if (above90 || lenCheck) base = 25000;
    let pp1 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    let pp2 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    let pp3 = parseFloat((100 - pp1 - pp2).toFixed(3));
    scores['REM'][items[i]] = pp1;
    scores['LR'][items[i]] = pp2;
    scores['PS'][items[i]] = pp3;
  }

  // Main chart config
  let gmain = {
    type: 'null',
    title: {
      fontSize: '13px',
      text: 'Choropleth Demo'
    },
    shapes: [{
      type: 'zingchart.maps',
      options: {
        name: 'fraL2',
        scale: true,
        zooming: false,
        panning: false,
        scrolling: false,
        choropleth: {
          aspect: 'gradient',
          steps: [0, 1, 2, 3],
          effect: 'darken',
        },
        style: {
          borderAlpha: 0.1,
          borderColor: '#fff',
          controls: {
            visible: false
          },
          label: {
            visible: false
          },
          items: {}
        }
      }
    }]
  };

  for (let i = 0; i < items.length; i++) {
    let fVal = 0,
      sPreview = '';

    let aPreview = [];
    aPreview.push(['REM', scores['REM'][items[i]]]);
    aPreview.push(['LR', scores['LR'][items[i]]]);
    aPreview.push(['PS', scores['PS'][items[i]]]);
    aPreview.sort(function(a, b) {
      return b[1] - a[1];
    });

    if (scores['REM'][items[i]] > scores['LR'][items[i]] && scores['REM'][items[i]] > scores['PS'][items[i]]) {
      fVal = 0.5;
    }
    if (scores['LR'][items[i]] > scores['REM'][items[i]] && scores['LR'][items[i]] > scores['PS'][items[i]]) {
      fVal = 1.5;
    }
    if (scores['PS'][items[i]] > scores['REM'][items[i]] && scores['PS'][items[i]] > scores['LR'][items[i]]) {
      fVal = 2.5;
    }
    gmain.shapes[0].options.style.items[items[i]] = {
      dataValue: fVal,
      dataPreview: sPreview
    };
  }



  // CHART CONFIG
  // -----------------------------
  let cdata = {
    backgroundColor: '#fff',
    borderColor: '#ddd',
    borderWidth: '2px',
    graphset: [gmain]
  };


  // RENDER CHARTS
  // -----------------------------
  zingchart.render({
    id: 'myChart',
    width: 600,
    height: 600,
    output: 'svg',
    data: cdata,
    modules: 'color-scale'
  });
}


// HELPER FNS
// -----------------------------

function createBar(score, color) {
  let sBar = "<span style='font-weight:bold;color:" + color + "'>";
  for (let b = 0; b < Math.round(score / 4); b++) {
    sBar += '\u2588';
  }
  sBar += '</span>';
  return sBar;
}

function rand(min, max) {
  return Math.round(min + (max - min) * Math.random());
};