• Edit
  • Download
  • <!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%"
      });
    });