release Notes Live

<!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 {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="zones"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var maxYValue = 60;
    var value1 = 40;
    var value2 = 15;
    var value3 = 34;
    var value4 = 14;
    var value5 = 20;
    var zones = {
      "type": "mixed",
      "font-family": "proxima_nova_rgregular",
      "title": {
        "text": "MINUTES IN ZONES",
        "font-family": "proxima_nova_rgregular",
        "background-color": "none",
        "font-color": "#39393d",
        "font-size": "22px",
        "adjustLayout": true
      },
      "plot": {
        "borderRadius": "5px 5px 0 0",
        "bar-width": '50%',
        "-animation": {
          "delay": 300,
          "effect": 11,
          "speed": "500",
          "method": "0",
          "sequence": "3",
          "z-index": 2
        },
        "value-box": {
          "placement": "top-out",
          "text": "%v",
          "decimals": 0,
          "font-color": "#35353b",
          "font-size": "14px",
          "alpha": 1,
          "background-color": "red",
          "padding": "5px 5px 0px 5px",
          "shadow": false,
          "-z-index": 4
        }
      },
      "plotarea": {
        "border-left": "3px solid #39393d",
        "border-bottom": "3px solid #39393d",
        "padding-left": "3px",
        "margin": "dynamic",
        "background-color": "none"
      },
      "tooltip": {
        "visible": false
      },
      "scale-x": {
        "placement": "opposite",
        "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
        "line-width": 0,
        "tick": {
          "visible": false
        },
        "guide": {
          "visible": false
        },
        "item": {
          "offsetY": 25,
          "font-size": 12,
          "fontColor": 'black',
          "bold": true
        },
      },
      "scale-y": {
        "offsetEnd": 45,
        "max-value": maxYValue,
        "visible": false,
        "line-width": 0,
        "guide": {
          "visible": false
        }
      },
      "series": [{
          "type": "bar",
          "values": [
            value1, value2, value3, value4, value5
          ],
          "background-color": "#cdcccc",
          "z-index": 2,
          "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
        },
        {
          "type": "line",
          "line-color": "gray",
          "marker": {
            "backgroundColor": "white",
            "borderWidth": 2,
            "border-color": "#35353b",
            "visible": false,
            "rules": [{
              "rule": " %node-index%3 == 1 ",
              "visible": true,
              "size": 7,
              "offset-y": -15
            }]

          },
          "value-box": {
            "visible": 0
          },
          "values": [
            [0, value1 + 2],
            [0, maxYValue],
            [0, null],
            [1, value2 + 2],
            [1, maxYValue],
            [1, null],
            [2, value3 + 2],
            [2, maxYValue],
            [2, null],
            [3, value4 + 2],
            [3, maxYValue],
            [3, null],
            [4, value5 + 2],
            [4, maxYValue],
            [4, null],
          ]
        }
      ]
    }
    zingchart.render({
      id: 'zones',
      data: zones,
      height: "320",
      width: "100%",
      output: 'canvas'
    });
  </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="zones"></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var zones = {
  "type": "mixed",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES IN ZONES",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true
  },
  "plot": {
    "borderRadius": "5px 5px 0 0",
    "bar-width": '50%',
    "-animation": {
      "delay": 300,
      "effect": 11,
      "speed": "500",
      "method": "0",
      "sequence": "3",
      "z-index": 2
    },
    "value-box": {
      "placement": "top-out",
      "text": "%v",
      "decimals": 0,
      "font-color": "#35353b",
      "font-size": "14px",
      "alpha": 1,
      "background-color": "red",
      "padding": "5px 5px 0px 5px",
      "shadow": false,
      "-z-index": 4
    }
  },
  "plotarea": {
    "border-left": "3px solid #39393d",
    "border-bottom": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "dynamic",
    "background-color": "none"
  },
  "tooltip": {
    "visible": false
  },
  "scale-x": {
    "placement": "opposite",
    "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
    "line-width": 0,
    "tick": {
      "visible": false
    },
    "guide": {
      "visible": false
    },
    "item": {
      "offsetY": 25,
      "font-size": 12,
      "fontColor": 'black',
      "bold": true
    },
  },
  "scale-y": {
    "offsetEnd": 45,
    "max-value": maxYValue,
    "visible": false,
    "line-width": 0,
    "guide": {
      "visible": false
    }
  },
  "series": [{
      "type": "bar",
      "values": [
        value1, value2, value3, value4, value5
      ],
      "background-color": "#cdcccc",
      "z-index": 2,
      "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
    },
    {
      "type": "line",
      "line-color": "gray",
      "marker": {
        "backgroundColor": "white",
        "borderWidth": 2,
        "border-color": "#35353b",
        "visible": false,
        "rules": [{
          "rule": " %node-index%3 == 1 ",
          "visible": true,
          "size": 7,
          "offset-y": -15
        }]

      },
      "value-box": {
        "visible": 0
      },
      "values": [
        [0, value1 + 2],
        [0, maxYValue],
        [0, null],
        [1, value2 + 2],
        [1, maxYValue],
        [1, null],
        [2, value3 + 2],
        [2, maxYValue],
        [2, null],
        [3, value4 + 2],
        [3, maxYValue],
        [3, null],
        [4, value5 + 2],
        [4, maxYValue],
        [4, null],
      ]
    }
  ]
}
zingchart.render({
  id: 'zones',
  data: zones,
  height: "320",
  width: "100%",
  output: 'canvas'
});