• 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>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          min-height: 150px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
    
        /* cascading coloring rules */
        #myChart-graph-id0-plot-0-bl-1-c>circle {
          fill: #ef5350;
        }
    
        #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
          fill: #ab47bc;
        }
    
        #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
          fill: #66bb6a;
        }
    
        #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
          fill: #42a5f5;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var nodeSize = 5;
    
        function getColor(index) {
          var color = '#ef5350';
          var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
          if (nodeIndex % 2 == 0)
            color = '#ab47bc';
          if (nodeIndex % 3 == 0)
            color = '#66bb6a';
          if (nodeIndex % 4 == 0)
            color = '#42a5f5';
    
          //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
          return color;
        }
    
        zingchart.bind('myChart', 'node_mouseover', function(e) {
          var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
          // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
          var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
          var path = document.getElementById(queryString);
          path.setAttribute('r', 15);
    
          var tooltip = document.querySelector('#myChart-tooltip-text-path');
          tooltip.setAttribute('fill', getColor(e.nodeindex));
        });
    
        zingchart.bind('myChart', 'node_mouseout', function(e) {
          // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
          var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
          var path = document.getElementById(queryString);
          path.setAttribute('r', nodeSize);
        });
    
    
        zingchart.render({
          id: 'myChart',
          dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
          output: 'svg'
        });
      </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>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    
    /* cascading coloring rules */
    #myChart-graph-id0-plot-0-bl-1-c>circle {
      fill: #ef5350;
    }
    
    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
      fill: #ab47bc;
    }
    
    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
      fill: #66bb6a;
    }
    
    #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
      fill: #42a5f5;
    }
    var nodeSize = 5;
    
    function getColor(index) {
      var color = '#ef5350';
      var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
      if (nodeIndex % 2 == 0)
        color = '#ab47bc';
      if (nodeIndex % 3 == 0)
        color = '#66bb6a';
      if (nodeIndex % 4 == 0)
        color = '#42a5f5';
    
      //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
      return color;
    }
    
    zingchart.bind('myChart', 'node_mouseover', function(e) {
      var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
      // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
      var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
      var path = document.getElementById(queryString);
      path.setAttribute('r', 15);
    
      var tooltip = document.querySelector('#myChart-tooltip-text-path');
      tooltip.setAttribute('fill', getColor(e.nodeindex));
    });
    
    zingchart.bind('myChart', 'node_mouseout', function(e) {
      // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
      var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
      var path = document.getElementById(queryString);
      path.setAttribute('r', nodeSize);
    });
    
    
    zingchart.render({
      id: 'myChart',
      dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
      output: 'svg'
    });