Scatter Chart Heat Map

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

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';

    // VARS
    // -----------------------------
    let N = 250000,
      n,
      x,
      y,
      v;
    zingchart.TIMEOUT = 1;

    // CHART CONFIG
    // -----------------------------

    let chartConfig = {
      flat: true,
      type: 'scatter',
      heatmap: {
        tooltip: {
          text: '[%scale-key-value / %scale-value-value]: %value',
          callout: true,
          calloutHeight: 6,
          calloutPosition: 'bottom',
          jsRule: 'myHeatmapTooltipJsRule()',
        },
        brushType: 'square',
        alpha: 1,
        async: true,
        blur: 0,
        gradientColors: '#fff #900 #090 #009 #909',
        gradientStops: '0 0.25 0.5 0.75 1',
        graph: true,
        size: 2,
      },
      plot: {},
      plotarea: {
        margin: '40px',
      },
      scaleX: {
        values: '0:1000:0.1',
        guide: {
          visible: false,
        },
        item: {
          fontSize: '9px',
        },
        normalize: 1,
        offset: 0,
        zooming: 1,
        zoomSnap: true,
      },
      scaleY: {
        values: '0:100:1',
        guide: {
          visible: false,
        },
        item: {
          fontSize: '9px',
        },
        normalize: 1,
        offset: 0,
        zooming: 1,
        zoomSnap: true,
      },
      zoom: {
        label: {},
      },
      series: [{}],
    };

    // RENDER CHARTS
    // -----------------------------

    zingchart.bind(chartId, 'load', function() {
      console.time('data-generation');
      let aData = new Array(N * 4);
      for (n = 0; n < N; n++) {
        x = ZC._r_(0, 100000) / 100;
        y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
        v = 1;
        aData[N * 0 + n] = [
          parseFloat(x.toFixed(1)),
          parseFloat(y.toFixed(1)),
          v,
          {
            text: 'Apple',
            color: '#900'
          },
        ];
      }
      for (n = 0; n < N; n++) {
        x = ZC._r_(0, 150000) / 150;
        y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
        v = 2;
        aData[N * 1 + n] = [
          parseFloat(x.toFixed(1)),
          parseFloat(y.toFixed(1)),
          v,
          {
            text: 'Dell',
            color: '#090'
          },
        ];
      }
      for (n = 0; n < N; n++) {
        x = ZC._r_(0, 90000) / 90;
        y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
        v = 3;
        aData[N * 2 + n] = [
          parseFloat(x.toFixed(1)),
          parseFloat(y.toFixed(1)),
          v,
          {
            text: 'Microsoft',
            color: '#009'
          },
        ];
      }
      for (n = 0; n < N; n++) {
        x = ZC._r_(0, 200000) / 200;
        y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
        v = 4;
        aData[N * 3 + n] = [
          parseFloat(x.toFixed(1)),
          parseFloat(y.toFixed(1)),
          v,
          {
            text: 'IBM',
            color: '#909'
          },
        ];
      }
      console.timeEnd('data-generation');
      zingchart.exec(chartId, 'heatmap.setdata', {
        data: aData,
      });
    });
    zingchart.loadModules('heatmap', function() {
      zingchart.render({
        id: chartId,
        width: '100%',
        height: '560px',
        output: 'canvas',
        data: chartConfig,
        modules: 'heatmap',
      });
    });

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

    function myHeatmapTooltipJsRule(p, info) {
      let obj = {};
      if (info) {
        obj['border-color'] = info['color'];
        obj['text'] =
          '<span style="font-weight:900;color:' +
          info['color'] +
          '">' +
          info['text'] +
          ':</span> ' +
          p['key'] +
          '/' +
          p['val'];
      }
      return obj;
    }
  </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" class="chart--container">
    <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;
}

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';

// VARS
// -----------------------------
let N = 250000,
  n,
  x,
  y,
  v;
zingchart.TIMEOUT = 1;

// CHART CONFIG
// -----------------------------

let chartConfig = {
  flat: true,
  type: 'scatter',
  heatmap: {
    tooltip: {
      text: '[%scale-key-value / %scale-value-value]: %value',
      callout: true,
      calloutHeight: 6,
      calloutPosition: 'bottom',
      jsRule: 'myHeatmapTooltipJsRule()',
    },
    brushType: 'square',
    alpha: 1,
    async: true,
    blur: 0,
    gradientColors: '#fff #900 #090 #009 #909',
    gradientStops: '0 0.25 0.5 0.75 1',
    graph: true,
    size: 2,
  },
  plot: {},
  plotarea: {
    margin: '40px',
  },
  scaleX: {
    values: '0:1000:0.1',
    guide: {
      visible: false,
    },
    item: {
      fontSize: '9px',
    },
    normalize: 1,
    offset: 0,
    zooming: 1,
    zoomSnap: true,
  },
  scaleY: {
    values: '0:100:1',
    guide: {
      visible: false,
    },
    item: {
      fontSize: '9px',
    },
    normalize: 1,
    offset: 0,
    zooming: 1,
    zoomSnap: true,
  },
  zoom: {
    label: {},
  },
  series: [{}],
};

// RENDER CHARTS
// -----------------------------

zingchart.bind(chartId, 'load', function() {
  console.time('data-generation');
  let aData = new Array(N * 4);
  for (n = 0; n < N; n++) {
    x = ZC._r_(0, 100000) / 100;
    y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
    v = 1;
    aData[N * 0 + n] = [
      parseFloat(x.toFixed(1)),
      parseFloat(y.toFixed(1)),
      v,
      {
        text: 'Apple',
        color: '#900'
      },
    ];
  }
  for (n = 0; n < N; n++) {
    x = ZC._r_(0, 150000) / 150;
    y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
    v = 2;
    aData[N * 1 + n] = [
      parseFloat(x.toFixed(1)),
      parseFloat(y.toFixed(1)),
      v,
      {
        text: 'Dell',
        color: '#090'
      },
    ];
  }
  for (n = 0; n < N; n++) {
    x = ZC._r_(0, 90000) / 90;
    y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
    v = 3;
    aData[N * 2 + n] = [
      parseFloat(x.toFixed(1)),
      parseFloat(y.toFixed(1)),
      v,
      {
        text: 'Microsoft',
        color: '#009'
      },
    ];
  }
  for (n = 0; n < N; n++) {
    x = ZC._r_(0, 200000) / 200;
    y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
    v = 4;
    aData[N * 3 + n] = [
      parseFloat(x.toFixed(1)),
      parseFloat(y.toFixed(1)),
      v,
      {
        text: 'IBM',
        color: '#909'
      },
    ];
  }
  console.timeEnd('data-generation');
  zingchart.exec(chartId, 'heatmap.setdata', {
    data: aData,
  });
});
zingchart.loadModules('heatmap', function() {
  zingchart.render({
    id: chartId,
    width: '100%',
    height: '560px',
    output: 'canvas',
    data: chartConfig,
    modules: 'heatmap',
  });
});

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

function myHeatmapTooltipJsRule(p, info) {
  let obj = {};
  if (info) {
    obj['border-color'] = info['color'];
    obj['text'] =
      '<span style="font-weight:900;color:' +
      info['color'] +
      '">' +
      info['text'] +
      ':</span> ' +
      p['key'] +
      '/' +
      p['val'];
  }
  return obj;
}