• Edit
  • Download
  • <!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>
      <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"]; // HELPER METHODS
        // -----------------------------
        window.vectorplot_data = function(p) {
          var x, y, length, direction, color;
          var vdata = [];
          var szx = [-100, 100],
            szy = [-50, 50];
          for (x = szx[0] + 5; x < szx[1]; x += 5) {
            for (y = szy[0] + 5; y < szy[1]; y += 5) {
              length = 50 + Math.abs(Math.round(Math.sin(((50 - x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
              direction = Math.round(Math.sin(((50 - x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
              color = '#000000';
              if (length >= 50 && length < 70) {
                color = '#00FF00';
              } else if (length >= 70 && length < 100) {
                color = '#FFFF00';
              } else if (length >= 100 && length < 120) {
                color = '#FF9900';
              } else if (length >= 120 && length < 150) {
                color = '#FF0000';
              } else if (length >= 150 && length < 170) {
                color = '#800080';
              } else {
                color = '#0000FF';
              }
              vdata.push([
                x,
                y,
                length,
                direction,
                color
              ]);
            }
          }
          return vdata;
        };
    
        // DEFINE DATA
        // -----------------------------
        let vData = vectorplot_data(1, 2, 3);
    
        // CHART CONFIG
        // -----------------------------
        var myConfig = {
          "globals": {
            "fontFamily": "Lucida Sans Unicode"
          },
          "type": "vectorplot",
          "plotarea": {
            "margin": "dynamic"
          },
          "scale-x": {
            "offset": 0,
            "values": "-100:100:10",
            "guide": {
              "line-style": "solid"
            }
          },
          "scale-y": {
            "offset": 0,
            "values": "-50:50:10",
            "guide": {
              "line-style": "solid"
            }
          },
          "options": {
            "arrow": {
              "min-length": 6,
              "max-length": 12,
              "style": {
                "size": 3
              }
            },
            "data": vData
          },
          "tooltip": {
            "background-color": "#fff",
            "color": "#000",
            "border-width": 1,
            "border-color": "#999",
            "alpha": 0.85,
            "padding": 15,
            "border-radius": 7,
            "align": "left",
            "fontSize": 13,
            "callout": true,
            "callout-width": 12,
            "placement": "vertical"
          }
        };
    
        // RENDER CHARTS
        // -----------------------------
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
      </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">
      ​
      <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;
    }
    // HELPER METHODS
    // -----------------------------
    window.vectorplot_data = function(p) {
      var x, y, length, direction, color;
      var vdata = [];
      var szx = [-100, 100],
        szy = [-50, 50];
      for (x = szx[0] + 5; x < szx[1]; x += 5) {
        for (y = szy[0] + 5; y < szy[1]; y += 5) {
          length = 50 + Math.abs(Math.round(Math.sin(((50 - x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
          direction = Math.round(Math.sin(((50 - x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
          color = '#000000';
          if (length >= 50 && length < 70) {
            color = '#00FF00';
          } else if (length >= 70 && length < 100) {
            color = '#FFFF00';
          } else if (length >= 100 && length < 120) {
            color = '#FF9900';
          } else if (length >= 120 && length < 150) {
            color = '#FF0000';
          } else if (length >= 150 && length < 170) {
            color = '#800080';
          } else {
            color = '#0000FF';
          }
          vdata.push([
            x,
            y,
            length,
            direction,
            color
          ]);
        }
      }
      return vdata;
    };
    
    // DEFINE DATA
    // -----------------------------
    let vData = vectorplot_data(1, 2, 3);
    
    // CHART CONFIG
    // -----------------------------
    var myConfig = {
      "globals": {
        "fontFamily": "Lucida Sans Unicode"
      },
      "type": "vectorplot",
      "plotarea": {
        "margin": "dynamic"
      },
      "scale-x": {
        "offset": 0,
        "values": "-100:100:10",
        "guide": {
          "line-style": "solid"
        }
      },
      "scale-y": {
        "offset": 0,
        "values": "-50:50:10",
        "guide": {
          "line-style": "solid"
        }
      },
      "options": {
        "arrow": {
          "min-length": 6,
          "max-length": 12,
          "style": {
            "size": 3
          }
        },
        "data": vData
      },
      "tooltip": {
        "background-color": "#fff",
        "color": "#000",
        "border-width": 1,
        "border-color": "#999",
        "alpha": 0.85,
        "padding": 15,
        "border-radius": 7,
        "align": "left",
        "fontSize": 13,
        "callout": true,
        "callout-width": 12,
        "placement": "vertical"
      }
    };
    
    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });