<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/2.1.2/zingchart.min.js"></script>
<script nonce="undefined">
zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.2/modules/";
</script>
<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 = {
"layout": null,
"graphset": [{
"type": null,
"x": 0,
"y": 0,
"height": 36,
"width": "100%",
"background-color": "none",
"title": {
"text": "Prices for Camera Segment",
"height": 20,
"background-color": "#000661"
},
"subtitle": {
"text": "Cameras",
"background-color": "#234979",
"color": "white",
"y": 20,
"height": 16
}
},
{
"type": "grid",
"x": 0,
"y": 36,
"height": 100,
"width": "100%",
"background-color": "none",
"options": {
"header-row": false,
"col-widths": ["10%", "22.5%", "22.5%", "22.5%", "22.5%"],
"style": {
".tr": {
"height": 20,
"align": "center"
},
".td_1_0": {
"height": 60
}
}
},
"series": [{
"values": [
"Price (SAR)",
"Konica",
"Nikon",
"Canon",
"Konica"
]
},
{
"values": ["PRICES"]
}
]
},
{
"type": "grid",
"x": "10%",
"y": 56,
"height": 60,
"width": "90%",
"background-color": "none",
"options": {
"header-row": false,
"col-widths": [
"7%", "11%", "7%",
"7%", "11%", "7%",
"7%", "11%", "7%",
"7%", "11%", "7%"
],
"style": {
".td_1_0": {
"height": 20
}
}
},
"series": [{
"values": [
"USER",
"KM1",
"NA",
"USER",
"COOLPIX",
"200",
"USER",
"CM1",
"250",
"USER",
"KM1",
"150"
]
},
{
"values": [
"ENTRY",
"KM2",
"NA",
"ENTRY",
"D300",
"400",
"ENTRY",
"CM2",
"450",
"ENTRY",
"KM2",
"350"
]
},
{
"values": [
"PRO",
"KM3",
"NA",
"PRO",
"D1",
"1,200",
"PRO",
"CM3",
"1,250",
"PRO",
"KM3",
"1,150"
]
}
]
},
{
"type": "line",
"x": 0,
"y": 116,
"height": 484,
"width": "100%",
"background-color": "white",
"plotarea": {
"margin-top": 20,
"margin-left": "10%",
"margin-right": 0
},
"plot": {
"value-box": {
"color": "black",
"text": "%data-level<br>%data-camera<br>%v",
"placement": "middle",
"font-weight": "none"
},
"marker": {
"type": "rectangle",
"height": 40,
"width": 120,
"background-color": "white",
"border-with": 2,
"border-color": "black",
"line-style": "dotted"
},
"hover-marker": {
"visible": false
},
"hover-state": {
"visible": false
},
"tooltip": {
"visible": false
},
"line-color": "black",
"line-style": "dashed",
"line-width": 2
},
"scale-y": {
"guide": {
"visible": false
},
"label": {
"text": "Price"
}
},
"scale-x": {
"markers": [{
"type": "line",
"range": [0.5],
"line-width": 2,
"line-color": "#F2F2F2"
},
{
"type": "line",
"range": [1.5],
"line-width": 2,
"line-color": "#F2F2F2"
},
{
"type": "line",
"range": [2.5],
"line-width": 2,
"line-color": "#F2F2F2"
}
],
"labels": ["Konica", "Nikon", "Canon", "Konica"],
"guide": {
"visible": false
},
"offset-start": 90,
"offset-end": 90
},
"series": [{
"values": [null, 200, 250, 150],
"data-level": "USER",
"data-camera": [null, "COOLPIX", "CM1", "KM1"]
},
{
"values": [null, 400, 450, 350],
"data-level": "ENTRY",
"data-camera": [null, "D300", "CM2", "KM2"]
},
{
"values": [null, 1200, 1250, 1150],
"data-level": "PRO",
"data-camera": [null, "D1", "CM3", "KM3"]
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 600,
width: 800
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/2.1.2/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.2/modules/";
</script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
"layout": null,
"graphset": [{
"type": null,
"x": 0,
"y": 0,
"height": 36,
"width": "100%",
"background-color": "none",
"title": {
"text": "Prices for Camera Segment",
"height": 20,
"background-color": "#000661"
},
"subtitle": {
"text": "Cameras",
"background-color": "#234979",
"color": "white",
"y": 20,
"height": 16
}
},
{
"type": "grid",
"x": 0,
"y": 36,
"height": 100,
"width": "100%",
"background-color": "none",
"options": {
"header-row": false,
"col-widths": ["10%", "22.5%", "22.5%", "22.5%", "22.5%"],
"style": {
".tr": {
"height": 20,
"align": "center"
},
".td_1_0": {
"height": 60
}
}
},
"series": [{
"values": [
"Price (SAR)",
"Konica",
"Nikon",
"Canon",
"Konica"
]
},
{
"values": ["PRICES"]
}
]
},
{
"type": "grid",
"x": "10%",
"y": 56,
"height": 60,
"width": "90%",
"background-color": "none",
"options": {
"header-row": false,
"col-widths": [
"7%", "11%", "7%",
"7%", "11%", "7%",
"7%", "11%", "7%",
"7%", "11%", "7%"
],
"style": {
".td_1_0": {
"height": 20
}
}
},
"series": [{
"values": [
"USER",
"KM1",
"NA",
"USER",
"COOLPIX",
"200",
"USER",
"CM1",
"250",
"USER",
"KM1",
"150"
]
},
{
"values": [
"ENTRY",
"KM2",
"NA",
"ENTRY",
"D300",
"400",
"ENTRY",
"CM2",
"450",
"ENTRY",
"KM2",
"350"
]
},
{
"values": [
"PRO",
"KM3",
"NA",
"PRO",
"D1",
"1,200",
"PRO",
"CM3",
"1,250",
"PRO",
"KM3",
"1,150"
]
}
]
},
{
"type": "line",
"x": 0,
"y": 116,
"height": 484,
"width": "100%",
"background-color": "white",
"plotarea": {
"margin-top": 20,
"margin-left": "10%",
"margin-right": 0
},
"plot": {
"value-box": {
"color": "black",
"text": "%data-level<br>%data-camera<br>%v",
"placement": "middle",
"font-weight": "none"
},
"marker": {
"type": "rectangle",
"height": 40,
"width": 120,
"background-color": "white",
"border-with": 2,
"border-color": "black",
"line-style": "dotted"
},
"hover-marker": {
"visible": false
},
"hover-state": {
"visible": false
},
"tooltip": {
"visible": false
},
"line-color": "black",
"line-style": "dashed",
"line-width": 2
},
"scale-y": {
"guide": {
"visible": false
},
"label": {
"text": "Price"
}
},
"scale-x": {
"markers": [{
"type": "line",
"range": [0.5],
"line-width": 2,
"line-color": "#F2F2F2"
},
{
"type": "line",
"range": [1.5],
"line-width": 2,
"line-color": "#F2F2F2"
},
{
"type": "line",
"range": [2.5],
"line-width": 2,
"line-color": "#F2F2F2"
}
],
"labels": ["Konica", "Nikon", "Canon", "Konica"],
"guide": {
"visible": false
},
"offset-start": 90,
"offset-end": 90
},
"series": [{
"values": [null, 200, 250, 150],
"data-level": "USER",
"data-camera": [null, "COOLPIX", "CM1", "KM1"]
},
{
"values": [null, 400, 450, 350],
"data-level": "ENTRY",
"data-camera": [null, "D300", "CM2", "KM2"]
},
{
"values": [null, 1200, 1250, 1150],
"data-level": "PRO",
"data-camera": [null, "D1", "CM3", "KM3"]
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 600,
width: 800
});