<!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": "line",
"background-color": "#fff",
"plotarea": {
"border-width": 1,
"border-color": "#666"
},
"scaleX": {
"max-items": 9999, //forces all items
"items-overlap": true, //forces items (lablels) to show even when overlapping
"label": {
"text": "Number of Capabilities",
"bold": false,
"color": "#333",
"font-size": 11
},
"tick": {
"line-width": 1,
"line-color": "#666",
"size": 3,
"alpha": 0,
//below rules are used to adjust the trasparency of certain labels
"rules": [{
"rule": "%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
"alpha": 1
}]
},
"item": {
"font-size": 10,
"alpha": 0,
"rules": [{
"rule": "%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
"alpha": 1
}]
},
"line-width": 0,
"line-color": "#666",
"guide": {
"visible": false
},
"offset": 20
},
"scaleY": {
"label": {
"text": "Time (sec)",
"bold": false,
"color": "#333",
"font-size": 11
},
"values": "0:250:50",
"item": {
"font-size": 10,
"angle": 270
},
"tick": {
"line-width": 1,
"line-color": "#666",
"size": 3
},
"line-width": 0,
"line-color": "#666",
"guide": {
"visible": false
},
"offset": 10
},
"plot": {
},
"series": [{
"line-width": 1,
"line-color": "#c00",
"shadow": false,
"marker": {
"type": "circle",
"border-color": "#fff",
"border-width": 4,
"size": 4,
"background-color": "#c00",
"shadow": false
},
"values": [
[1, 218.2],
[2, 121.7],
[4, 62.27],
[8, 34.37],
[16, 19.79],
[20, 16.52],
[32, 17.1],
[40, 16.11],
[64, 91.9]
]
}]
};
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": "line",
"background-color": "#fff",
"plotarea": {
"border-width": 1,
"border-color": "#666"
},
"scaleX": {
"max-items": 9999, //forces all items
"items-overlap": true, //forces items (lablels) to show even when overlapping
"label": {
"text": "Number of Capabilities",
"bold": false,
"color": "#333",
"font-size": 11
},
"tick": {
"line-width": 1,
"line-color": "#666",
"size": 3,
"alpha": 0,
//below rules are used to adjust the trasparency of certain labels
"rules": [{
"rule": "%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
"alpha": 1
}]
},
"item": {
"font-size": 10,
"alpha": 0,
"rules": [{
"rule": "%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
"alpha": 1
}]
},
"line-width": 0,
"line-color": "#666",
"guide": {
"visible": false
},
"offset": 20
},
"scaleY": {
"label": {
"text": "Time (sec)",
"bold": false,
"color": "#333",
"font-size": 11
},
"values": "0:250:50",
"item": {
"font-size": 10,
"angle": 270
},
"tick": {
"line-width": 1,
"line-color": "#666",
"size": 3
},
"line-width": 0,
"line-color": "#666",
"guide": {
"visible": false
},
"offset": 10
},
"plot": {
},
"series": [{
"line-width": 1,
"line-color": "#c00",
"shadow": false,
"marker": {
"type": "circle",
"border-color": "#fff",
"border-width": 4,
"size": 4,
"background-color": "#c00",
"shadow": false
},
"values": [
[1, 218.2],
[2, 121.7],
[4, 62.27],
[8, 34.37],
[16, 19.79],
[20, 16.52],
[32, 17.1],
[40, 16.11],
[64, 91.9]
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});