[json] graphset > colorScale > cursor > mediaRules

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

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

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


<body class="zc-body">
  
  <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
    <option value="100000">100.000</option>
    <option value="50000">50.000</option>
    <option value="10000">10.000</option>
    <option value="5000">5.000</option>
    <option value="1000">1.000</option>
    <option value="500">500</option>
  </select> people)

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

  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'null',
      backgroundColor: '#fff',
      flat: true,
      colorScale: {
        alpha: 0.8,
        aspect: 'gradient',
        backgroundColor: null,
        gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
        gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
        cursor: {
          type: 'gear3',
          size: 10,
          backgroundColor: 'red',

          mediaRules: [{
            maxWidth: 400,
            backgroundColor: 'blue',
          }]
        },
      },
      heatmap: {
        alpha: 1,
        tooltip: {
          decimals: 0,
          thousandsSeparator: '.',
          text: '~ %value people'
        },
        sortData: true,
        async: true,
        brushType: 'square',
        size: 3,
        blur: 1
      },
      tooltip: {
        callout: true,
        calloutPosition: 'bottom',
        calloutWidth: 10,
        calloutHeight: 6,
        fontSize: 11,
        padding: '5 10',
      },
      shapes: [{
        type: 'zingchart.maps',
        options: {
          id: 'mapmain',
          name: 'fra',
          scale: true,
          zooming: false,
          panning: false,
          scrolling: false,
          style: {
            flat: true,
            controls: {
              visible: false
            },
            borderAlpha: 0.1,
            borderColor: '#fff',
            label: {
              overlap: false,
              text: '%long-text'
            },
            hoverState: {
              visible: false,
              backgroundColor: 'none',
              shadowAlpha: 0.2,
              shadowDistance: 2,
              shadow: true,
              shadowColor: '#333'
            }
          }
        }
      }]
    };

    zingchart.bind('myChart', 'load', function() {
      paintHeatmap();
    });

    window.paintHeatmap = function(iMax, bSmallBrush) {
      var aData = [];
      var iMaxPop = 0;
      for (var i = 0; i < FR_POP_2010.length; i++) {
        if (iMax && FR_POP_2010[i][2] > iMax) {
          continue;
        }
        var fLon = FR_POP_2010[i][0],
          fLat = FR_POP_2010[i][1],
          iPop = FR_POP_2010[i][2];
        var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
        aData.push([aXY[0], aXY[1], iPop]);
        iMaxPop = Math.max(iMaxPop, iPop);
      }
      zingchart.exec('myChart', 'colorscale.update', {
        data: {
          maxValue: iMaxPop
        }
      });
      var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
      zingchart.exec('myChart', 'heatmap.setdata', {
        minValue: 0,
        maxValue: oCSInfo.max,
        data: aData,
        size: bSmallBrush ? 4 : 12,
        blur: bSmallBrush ? 0 : 6
      });
    }

    zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
      if (oInfo.value !== null) {
        zingchart.exec(oInfo.id, 'colorscale.setvalue', {
          graphid: oInfo.graphid,
          value: oInfo.value
        });
      } else {
        zingchart.exec(oInfo.id, 'colorscale.clear', {
          graphid: oInfo.graphid
        });
      }
    });

    document.querySelector('#sc').addEventListener('click', function() {
      if (this.checked) {
        paintHeatmap(100000, true);
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.value = 100000;
        maxpopRef.removeAttribute('disabled')
      } else {
        paintHeatmap();
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.setAttribute('disabled', 'disabled')
      }
    });

    document.querySelector('#maxpop').addEventListener('change', function() {
      paintHeatmap(this.value, true);
    });

    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {

      zingchart.render({
        id: 'myChart',
        width: '100%',
        height: '100%',
        output: 'canvas',
        data: chartConfig,
        modules: 'heatmap,color-scale'
      });

    });
  </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">
  
  <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
    <option value="100000">100.000</option>
    <option value="50000">50.000</option>
    <option value="10000">10.000</option>
    <option value="5000">5.000</option>
    <option value="1000">1.000</option>
    <option value="500">500</option>
  </select> people)

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

  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

