• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var _hsl2rgb_ = function(iH, iS, iL) {
          var iR, iG, iB;
          if (iS == 0) {
            iR = iG = iB = iL;
          } else {
            function hue2rgb(p, q, t) {
              if (t < 0) t += 1;
              if (t > 1) t -= 1;
              if (t < 1 / 6) return p + (q - p) * 6 * t;
              if (t < 1 / 2) return q;
              if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
              return p;
            }
            var q = iL < 0.5 ? iL * (1 + iS) : iL + iS - iL * iS;
            var p = 2 * iL - q;
            iR = hue2rgb(p, q, iH + 1 / 3);
            iG = hue2rgb(p, q, iH);
            iB = hue2rgb(p, q, iH - 1 / 3);
          }
          return [ZC._i_(iR * 255), ZC._i_(iG * 255), ZC._i_(iB * 255)];
        };
    
        var componentToHex = function(c) {
          var hex = c.toString(16);
          return hex.length == 1 ? "0" + hex : hex;
        }
    
        var rgbToHex = function(r, g, b) {
          return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
        }
    
        var _luminance_ = function(sHexColor, sLight, sDark) {
          var r = parseInt(sHexColor.substr(1, 2), 16);
          var g = parseInt(sHexColor.substr(3, 2), 16);
          var b = parseInt(sHexColor.substr(5, 2), 16);
          var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
          return (yiq >= 128) ? sDark : sLight;
        };
    
        window.myfunc = function(p) {
          var h = (p.value - 100) / 200,
            s = 0.75,
            l = 0.5;
          if (h > 0.5) {
            l = 1 - h;
          }
          var rgb = _hsl2rgb_(h, s, l);
          var rgbh = _hsl2rgb_(h / 2, s, l);
          return {
            backgroundColor: 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')',
            fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
            //lineWidth : 1+Math.pow(2, p.value/50),
            hoverState: {
              backgroundColor: 'rgb(' + rgbh[0] + ',' + rgbh[1] + ',' + rgbh[2] + ')',
              fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
              //lineWidth : 1+Math.pow(2, p.value/50)
            }
          };
        }
    
        var myConfig = {
          "graphset": [{
            "type": "bar",
            "background-color": "#fff",
            "title": {
              "background-color": "#777",
              "text": "Inbound Call Report",
              "adjust-layout": true
            },
            "subtitle": {
              "text": "Location: Dallas - Team: 11<br>June 30, 2015 5:00PM - July 06, 2015 5:00PM",
              "adjust-layout": true
            },
            "scale-x": {
              "min-value": 1435708800000,
              "step": "hour",
              "line-color": "#333",
              "zooming": true,
              "max-items": 7,
              "transform": {
                "type": "date",
                "all": "%M %d %Y<br>%h:%i %A",
                "guide": {
                  "visible": false
                },
                "item": {
                  "visible": false
                }
              },
              "label": {
                "text": "Call Time by Hour",
                "font-color": "#333"
              },
              "guide": {
                "visible": false
              },
              "tick": {
                "line-color": "#333",
              }
            },
            "scale-y": {
              "step": 50,
              "line-color": "#333",
              "guide": {
                "line-style": "solid",
                "line-color": "#c4c4c4"
              },
              "tick": {
                "line-color": "#333",
              },
              "label": {
                "text": "Minutes on the Phone",
                "font-color": "#333"
              }
            },
            "scroll-x": {
              "bar": {
                "background-color": "#777"
              },
              "handle": {
                "background-color": "#76DF20"
              }
            },
            "zoom": {
              "background-color": "#20DFC6"
            },
            "plot": {
              "line-width": 3,
              "max-trackers": 9999,
              "mode": "normal",
              "js-rule": "myfunc()",
              "shadow": false,
              "marker": {
                "type": "none"
              }
            },
            "plotarea": {
              "adjust-layout": true,
              "margin-right": 35
            },
            "tooltip": {
              "js-rule": "myfunc()",
              "shadow": 0,
              "font-color": "#000",
              "text": "%k<br><br>%v<br>Minutes",
              "border-radius": "5px",
              "sticky": true,
              "timeout": 500,
              "decimals": 2
            },
            "series": [{
              "values": [130.39037190843374, 137.82352810259908, 115.42552042752504, 105.8985303575173, 103.17760393489152, 106.5157283982262, 115.92864951118827, 123.19986194372177, 130.39037190843374, 137.82352810259908, 137.13911484461278, 136.41467599198222, 132.66717618796974, 129.72170210443437, 131.15643296856433, 122.8077205363661, 125.21956569515169, 115.42552042752504, 116.27919161692262, 115.37922341842204, 123.280792334117, 125.80900968052447, 126.5779703296721, 136.0639208741486, 134.91431394591928, 143.1818949058652, 141.5956212207675, 144.00946975219995, 142.58891925681382, 136.97318396065384, 132.6707432139665, 133.59662600792944, 131.67003435548395, 128.6872488167137, 138.6640751780942, 133.68509215768427, 142.87961044348776, 144.83349648769945, 149.6387172723189, 157.63311076909304, 167.24209581501782, 176.82213213294744, 184.54013934358954, 188.76858743838966, 185.7986462675035, 181.9442157773301, 183.81773353554308, 190.00635411590338, 196.7253781761974, 197.046047761105, 207.00932875275612, 212.01005658134818, 208.9711654977873, 215.2892983937636, 210.6406500050798, 212.5627496931702, 203.31407259684056, 203.61929894890636, 201.94171560928226, 206.40297472011298, 215.6654707621783, 221.01836185436696, 230.01836185436696, 242.87961044348776, 237.87961044348776, 219.09721012692899, 214.93723195511848, 209.47212534025311, 204.76167376618832, 195.5567279458046, 195.63107108697295, 195.36074035335332, 195.68158132955432, 186.48385820444673, 187.37324917223305, 177.69300658721477, 173.9657269883901, 146.73953369259834, 142.55781156010926, 141.23191310092807, 145.27394111268222, 140.00836457125843, 145.08349590469152, 148.69954527821392, 144.63809083215892, 141.91962704528123, 150.7710352819413, 152.36544562503695, 149.3799415929243, 150.6317104632035, 154.50830295216292, 153.08651010505855, 146.96675116661936, 137.29447277262807, 140.7835721084848, 141.16032130550593, 136.29475314635783, 128.89791775960475, 153.08651010505855, 146.96675116661936, 137.29447277262807, 140.7835721084848, 141.16032130550593, 136.29475314635783, 128.89791775960475, 125.37268431857228, 123.03045104723424, 119.46262229699641, 115.46265214699641, 119.21671440359205, 128.82347344886512, 121.73517451621592, 117.21783087588847, 127.03464472200722, 117.21783087588847, 126.21696717105806, 129.02965650893748, 124.59247510880232, 118.40024844743311, 110.40024844743311, 110.40024844743311, 106.40024844743311, 127.65546347945929, 132.93117898516357, 134.1007771762088, 140.69107306189835, 140.28070971369743, 144.2097987793386, 142.87268072832376, 141.4521514531225, 147.82087058294564, 140.0491758994758, 132.14203683193773, 132.13804602622986, 132.43992226663977, 140.8460800582543, 134.65536702424288, 125.61551874503493, 129.12139180116355, 121.95768306031823, 125.61551874503493, 129.12139180116355, 121.95768306031823, 112.34819089528173, 118.24232061393559]
            }]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          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>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var _hsl2rgb_ = function(iH, iS, iL) {
      var iR, iG, iB;
      if (iS == 0) {
        iR = iG = iB = iL;
      } else {
        function hue2rgb(p, q, t) {
          if (t < 0) t += 1;
          if (t > 1) t -= 1;
          if (t < 1 / 6) return p + (q - p) * 6 * t;
          if (t < 1 / 2) return q;
          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
          return p;
        }
        var q = iL < 0.5 ? iL * (1 + iS) : iL + iS - iL * iS;
        var p = 2 * iL - q;
        iR = hue2rgb(p, q, iH + 1 / 3);
        iG = hue2rgb(p, q, iH);
        iB = hue2rgb(p, q, iH - 1 / 3);
      }
      return [ZC._i_(iR * 255), ZC._i_(iG * 255), ZC._i_(iB * 255)];
    };
    
    var componentToHex = function(c) {
      var hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;
    }
    
    var rgbToHex = function(r, g, b) {
      return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }
    
    var _luminance_ = function(sHexColor, sLight, sDark) {
      var r = parseInt(sHexColor.substr(1, 2), 16);
      var g = parseInt(sHexColor.substr(3, 2), 16);
      var b = parseInt(sHexColor.substr(5, 2), 16);
      var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
      return (yiq >= 128) ? sDark : sLight;
    };
    
    window.myfunc = function(p) {
      var h = (p.value - 100) / 200,
        s = 0.75,
        l = 0.5;
      if (h > 0.5) {
        l = 1 - h;
      }
      var rgb = _hsl2rgb_(h, s, l);
      var rgbh = _hsl2rgb_(h / 2, s, l);
      return {
        backgroundColor: 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')',
        fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
        //lineWidth : 1+Math.pow(2, p.value/50),
        hoverState: {
          backgroundColor: 'rgb(' + rgbh[0] + ',' + rgbh[1] + ',' + rgbh[2] + ')',
          fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
          //lineWidth : 1+Math.pow(2, p.value/50)
        }
      };
    }
    
    var myConfig = {
      "graphset": [{
        "type": "bar",
        "background-color": "#fff",
        "title": {
          "background-color": "#777",
          "text": "Inbound Call Report",
          "adjust-layout": true
        },
        "subtitle": {
          "text": "Location: Dallas - Team: 11<br>June 30, 2015 5:00PM - July 06, 2015 5:00PM",
          "adjust-layout": true
        },
        "scale-x": {
          "min-value": 1435708800000,
          "step": "hour",
          "line-color": "#333",
          "zooming": true,
          "max-items": 7,
          "transform": {
            "type": "date",
            "all": "%M %d %Y<br>%h:%i %A",
            "guide": {
              "visible": false
            },
            "item": {
              "visible": false
            }
          },
          "label": {
            "text": "Call Time by Hour",
            "font-color": "#333"
          },
          "guide": {
            "visible": false
          },
          "tick": {
            "line-color": "#333",
          }
        },
        "scale-y": {
          "step": 50,
          "line-color": "#333",
          "guide": {
            "line-style": "solid",
            "line-color": "#c4c4c4"
          },
          "tick": {
            "line-color": "#333",
          },
          "label": {
            "text": "Minutes on the Phone",
            "font-color": "#333"
          }
        },
        "scroll-x": {
          "bar": {
            "background-color": "#777"
          },
          "handle": {
            "background-color": "#76DF20"
          }
        },
        "zoom": {
          "background-color": "#20DFC6"
        },
        "plot": {
          "line-width": 3,
          "max-trackers": 9999,
          "mode": "normal",
          "js-rule": "myfunc()",
          "shadow": false,
          "marker": {
            "type": "none"
          }
        },
        "plotarea": {
          "adjust-layout": true,
          "margin-right": 35
        },
        "tooltip": {
          "js-rule": "myfunc()",
          "shadow": 0,
          "font-color": "#000",
          "text": "%k<br><br>%v<br>Minutes",
          "border-radius": "5px",
          "sticky": true,
          "timeout": 500,
          "decimals": 2
        },
        "series": [{
          "values": [130.39037190843374, 137.82352810259908, 115.42552042752504, 105.8985303575173, 103.17760393489152, 106.5157283982262, 115.92864951118827, 123.19986194372177, 130.39037190843374, 137.82352810259908, 137.13911484461278, 136.41467599198222, 132.66717618796974, 129.72170210443437, 131.15643296856433, 122.8077205363661, 125.21956569515169, 115.42552042752504, 116.27919161692262, 115.37922341842204, 123.280792334117, 125.80900968052447, 126.5779703296721, 136.0639208741486, 134.91431394591928, 143.1818949058652, 141.5956212207675, 144.00946975219995, 142.58891925681382, 136.97318396065384, 132.6707432139665, 133.59662600792944, 131.67003435548395, 128.6872488167137, 138.6640751780942, 133.68509215768427, 142.87961044348776, 144.83349648769945, 149.6387172723189, 157.63311076909304, 167.24209581501782, 176.82213213294744, 184.54013934358954, 188.76858743838966, 185.7986462675035, 181.9442157773301, 183.81773353554308, 190.00635411590338, 196.7253781761974, 197.046047761105, 207.00932875275612, 212.01005658134818, 208.9711654977873, 215.2892983937636, 210.6406500050798, 212.5627496931702, 203.31407259684056, 203.61929894890636, 201.94171560928226, 206.40297472011298, 215.6654707621783, 221.01836185436696, 230.01836185436696, 242.87961044348776, 237.87961044348776, 219.09721012692899, 214.93723195511848, 209.47212534025311, 204.76167376618832, 195.5567279458046, 195.63107108697295, 195.36074035335332, 195.68158132955432, 186.48385820444673, 187.37324917223305, 177.69300658721477, 173.9657269883901, 146.73953369259834, 142.55781156010926, 141.23191310092807, 145.27394111268222, 140.00836457125843, 145.08349590469152, 148.69954527821392, 144.63809083215892, 141.91962704528123, 150.7710352819413, 152.36544562503695, 149.3799415929243, 150.6317104632035, 154.50830295216292, 153.08651010505855, 146.96675116661936, 137.29447277262807, 140.7835721084848, 141.16032130550593, 136.29475314635783, 128.89791775960475, 153.08651010505855, 146.96675116661936, 137.29447277262807, 140.7835721084848, 141.16032130550593, 136.29475314635783, 128.89791775960475, 125.37268431857228, 123.03045104723424, 119.46262229699641, 115.46265214699641, 119.21671440359205, 128.82347344886512, 121.73517451621592, 117.21783087588847, 127.03464472200722, 117.21783087588847, 126.21696717105806, 129.02965650893748, 124.59247510880232, 118.40024844743311, 110.40024844743311, 110.40024844743311, 106.40024844743311, 127.65546347945929, 132.93117898516357, 134.1007771762088, 140.69107306189835, 140.28070971369743, 144.2097987793386, 142.87268072832376, 141.4521514531225, 147.82087058294564, 140.0491758994758, 132.14203683193773, 132.13804602622986, 132.43992226663977, 140.8460800582543, 134.65536702424288, 125.61551874503493, 129.12139180116355, 121.95768306031823, 125.61551874503493, 129.12139180116355, 121.95768306031823, 112.34819089528173, 118.24232061393559]
        }]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });