• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.  
    27.     /* cascading coloring rules */
    28.     #myChart-graph-id0-plot-0-bl-1-c>circle {
    29.       fill: #ef5350;
    30.     }
    31.  
    32.     #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
    33.       fill: #ab47bc;
    34.     }
    35.  
    36.     #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
    37.       fill: #66bb6a;
    38.     }
    39.  
    40.     #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
    41.       fill: #42a5f5;
    42.     }
    43.   </style>
    44. </head>
    45.  
    46. <body>
    47.   <div id="myChart" class="chart--container">
    48.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    49.   </div>
    50.   <script>
    51.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    52.     var nodeSize = 5;
    53.  
    54.     function getColor(index) {
    55.       var color = '#ef5350';
    56.       var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
    57.       if (nodeIndex % 2 == 0)
    58.         color = '#ab47bc';
    59.       if (nodeIndex % 3 == 0)
    60.         color = '#66bb6a';
    61.       if (nodeIndex % 4 == 0)
    62.         color = '#42a5f5';
    63.  
    64.       //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
    65.       return color;
    66.     }
    67.  
    68.     zingchart.bind('myChart', 'node_mouseover', function(e) {
    69.       var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
    70.       // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
    71.       var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
    72.       var path = document.getElementById(queryString);
    73.       path.setAttribute('r', 15);
    74.  
    75.       var tooltip = document.querySelector('#myChart-tooltip-text-path');
    76.       tooltip.setAttribute('fill', getColor(e.nodeindex));
    77.     });
    78.  
    79.     zingchart.bind('myChart', 'node_mouseout', function(e) {
    80.       // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
    81.       var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
    82.       var path = document.getElementById(queryString);
    83.       path.setAttribute('r', nodeSize);
    84.     });
    85.  
    86.  
    87.     zingchart.render({
    88.       id: 'myChart',
    89.       dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
    90.       output: 'svg'
    91.     });
    92.   </script>
    93. </body>
    94.  
    95. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    18.  
    19. /* cascading coloring rules */
    20. #myChart-graph-id0-plot-0-bl-1-c>circle {
    21.   fill: #ef5350;
    22. }
    23.  
    24. #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(2n) {
    25.   fill: #ab47bc;
    26. }
    27.  
    28. #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(3n) {
    29.   fill: #66bb6a;
    30. }
    31.  
    32. #myChart-graph-id0-plot-0-bl-1-c>circle:nth-child(4n) {
    33.   fill: #42a5f5;
    34. }
    1. var nodeSize = 5;
    2.  
    3. function getColor(index) {
    4.   var color = '#ef5350';
    5.   var nodeIndex = index + 1; // need to increase nodeindex since base index is 0 and css doesn't catch that
    6.   if (nodeIndex % 2 == 0)
    7.     color = '#ab47bc';
    8.   if (nodeIndex % 3 == 0)
    9.     color = '#66bb6a';
    10.   if (nodeIndex % 4 == 0)
    11.     color = '#42a5f5';
    12.  
    13.   //console.log('returning ', color, 'from nodeIndex:', nodeIndex)
    14.   return color;
    15. }
    16.  
    17. zingchart.bind('myChart', 'node_mouseover', function(e) {
    18.   var getAllCircles = document.querySelectorAll('#myChart-graph-id0-plot-0-bl-1-c > circle')[e.nodeindex]
    19.   // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
    20.   var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
    21.   var path = document.getElementById(queryString);
    22.   path.setAttribute('r', 15);
    23.  
    24.   var tooltip = document.querySelector('#myChart-tooltip-text-path');
    25.   tooltip.setAttribute('fill', getColor(e.nodeindex));
    26. });
    27.  
    28. zingchart.bind('myChart', 'node_mouseout', function(e) {
    29.   // #myChart-graph-id0-plotset-plot-0-node-0-marker-circle
    30.   var queryString = e.graphid + '-plotset-plot-0-node-' + e.nodeindex + '-marker-circle';
    31.   var path = document.getElementById(queryString);
    32.   path.setAttribute('r', nodeSize);
    33. });
    34.  
    35.  
    36. zingchart.render({
    37.   id: 'myChart',
    38.   dataurl: 'https://app.zingsoft.com/api/file/GTGK2KRR/h7cGk3vaTmmJIQcwwqAA_big_scatter_demo.json',
    39.   output: 'svg'
    40. });