</body>

</html>

.zc-body {
  background: #fff;
}

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

.zc-ref {
  display: none;
}

let chartConfig = {
  type: 'null',
  backgroundColor: '#fff',
  flat: true,
  colorScale: {
    alpha: 0.8,
    aspect: 'gradient',
    backgroundColor: null,
    gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    cursor: {
      type: 'gear3',
      size: 10,
      backgroundColor: 'red',

      mediaRules: [{
        maxWidth: 400,
        backgroundColor: 'blue',
      }]
    },
  },
  heatmap: {
    alpha: 1,
    tooltip: {
      decimals: 0,
      thousandsSeparator: '.',
      text: '~ %value people'
    },
    sortData: true,
    async: true,
    brushType: 'square',
    size: 3,
    blur: 1
  },
  tooltip: {
    callout: true,
    calloutPosition: 'bottom',
    calloutWidth: 10,
    calloutHeight: 6,
    fontSize: 11,
    padding: '5 10',
  },
  shapes: [{
    type: 'zingchart.maps',
    options: {
      id: 'mapmain',
      name: 'fra',
      scale: true,
      zooming: false,
      panning: false,
      scrolling: false,
      style: {
        flat: true,
        controls: {
          visible: false
        },
        borderAlpha: 0.1,
        borderColor: '#fff',
        label: {
          overlap: false,
          text: '%long-text'
        },
        hoverState: {
          visible: false,
          backgroundColor: 'none',
          shadowAlpha: 0.2,
          shadowDistance: 2,
          shadow: true,
          shadowColor: '#333'
        }
      }
    }
  }]
};

zingchart.bind('myChart', 'load', function() {
  paintHeatmap();
});

window.paintHeatmap = function(iMax, bSmallBrush) {
  var aData = [];
  var iMaxPop = 0;
  for (var i = 0; i < FR_POP_2010.length; i++) {
    if (iMax && FR_POP_2010[i][2] > iMax) {
      continue;
    }
    var fLon = FR_POP_2010[i][0],
      fLat = FR_POP_2010[i][1],
      iPop = FR_POP_2010[i][2];
    var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    aData.push([aXY[0], aXY[1], iPop]);
    iMaxPop = Math.max(iMaxPop, iPop);
  }
  zingchart.exec('myChart', 'colorscale.update', {
    data: {
      maxValue: iMaxPop
    }
  });
  var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
  zingchart.exec('myChart', 'heatmap.setdata', {
    minValue: 0,
    maxValue: oCSInfo.max,
    data: aData,
    size: bSmallBrush ? 4 : 12,
    blur: bSmallBrush ? 0 : 6
  });
}

zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
  if (oInfo.value !== null) {
    zingchart.exec(oInfo.id, 'colorscale.setvalue', {
      graphid: oInfo.graphid,
      value: oInfo.value
    });
  } else {
    zingchart.exec(oInfo.id, 'colorscale.clear', {
      graphid: oInfo.graphid
    });
  }
});

document.querySelector('#sc').addEventListener('click', function() {
  if (this.checked) {
    paintHeatmap(100000, true);
    let maxpopRef = document.querySelector('#maxpop');
    maxpopRef.value = 100000;
    maxpopRef.removeAttribute('disabled')
  } else {
    paintHeatmap();
    let maxpopRef = document.querySelector('#maxpop');
    maxpopRef.setAttribute('disabled', 'disabled')
  }
});

document.querySelector('#maxpop').addEventListener('change', function() {
  paintHeatmap(this.value, true);
});

zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {

  zingchart.render({
    id: 'myChart',
    width: '100%',
    height: '100%',
    output: 'canvas',
    data: chartConfig,
    modules: 'heatmap,color-scale'
  });

});