<!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>
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
});