• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script 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;
            }
    
    
    
            zing-grid[loading] {
                height: 800px;
            }
        </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'
    });