• 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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </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 
    });