• Edit
  • Download
  • <!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;
    }