• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="SFFD6dUPdGLamCrDz8vkAw==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .chart--container {
          min-height: 530px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script nonce="SFFD6dUPdGLamCrDz8vkAw==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let aColorRange = ['#D36A67', '#E5896C', '#F9BC7F', '#F9DEA7', '#9CD8B1', '#91BAA0', '#389B96', '#425B5E'];
        let aDomain = [100000, 40000000]; // [mix,max]
    
        let chartItems = {
          CA: {
            value: 38332521
          },
          OR: {
            value: 3930065
          },
          WA: {
            value: 6971406
          },
          NV: {
            value: 2790136
          },
          ID: {
            value: 1612136
          },
          UT: {
            value: 2900872
          },
          AZ: {
            value: 6626624
          },
          MT: {
            value: 1015165
          },
          WY: {
            value: 582658
          },
          CO: {
            value: 5268367
          },
          NM: {
            value: 2085287
          },
          AK: {
            value: 735132
          },
          HI: {
            value: 1404054
          },
          TX: {
            value: 26448193
          },
          OK: {
            value: 3850568
          },
          KS: {
            value: 2893957
          },
          NE: {
            value: 1868516
          },
          SD: {
            value: 844877
          },
          ND: {
            value: 723393
          },
          MN: {
            value: 5420380
          },
          IA: {
            value: 3090416
          },
          MO: {
            value: 6044171
          },
          AR: {
            value: 2959373
          },
          LA: {
            value: 4625470
          },
          MS: {
            value: 2991207
          },
          TN: {
            value: 6495978
          },
          KY: {
            value: 4395295
          },
          IL: {
            value: 12882135
          },
          WI: {
            value: 5742713
          },
          MI: {
            value: 9895622
          },
          IN: {
            value: 6570902
          },
          AL: {
            value: 4833722
          },
          GA: {
            value: 9992167
          },
          FL: {
            value: 19552860
          },
          SC: {
            value: 4774839
          },
          NC: {
            value: 9848060
          },
          VA: {
            value: 8260405
          },
          WV: {
            value: 1854304
          },
          OH: {
            value: 11570808
          },
          PA: {
            value: 12773801
          },
          DC: {
            value: 681170
          },
          MD: {
            value: 5928814
          },
          DE: {
            value: 925749
          },
          NJ: {
            value: 8899339
          },
          NY: {
            value: 19651127
          },
          CT: {
            value: 3596080
          },
          RI: {
            value: 1051511
          },
          MA: {
            value: 6692824
          },
          VT: {
            value: 626630
          },
          NH: {
            value: 1323459
          },
          ME: {
            value: 1328302
          }
        };
    
        let chartConfig = {
          title: {
            text: 'Population By Province',
            align: 'left',
            fontSize: '14px'
          },
          shapes: [{
            type: 'zingchart.maps',
            options: {
              name: 'usa',
              scale: {
                type: 'quantize', // if you define threshold here your domain length must match your range length
                domain: aDomain, // [min,max]
                range: aColorRange
              },
              style: {
                tooltip: {
                  'background-color': 'inherit',
                  'border-color': '#FFF',
                  'border-width': 2,
                  'font-color': '#000',
                  'font-size': 15
                },
                controls: {
                  placement: 'br'
                },
                hoverState: {
                  backgroundColor: 'transparent',
                  borderColor: '#000',
                  borderWidth: '2px'
                },
                items: chartItems,
                label: { // text displaying. Like valueBox
                  fontSize: '8px',
                  visible: true
                }
              },
              zoom: 1.1
            }
          }],
          choropleth: {
            legend: {
              header: {
                text: 'Population Range'
              },
              item: {
                cursor: 'pointer',
              },
              marker: {
                cursor: 'pointer'
              },
              align: 'left',
              verticalAlign: 'bottom',
              items: [{
                text: ' > 100,000'
              }]
            }
          }
        };
    
        zingchart.loadModules('maps,maps-usa');
        zingchart.render({
          id: 'myChart',
          modules: 'choropleth',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
    
        // Used to only bind events once. When the window re-sizes we don't need to overwrite the events
        let firstTimeLoad = true;
    
        let leftOrRight = (value, left, right) => {
          let leftDiff = Math.abs(value - left);
          let rightDiff = Math.abs(value - right);
          return leftDiff < rightDiff ? true : false
        };
    
        let isBetween = (value, left, right) => {
          return value > left && value < right;
        };
    
        let thresholdIndex = (value, scale) => {
          for (let i = 0; i < scale.length; i++) {
            if (value < scale[i]) {
              return i;
            }
          }
          return scale.length;
        };
    
        let quantizeIndex = (value, scale) => {
          let first = scale[0];
          let last = scale[scale.length - 1];
          for (let i = 0; i < scale.length; i++) {
            if (value <= first) {
              return 0;
            } else if (value >= last) {
              return scale.length - 1;
            } else if (i < scale.length - 1) {
              if (value == scale[i]) {
                return i;
              } else {
                let current = scale[i];
                let next = scale[i + 1];
                if (isBetween(value, current, next)) {
                  return leftOrRight(value, current, next) ? i : i + 1;
                }
              }
            }
          }
        };
    
        // define mix max for domain
        let quantize = (value, domain, range) => {
          let index = quantizeIndex(value, domain);
          return {
            range: range[index],
            domain: domain[index],
            group: index
          };
        };
    
        let quantizeDomain = (aDomain, aRange) => {
          let iMin = aDomain[0];
          let iMax = aDomain[1];
          let iSlope = (iMax - iMin) / (aRange.length - 1);
          let aScale = [];
          for (let i = 0; i < aRange.length; i++) {
            aScale[i] = (iSlope * i + iMin);
          }
          return aScale;
        };
    
        let generateDomain = (sType, aDomain, aRange) => {
          let aScale = aDomain;
          if (sType == 'quantize') {
            aScale = quantizeDomain(aDomain, aRange)
          }
          return aScale;
        };
    
        let drawLegend = (domain, range, json) => {
          if (!json.series)
            json.series = [];
    
          json.legend = json.choropleth.legend || {};
          for (let i = 0; i < domain.length; i++) {
            json.series[i] = {
              /* 
               * merge text if user wants to define new text.
               * else format thousands separator
               */
              text: (json.legend.items && json.legend.items[i] && json.legend.items[i].text) ? json.legend.items[i].text : Math.round(domain[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','),
              lineColor: range[i],
              backgroundColor: range,
              dataDomain: domain[i],
              dataVisible: true
            };
          }
        };
    
        let legendClickForMaps = (e) => {
          let clickedDomain = e.xdata.domain;
          let plotIsVisible = e.xdata.visible;
          let plotIndex = e.plotindex;
          let json = zingchart.exec(e.id, 'getdata');
          json = json.graphset ? json.graphset[0] : json;
          let items = json.shapes;
          let toggleOffColor = '#c3c3c3';
          e.xdata.visible = !e.xdata.visible;
    
          for (let i = 0; i < items.length; i++) {
            if (clickedDomain == items[i].domain) {
              if (plotIsVisible) {
                items[i]['background-color'] = toggleOffColor;
              } else {
                items[i]['background-color'] = items[i]['original-background-color'];
              }
              zingchart.exec(e.id, 'updateobject', {
                type: 'shape',
                data: items[i]
              });
            }
          }
        };
    
        // define a range of thresholds for domain
        let threshold = (value, domain, range) => {
          let index = thresholdIndex(value, domain);
          return {
            range: range[index],
            domain: domain[index],
            group: index
          };
        };
    
        /* custom module for choropleth charts */
        zingchart.defineModule('choropleth', 'plugin', (originalJson) => {
          if (originalJson.shapes[0].options) {
            let options = originalJson.shapes[0].options;
            let mapType = options.name;
            let scaleType = options.scale.type;
            let range = options.scale.range;
            let domain = generateDomain(scaleType, options.scale.domain, range);
            let scaleFunction = (scaleType == 'quantize' ? quantize : threshold);
    
            // Initialize items object
            let items = {};
            // Iterate over options items
            for (let key in options.style.items) {
              let item = options.style.items[key];
              let name = item.name;
              let value = item.value;
              let rangeIndex = scaleFunction(value, domain, range);
              let keyInfo = zingchart.maps.getItemInfo(options.name, key)
              item['background-color'] = rangeIndex.range;
              item['original-background-color'] = rangeIndex.range;
              item['domain'] = rangeIndex.domain;
              item['tooltip'] = options.style.tooltip ? JSON.parse(JSON.stringify(options.style.tooltip)) : {};
              item['tooltip']['text'] = keyInfo.tooltip.text + ' <br>' + item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
              item['group'] = rangeIndex.group + 1;
    
              // border color, font-color and background color can inherit
              if (item['tooltip']['border-color'] == 'inherit')
                item['tooltip']['border-color'] = rangeIndex.range;
              if (item['tooltip']['background-color'] == 'inherit')
                item['tooltip']['background-color'] = rangeIndex.range;
              if (item['tooltip']['font-color'] == 'inherit')
                item['tooltip']['font-color'] = rangeIndex.range;
            }
    
            // Draw the legend
            if (originalJson.choropleth.legend) {
              drawLegend(domain, range, originalJson);
    
              // only bind events on first load
              if (firstTimeLoad) {
                zingchart.bind(null, 'legend_item_click', legendClickForMaps);
                zingchart.bind(null, 'legend_marker_click', legendClickForMaps);
                firstTimeLoad = false;
              }
            }
    
            return originalJson;
          } else {
            console.error('Whoa there... You need an `options` object to set the styles.');
          }
        });
      </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>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let aColorRange = ['#D36A67', '#E5896C', '#F9BC7F', '#F9DEA7', '#9CD8B1', '#91BAA0', '#389B96', '#425B5E'];
    let aDomain = [100000, 40000000]; // [mix,max]
    
    let chartItems = {
      CA: {
        value: 38332521
      },
      OR: {
        value: 3930065
      },
      WA: {
        value: 6971406
      },
      NV: {
        value: 2790136
      },
      ID: {
        value: 1612136
      },
      UT: {
        value: 2900872
      },
      AZ: {
        value: 6626624
      },
      MT: {
        value: 1015165
      },
      WY: {
        value: 582658
      },
      CO: {
        value: 5268367
      },
      NM: {
        value: 2085287
      },
      AK: {
        value: 735132
      },
      HI: {
        value: 1404054
      },
      TX: {
        value: 26448193
      },
      OK: {
        value: 3850568
      },
      KS: {
        value: 2893957
      },
      NE: {
        value: 1868516
      },
      SD: {
        value: 844877
      },
      ND: {
        value: 723393
      },
      MN: {
        value: 5420380
      },
      IA: {
        value: 3090416
      },
      MO: {
        value: 6044171
      },
      AR: {
        value: 2959373
      },
      LA: {
        value: 4625470
      },
      MS: {
        value: 2991207
      },
      TN: {
        value: 6495978
      },
      KY: {
        value: 4395295
      },
      IL: {
        value: 12882135
      },
      WI: {
        value: 5742713
      },
      MI: {
        value: 9895622
      },
      IN: {
        value: 6570902
      },
      AL: {
        value: 4833722
      },
      GA: {
        value: 9992167
      },
      FL: {
        value: 19552860
      },
      SC: {
        value: 4774839
      },
      NC: {
        value: 9848060
      },
      VA: {
        value: 8260405
      },
      WV: {
        value: 1854304
      },
      OH: {
        value: 11570808
      },
      PA: {
        value: 12773801
      },
      DC: {
        value: 681170
      },
      MD: {
        value: 5928814
      },
      DE: {
        value: 925749
      },
      NJ: {
        value: 8899339
      },
      NY: {
        value: 19651127
      },
      CT: {
        value: 3596080
      },
      RI: {
        value: 1051511
      },
      MA: {
        value: 6692824
      },
      VT: {
        value: 626630
      },
      NH: {
        value: 1323459
      },
      ME: {
        value: 1328302
      }
    };
    
    let chartConfig = {
      title: {
        text: 'Population By Province',
        align: 'left',
        fontSize: '14px'
      },
      shapes: [{
        type: 'zingchart.maps',
        options: {
          name: 'usa',
          scale: {
            type: 'quantize', // if you define threshold here your domain length must match your range length
            domain: aDomain, // [min,max]
            range: aColorRange
          },
          style: {
            tooltip: {
              'background-color': 'inherit',
              'border-color': '#FFF',
              'border-width': 2,
              'font-color': '#000',
              'font-size': 15
            },
            controls: {
              placement: 'br'
            },
            hoverState: {
              backgroundColor: 'transparent',
              borderColor: '#000',
              borderWidth: '2px'
            },
            items: chartItems,
            label: { // text displaying. Like valueBox
              fontSize: '8px',
              visible: true
            }
          },
          zoom: 1.1
        }
      }],
      choropleth: {
        legend: {
          header: {
            text: 'Population Range'
          },
          item: {
            cursor: 'pointer',
          },
          marker: {
            cursor: 'pointer'
          },
          align: 'left',
          verticalAlign: 'bottom',
          items: [{
            text: ' > 100,000'
          }]
        }
      }
    };
    
    zingchart.loadModules('maps,maps-usa');
    zingchart.render({
      id: 'myChart',
      modules: 'choropleth',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
    
    // Used to only bind events once. When the window re-sizes we don't need to overwrite the events
    let firstTimeLoad = true;
    
    let leftOrRight = (value, left, right) => {
      let leftDiff = Math.abs(value - left);
      let rightDiff = Math.abs(value - right);
      return leftDiff < rightDiff ? true : false
    };
    
    let isBetween = (value, left, right) => {
      return value > left && value < right;
    };
    
    let thresholdIndex = (value, scale) => {
      for (let i = 0; i < scale.length; i++) {
        if (value < scale[i]) {
          return i;
        }
      }
      return scale.length;
    };
    
    let quantizeIndex = (value, scale) => {
      let first = scale[0];
      let last = scale[scale.length - 1];
      for (let i = 0; i < scale.length; i++) {
        if (value <= first) {
          return 0;
        } else if (value >= last) {
          return scale.length - 1;
        } else if (i < scale.length - 1) {
          if (value == scale[i]) {
            return i;
          } else {
            let current = scale[i];
            let next = scale[i + 1];
            if (isBetween(value, current, next)) {
              return leftOrRight(value, current, next) ? i : i + 1;
            }
          }
        }
      }
    };
    
    // define mix max for domain
    let quantize = (value, domain, range) => {
      let index = quantizeIndex(value, domain);
      return {
        range: range[index],
        domain: domain[index],
        group: index
      };
    };
    
    let quantizeDomain = (aDomain, aRange) => {
      let iMin = aDomain[0];
      let iMax = aDomain[1];
      let iSlope = (iMax - iMin) / (aRange.length - 1);
      let aScale = [];
      for (let i = 0; i < aRange.length; i++) {
        aScale[i] = (iSlope * i + iMin);
      }
      return aScale;
    };
    
    let generateDomain = (sType, aDomain, aRange) => {
      let aScale = aDomain;
      if (sType == 'quantize') {
        aScale = quantizeDomain(aDomain, aRange)
      }
      return aScale;
    };
    
    let drawLegend = (domain, range, json) => {
      if (!json.series)
        json.series = [];
    
      json.legend = json.choropleth.legend || {};
      for (let i = 0; i < domain.length; i++) {
        json.series[i] = {
          /* 
           * merge text if user wants to define new text.
           * else format thousands separator
           */
          text: (json.legend.items && json.legend.items[i] && json.legend.items[i].text) ? json.legend.items[i].text : Math.round(domain[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','),
          lineColor: range[i],
          backgroundColor: range,
          dataDomain: domain[i],
          dataVisible: true
        };
      }
    };
    
    let legendClickForMaps = (e) => {
      let clickedDomain = e.xdata.domain;
      let plotIsVisible = e.xdata.visible;
      let plotIndex = e.plotindex;
      let json = zingchart.exec(e.id, 'getdata');
      json = json.graphset ? json.graphset[0] : json;
      let items = json.shapes;
      let toggleOffColor = '#c3c3c3';
      e.xdata.visible = !e.xdata.visible;
    
      for (let i = 0; i < items.length; i++) {
        if (clickedDomain == items[i].domain) {
          if (plotIsVisible) {
            items[i]['background-color'] = toggleOffColor;
          } else {
            items[i]['background-color'] = items[i]['original-background-color'];
          }
          zingchart.exec(e.id, 'updateobject', {
            type: 'shape',
            data: items[i]
          });
        }
      }
    };
    
    // define a range of thresholds for domain
    let threshold = (value, domain, range) => {
      let index = thresholdIndex(value, domain);
      return {
        range: range[index],
        domain: domain[index],
        group: index
      };
    };
    
    /* custom module for choropleth charts */
    zingchart.defineModule('choropleth', 'plugin', (originalJson) => {
      if (originalJson.shapes[0].options) {
        let options = originalJson.shapes[0].options;
        let mapType = options.name;
        let scaleType = options.scale.type;
        let range = options.scale.range;
        let domain = generateDomain(scaleType, options.scale.domain, range);
        let scaleFunction = (scaleType == 'quantize' ? quantize : threshold);
    
        // Initialize items object
        let items = {};
        // Iterate over options items
        for (let key in options.style.items) {
          let item = options.style.items[key];
          let name = item.name;
          let value = item.value;
          let rangeIndex = scaleFunction(value, domain, range);
          let keyInfo = zingchart.maps.getItemInfo(options.name, key)
          item['background-color'] = rangeIndex.range;
          item['original-background-color'] = rangeIndex.range;
          item['domain'] = rangeIndex.domain;
          item['tooltip'] = options.style.tooltip ? JSON.parse(JSON.stringify(options.style.tooltip)) : {};
          item['tooltip']['text'] = keyInfo.tooltip.text + ' <br>' + item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          item['group'] = rangeIndex.group + 1;
    
          // border color, font-color and background color can inherit
          if (item['tooltip']['border-color'] == 'inherit')
            item['tooltip']['border-color'] = rangeIndex.range;
          if (item['tooltip']['background-color'] == 'inherit')
            item['tooltip']['background-color'] = rangeIndex.range;
          if (item['tooltip']['font-color'] == 'inherit')
            item['tooltip']['font-color'] = rangeIndex.range;
        }
    
        // Draw the legend
        if (originalJson.choropleth.legend) {
          drawLegend(domain, range, originalJson);
    
          // only bind events on first load
          if (firstTimeLoad) {
            zingchart.bind(null, 'legend_item_click', legendClickForMaps);
            zingchart.bind(null, 'legend_marker_click', legendClickForMaps);
            firstTimeLoad = false;
          }
        }
    
        return originalJson;
      } else {
        console.error('Whoa there... You need an `options` object to set the styles.');
      }
    });