<!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, #myChart { height: 100%; width: 100%; } </style> </head> <body> <div id='myChart'></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var __awaiter = (this && this.__awaiter) || function(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function(resolve) { resolve(value); }); } return new(P || (P = Promise))(function(resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; /* Mock API Function */ function getForecast(date) { return __awaiter(this, void 0, void 0, function*() { return new Promise((res, rej) => { res({ low: 49, high: 70 }); }); }); } // Grab the forecast data, then populate the chart let today = new Date(); getForecast(today).then((FORECAST) => { let chartConfig = { "type": "gauge", "title": { "text": `Forecast - ${today.toLocaleDateString()}`, "fontSize": 28, "fontWeight": 400 }, "plotarea": { "marginTop": '80px', }, "plot": { "size": '100%', "valueBox": [{ "placement": 'center', "text": `High (${FORECAST.high}°F)`, "fontSize": 24, "offsetY": 60, "offsetX": 75, "fontWeight": 400, "color": "#F70000" }, { "placement": 'center', "text": `Low (${FORECAST.low}°F)`, "fontSize": 24, "offsetY": 60, "offsetX": -75, "fontWeight": 400, "color": "#3D44EA" }, ] }, "scale": { "size-factor": 0.7 }, "scale-2": { "size-factor": 1 }, "scale-r": { "aperture": 200, "values": "0:120:10", "center": { "size": 5, "background-color": "#ffffff", "border-color": "none" }, "markers": [{ "type": "area", "range": [0, 40], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA #863AE7", "alpha": 0.7 }, { "type": "area", "range": [40, 80], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA", "alpha": 0.7 }, { "type": "area", "range": [80, 120], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA #3BB2E5", "alpha": 0.7 } ], "item": { "offset-r": 0, } }, "scale-r-2": { "aperture": 202, "values": "0:120:10", "center": { "size": 5, "background-color": "", "border-color": "none" }, "markers": [{ "type": "area", "range": [0, 40], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000 #FFFF4C", "alpha": 0.7 }, { "type": "area", "range": [40, 80], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000", "alpha": 0.7 }, { "type": "area", "range": [80, 120], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000 #F70000", "alpha": 0.7 } ], "item": { "offset-r": 0, }, "guide": { "alpha": 0 } }, "series": [{ "values": [FORECAST.low], "csize": "13%", "size": "90%" }, { "values": [FORECAST.high], "scales": "scale-2,scale-r-2", "csize": "13%", "size": "90%" } ] }; zingchart.render({ id: 'myChart', data: chartConfig, height: "100%", 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>
html, body, #myChart { height: 100%; width: 100%; }
var __awaiter = (this && this.__awaiter) || function(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function(resolve) { resolve(value); }); } return new(P || (P = Promise))(function(resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; /* Mock API Function */ function getForecast(date) { return __awaiter(this, void 0, void 0, function*() { return new Promise((res, rej) => { res({ low: 49, high: 70 }); }); }); } // Grab the forecast data, then populate the chart let today = new Date(); getForecast(today).then((FORECAST) => { let chartConfig = { "type": "gauge", "title": { "text": `Forecast - ${today.toLocaleDateString()}`, "fontSize": 28, "fontWeight": 400 }, "plotarea": { "marginTop": '80px', }, "plot": { "size": '100%', "valueBox": [{ "placement": 'center', "text": `High (${FORECAST.high}°F)`, "fontSize": 24, "offsetY": 60, "offsetX": 75, "fontWeight": 400, "color": "#F70000" }, { "placement": 'center', "text": `Low (${FORECAST.low}°F)`, "fontSize": 24, "offsetY": 60, "offsetX": -75, "fontWeight": 400, "color": "#3D44EA" }, ] }, "scale": { "size-factor": 0.7 }, "scale-2": { "size-factor": 1 }, "scale-r": { "aperture": 200, "values": "0:120:10", "center": { "size": 5, "background-color": "#ffffff", "border-color": "none" }, "markers": [{ "type": "area", "range": [0, 40], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA #863AE7", "alpha": 0.7 }, { "type": "area", "range": [40, 80], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA", "alpha": 0.7 }, { "type": "area", "range": [80, 120], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#3D44EA #3BB2E5", "alpha": 0.7 } ], "item": { "offset-r": 0, } }, "scale-r-2": { "aperture": 202, "values": "0:120:10", "center": { "size": 5, "background-color": "", "border-color": "none" }, "markers": [{ "type": "area", "range": [0, 40], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000 #FFFF4C", "alpha": 0.7 }, { "type": "area", "range": [40, 80], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000", "alpha": 0.7 }, { "type": "area", "range": [80, 120], "offset-start": 0.85, "offset-end": 0.05, "background-color": "#F7A000 #F70000", "alpha": 0.7 } ], "item": { "offset-r": 0, }, "guide": { "alpha": 0 } }, "series": [{ "values": [FORECAST.low], "csize": "13%", "size": "90%" }, { "values": [FORECAST.high], "scales": "scale-2,scale-r-2", "csize": "13%", "size": "90%" } ] }; zingchart.render({ id: 'myChart', data: chartConfig, height: "100%", width: "100%" }); });