<!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"]; window.feed = function(callback) { var tick = {}; tick.plot0 = Math.ceil(Math.random() * 200); callback(JSON.stringify(tick)); }; var myConfig = { "type": "gauge", "refresh": { "type": "feed", "transport": "js", "url": "feed()", "interval": 500, "resetTimeout": 1000 }, "scaleR": { //"aperture":200, "values": "0:200:20", "center": { //Pivot Point "size": 5, "background-color": "#66CCFF #FFCCFF", "border-color": "none" }, "ring": { //Ring with Rules //"size":10, "rules": [{ "rule": "%v >= 0 && %v <= 20", "background-color": "red" }, { "rule": "%v >= 20 && %v <= 40", "background-color": "orange" }, { "rule": "%v >= 40 && %v <= 60", "background-color": "yellow" }, { "rule": "%v >= 60 && %v <= 80", "background-color": "blue" }, { "rule": "%v >= 80 && %v <=100", "background-color": "green" } ] }, "_labels": [ 20, 40, 60, 80, 100, 120, 140, 160, 180, 200 ], "item": { //Scale Label Styling "font-color": "purple", "font-family": "Georgia, serif", "font-size": 12, "font-weight": "bold", //or "normal" "font-style": "normal", //or "italic" "offset-r": -20, "angle": "auto" }, "guide": { //Specify your gauge chart's background color(s). "background-color": "#66CCFF #FFCCFF", "alpha": 0.2 }, "tick": { "line-color": "#66CCFF", "line-style": "solid", //solid,dashed,or dotted "line-width": 3, "size": 15, "placement": "inner" //outer,inner,or cross }, "minor-ticks": 4, //Specify the NUMBER of minor tick marks. "minor-tick": { //And then STYLE your minor tick markers. "line-color": "#FFFFFF", "line-style": "solid", //solid,dashed,or dotted "line-width": 2, "size": 10, "placement": "inner" //outer,inner,or cross } }, "plot": { "csize": "5%", "size": "100%", "background-color": "#000000", "animation": { //Animation object "effect": 2, "method": 0, "sequence": 4 //"speed":500 }, "value-box": { "height": 15, "width": 75, "text": "%v", "placement": "center", "font-color": 'black', "font-size": 80, "shadow": 0, "offsetX": -2, "offsetY": 25 } }, "series": [{ "values": [ 0 ] }] }; zingchart.render({ id: 'myChart', data: myConfig, height: 400, width: '100%' }); </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>
window.feed = function(callback) { var tick = {}; tick.plot0 = Math.ceil(Math.random() * 200); callback(JSON.stringify(tick)); }; var myConfig = { "type": "gauge", "refresh": { "type": "feed", "transport": "js", "url": "feed()", "interval": 500, "resetTimeout": 1000 }, "scaleR": { //"aperture":200, "values": "0:200:20", "center": { //Pivot Point "size": 5, "background-color": "#66CCFF #FFCCFF", "border-color": "none" }, "ring": { //Ring with Rules //"size":10, "rules": [{ "rule": "%v >= 0 && %v <= 20", "background-color": "red" }, { "rule": "%v >= 20 && %v <= 40", "background-color": "orange" }, { "rule": "%v >= 40 && %v <= 60", "background-color": "yellow" }, { "rule": "%v >= 60 && %v <= 80", "background-color": "blue" }, { "rule": "%v >= 80 && %v <=100", "background-color": "green" } ] }, "_labels": [ 20, 40, 60, 80, 100, 120, 140, 160, 180, 200 ], "item": { //Scale Label Styling "font-color": "purple", "font-family": "Georgia, serif", "font-size": 12, "font-weight": "bold", //or "normal" "font-style": "normal", //or "italic" "offset-r": -20, "angle": "auto" }, "guide": { //Specify your gauge chart's background color(s). "background-color": "#66CCFF #FFCCFF", "alpha": 0.2 }, "tick": { "line-color": "#66CCFF", "line-style": "solid", //solid,dashed,or dotted "line-width": 3, "size": 15, "placement": "inner" //outer,inner,or cross }, "minor-ticks": 4, //Specify the NUMBER of minor tick marks. "minor-tick": { //And then STYLE your minor tick markers. "line-color": "#FFFFFF", "line-style": "solid", //solid,dashed,or dotted "line-width": 2, "size": 10, "placement": "inner" //outer,inner,or cross } }, "plot": { "csize": "5%", "size": "100%", "background-color": "#000000", "animation": { //Animation object "effect": 2, "method": 0, "sequence": 4 //"speed":500 }, "value-box": { "height": 15, "width": 75, "text": "%v", "placement": "center", "font-color": 'black', "font-size": 80, "shadow": 0, "offsetX": -2, "offsetY": 25 } }, "series": [{ "values": [ 0 ] }] }; zingchart.render({ id: 'myChart', data: myConfig, height: 400, width: '100%' });