• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "scatter",
          "title": {
            "text": "Scatter Plot"
          },
          "crosshair-x": {
            "plot-label": {
              "text": "X: %kv<br>Y: %vv",
              "font-family": "Georgia",
              "alpha": 0.7,
              "callout": true,
              "padding": "10%",
              "border-radius": "5px"
            },
            "scale-label": {
              "visible": false
            },
            "marker": {
              "size": 4,
              "background-color": "yellow",
              "border-width": 1,
              "border-color": "gray"
            }
          },
          "crosshair-y": {
            "type": "multiple", //"single" (default) or "multiple"
            "scale-label": {
              "visible": false
            }
          },
          "scale-x": {
            "item": {
              "font-size": 10
            },
            "guide": {
              "line-style": "dotted"
            }
          },
          "scale-y": {
            "item": {
              "font-size": 10
            },
            "guide": {
              "line-style": "dotted"
            }
          },
          "plot": {
            "tooltip": {
              "visible": false
            },
            "hover-marker": {
              "visible": false
            },
            "marker": {
              "rules": [{
                  "rule": "%v < 20",
                  "background-color": "#003399"
                },
                {
                  "rule": "%v >= 20 && %v <= 40",
                  "background-color": "#3366cc"
                },
                {
                  "rule": "%v >= 40 && %v <= 60",
                  "background-color": "#009999"
                },
                {
                  "rule": "%v >= 60 && %v <= 80",
                  "background-color": "#00cc99"
                },
                {
                  "rule": "%v > 80",
                  "background-color": "#ccccff"
                }
              ]
            }
          },
          "series": [{
            "values": [
              [0.1, 9],
              [0.3, 11],
              [0.5, 5],
              [0.7, 3],
              [0.8, 15],
              [0.9, 15],
              [1.1, 24],
              [1, 9],
              [1.3, 5],
              [1.8, 21],
              [1.9, 29],
              [2, 15],
              [2.1, 13],
              [2.3, 29],
              [2.5, 10],
              [2.9, 30],
              [3, 21],
              [3.1, 30],
              [3.3, 35],
              [3.5, 25],
              [4, 30],
              [4.1, 33],
              [4.5, 39],
              [4.9, 35],
              [5, 40],
              [5.3, 41],
              [5.6, 67],
              [6, 59],
              [6.1, 45],
              [6.5, 57],
              [6.7, 70],
              [6.8, 74],
              [6.9, 51],
              [7, 60],
              [7.1, 61],
              [7.2, 50],
              [7.3, 71],
              [7.4, 64],
              [7.8, 56],
              [8, 75],
              [8.1, 61],
              [8.5, 71],
              [8.7, 70],
              [8.8, 70],
              [8.9, 90],
              [9, 81],
              [9.2, 82],
              [9.3, 93],
              [9.5, 75],
              [9.9, 95],
              [10, 99]
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 600
        });
      </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'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      "type": "scatter",
      "title": {
        "text": "Scatter Plot"
      },
      "crosshair-x": {
        "plot-label": {
          "text": "X: %kv<br>Y: %vv",
          "font-family": "Georgia",
          "alpha": 0.7,
          "callout": true,
          "padding": "10%",
          "border-radius": "5px"
        },
        "scale-label": {
          "visible": false
        },
        "marker": {
          "size": 4,
          "background-color": "yellow",
          "border-width": 1,
          "border-color": "gray"
        }
      },
      "crosshair-y": {
        "type": "multiple", //"single" (default) or "multiple"
        "scale-label": {
          "visible": false
        }
      },
      "scale-x": {
        "item": {
          "font-size": 10
        },
        "guide": {
          "line-style": "dotted"
        }
      },
      "scale-y": {
        "item": {
          "font-size": 10
        },
        "guide": {
          "line-style": "dotted"
        }
      },
      "plot": {
        "tooltip": {
          "visible": false
        },
        "hover-marker": {
          "visible": false
        },
        "marker": {
          "rules": [{
              "rule": "%v < 20",
              "background-color": "#003399"
            },
            {
              "rule": "%v >= 20 && %v <= 40",
              "background-color": "#3366cc"
            },
            {
              "rule": "%v >= 40 && %v <= 60",
              "background-color": "#009999"
            },
            {
              "rule": "%v >= 60 && %v <= 80",
              "background-color": "#00cc99"
            },
            {
              "rule": "%v > 80",
              "background-color": "#ccccff"
            }
          ]
        }
      },
      "series": [{
        "values": [
          [0.1, 9],
          [0.3, 11],
          [0.5, 5],
          [0.7, 3],
          [0.8, 15],
          [0.9, 15],
          [1.1, 24],
          [1, 9],
          [1.3, 5],
          [1.8, 21],
          [1.9, 29],
          [2, 15],
          [2.1, 13],
          [2.3, 29],
          [2.5, 10],
          [2.9, 30],
          [3, 21],
          [3.1, 30],
          [3.3, 35],
          [3.5, 25],
          [4, 30],
          [4.1, 33],
          [4.5, 39],
          [4.9, 35],
          [5, 40],
          [5.3, 41],
          [5.6, 67],
          [6, 59],
          [6.1, 45],
          [6.5, 57],
          [6.7, 70],
          [6.8, 74],
          [6.9, 51],
          [7, 60],
          [7.1, 61],
          [7.2, 50],
          [7.3, 71],
          [7.4, 64],
          [7.8, 56],
          [8, 75],
          [8.1, 61],
          [8.5, 71],
          [8.7, 70],
          [8.8, 70],
          [8.9, 90],
          [9, 81],
          [9.2, 82],
          [9.3, 93],
          [9.5, 75],
          [9.9, 95],
          [10, 99]
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });