• 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 {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
            "type": "scatter",
            "globals": {
              "fontFamily": "Lucida Sans Unicode"
            },
            "title": {
              "text": "Churn vs. quality",
              "adjustLayout": true,
              "textAlign": "left"
            },
            "subtitle": {
              "text": "Quality issues cause bigger problems in files that are changed (churn) frequently",
              "adjustLayout": true,
              "textAlign": "left"
            },
            "plot": {
              "marker": {
                "size": 10
              }
            },
            "plotarea": {
              "margin": "dynamic",
              "margin-bottom-offset": 25
            },
            "scaleY": {
              "alpha": 0.3,
              "lineWidth": 2,
              "zooming": true,
              "guide": {
                "lineStyle": "solid",
                "alpha": 0.3,
                "lineWidth": 2
              },
              "tick": {
                "visible": false
              },
              "item": {
                "visible": false
              },
              "label": {
                "text": "QUALITY",
                "font-size": 12,
                "font-weight": "bold",
                "color": "#999"
              },
              "markers": [{
                  "type": "line",
                  "range": ["0%"],
                  "value-range": true,
                  "line-width": 0,
                  "label-tolerance": 25,
                  "label": {
                    "angle": 270,
                    "offset-x": -22,
                    "font-size": 12,
                    "font-weight": "bold",
                    "color": "#999",
                    "text": "Better"
                  }
                },
                {
                  "type": "line",
                  "range": ["100%"],
                  "value-range": true,
                  "line-width": 0,
                  "label-tolerance": 25,
                  "label-alignment": "opposite",
                  "label": {
                    "angle": 270,
                    "offset-x": -22,
                    "font-size": 12,
                    "font-weight": "bold",
                    "color": "#999",
                    "text": "Worse"
                  }
                }
              ]
            },
            "scaleX": {
              "alpha": 0.3,
              "lineWidth": 2,
              "zooming": true,
              "guide": {
                "lineStyle": "solid",
                "alpha": 0.3,
                "lineWidth": 2
              },
              "tick": {
                "visible": false
              },
              "item": {
                "visible": false
              },
              "label": {
                "text": "CHURN",
                "font-size": 12,
                "font-weight": "bold",
                "color": "#999"
              },
              "markers": [{
                  "type": "line",
                  "range": ["0%"],
                  "value-range": true,
                  "line-width": 0,
                  "label-tolerance": 25,
                  "label": {
                    "angle": 0,
                    "font-size": 12,
                    "font-weight": "bold",
                    "offset-y": 22,
                    "color": "#999",
                    "text": "Lower"
                  }
                },
                {
                  "type": "line",
                  "range": ["100%"],
                  "value-range": true,
                  "line-width": 0,
                  "label-alignment": "opposite",
                  "label-tolerance": 25,
                  "label": {
                    "angle": 0,
                    "font-size": 12,
                    "font-weight": "bold",
                    "offset-y": 22,
                    "color": "#999",
                    "text": "Higher"
                  }
                }
              ]
            },
            "scrollX": {
              "offset-y": -9,
              "bar": {
                "background-color": "none"
              }
            },
            "scrollY": {
              "offset-x": 9,
              "bar": {
                "background-color": "none"
              }
            },
            "series": [{
                "values": [
                  [1, 9],
                  [2, 15],
                  [3, 21],
                  [4, 30],
                  [5, 40],
                  [6, 59],
                  [7, 60],
                  [8, 75],
                  [9, 81],
                  [10, 99]
                ],
                "marker": {
                  "backgroundColor": "#ffeb3b",
                  "type": "triangle"
                }
              },
              {
                "values": [
                  [0.9, 3],
                  [2.1, 13],
                  [3.5, 25],
                  [4.9, 35],
                  [5.3, 41],
                  [6.5, 57],
                  [7.1, 61],
                  [8.7, 70],
                  [9.2, 82],
                  [9.9, 95]
                ],
                "marker": {
                  "backgroundColor": "#ffb74d",
                  "type": "square"
                }
              },
              {
                "values": [
                  [0.1, 9],
                  [1.8, 21],
                  [1.9, 29],
                  [4.1, 33],
                  [4.5, 39],
                  [6.9, 51],
                  [7.4, 64],
                  [8.9, 70],
                  [9, 75],
                  [9.3, 93]
                ],
                "marker": {
                  "backgroundColor": "#69f0ae",
                  "type": "circle"
                }
              }
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 500,
          width: 800
        });
      </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      "graphset": [{
        "type": "scatter",
        "globals": {
          "fontFamily": "Lucida Sans Unicode"
        },
        "title": {
          "text": "Churn vs. quality",
          "adjustLayout": true,
          "textAlign": "left"
        },
        "subtitle": {
          "text": "Quality issues cause bigger problems in files that are changed (churn) frequently",
          "adjustLayout": true,
          "textAlign": "left"
        },
        "plot": {
          "marker": {
            "size": 10
          }
        },
        "plotarea": {
          "margin": "dynamic",
          "margin-bottom-offset": 25
        },
        "scaleY": {
          "alpha": 0.3,
          "lineWidth": 2,
          "zooming": true,
          "guide": {
            "lineStyle": "solid",
            "alpha": 0.3,
            "lineWidth": 2
          },
          "tick": {
            "visible": false
          },
          "item": {
            "visible": false
          },
          "label": {
            "text": "QUALITY",
            "font-size": 12,
            "font-weight": "bold",
            "color": "#999"
          },
          "markers": [{
              "type": "line",
              "range": ["0%"],
              "value-range": true,
              "line-width": 0,
              "label-tolerance": 25,
              "label": {
                "angle": 270,
                "offset-x": -22,
                "font-size": 12,
                "font-weight": "bold",
                "color": "#999",
                "text": "Better"
              }
            },
            {
              "type": "line",
              "range": ["100%"],
              "value-range": true,
              "line-width": 0,
              "label-tolerance": 25,
              "label-alignment": "opposite",
              "label": {
                "angle": 270,
                "offset-x": -22,
                "font-size": 12,
                "font-weight": "bold",
                "color": "#999",
                "text": "Worse"
              }
            }
          ]
        },
        "scaleX": {
          "alpha": 0.3,
          "lineWidth": 2,
          "zooming": true,
          "guide": {
            "lineStyle": "solid",
            "alpha": 0.3,
            "lineWidth": 2
          },
          "tick": {
            "visible": false
          },
          "item": {
            "visible": false
          },
          "label": {
            "text": "CHURN",
            "font-size": 12,
            "font-weight": "bold",
            "color": "#999"
          },
          "markers": [{
              "type": "line",
              "range": ["0%"],
              "value-range": true,
              "line-width": 0,
              "label-tolerance": 25,
              "label": {
                "angle": 0,
                "font-size": 12,
                "font-weight": "bold",
                "offset-y": 22,
                "color": "#999",
                "text": "Lower"
              }
            },
            {
              "type": "line",
              "range": ["100%"],
              "value-range": true,
              "line-width": 0,
              "label-alignment": "opposite",
              "label-tolerance": 25,
              "label": {
                "angle": 0,
                "font-size": 12,
                "font-weight": "bold",
                "offset-y": 22,
                "color": "#999",
                "text": "Higher"
              }
            }
          ]
        },
        "scrollX": {
          "offset-y": -9,
          "bar": {
            "background-color": "none"
          }
        },
        "scrollY": {
          "offset-x": 9,
          "bar": {
            "background-color": "none"
          }
        },
        "series": [{
            "values": [
              [1, 9],
              [2, 15],
              [3, 21],
              [4, 30],
              [5, 40],
              [6, 59],
              [7, 60],
              [8, 75],
              [9, 81],
              [10, 99]
            ],
            "marker": {
              "backgroundColor": "#ffeb3b",
              "type": "triangle"
            }
          },
          {
            "values": [
              [0.9, 3],
              [2.1, 13],
              [3.5, 25],
              [4.9, 35],
              [5.3, 41],
              [6.5, 57],
              [7.1, 61],
              [8.7, 70],
              [9.2, 82],
              [9.9, 95]
            ],
            "marker": {
              "backgroundColor": "#ffb74d",
              "type": "square"
            }
          },
          {
            "values": [
              [0.1, 9],
              [1.8, 21],
              [1.9, 29],
              [4.1, 33],
              [4.5, 39],
              [6.9, 51],
              [7.4, 64],
              [8.9, 70],
              [9, 75],
              [9.3, 93]
            ],
            "marker": {
              "backgroundColor": "#69f0ae",
              "type": "circle"
            }
          }
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 500,
      width: 800
    });