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