• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     html,
    12.     body {
    13.       height: 100%;
    14.       width: 100%;
    15.       margin: 0;
    16.       padding: 0;
    17.     }
    18.  
    19.     .chart--container {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <!-- CHART CONTAINER -->
    33.   <div id="myChart" class="chart--container">
    34.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    35.   </div>
    36.   <script>
    37.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    38.     var _hsl2rgb_ = function(iH, iS, iL) {
    39.       var iR, iG, iB;
    40.       if (iS == 0) {
    41.         iR = iG = iB = iL;
    42.       } else {
    43.         function hue2rgb(p, q, t) {
    44.           if (t < 0) t += 1;
    45.           if (t > 1) t -= 1;
    46.           if (t < 1 / 6) return p + (q - p) * 6 * t;
    47.           if (t < 1 / 2) return q;
    48.           if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    49.           return p;
    50.         }
    51.         var q = iL < 0.5 ? iL * (1 + iS) : iL + iS - iL * iS;
    52.         var p = 2 * iL - q;
    53.         iR = hue2rgb(p, q, iH + 1 / 3);
    54.         iG = hue2rgb(p, q, iH);
    55.         iB = hue2rgb(p, q, iH - 1 / 3);
    56.       }
    57.       return [ZC._i_(iR * 255), ZC._i_(iG * 255), ZC._i_(iB * 255)];
    58.     };
    59.  
    60.     var componentToHex = function(c) {
    61.       var hex = c.toString(16);
    62.       return hex.length == 1 ? "0" + hex : hex;
    63.     }
    64.  
    65.     var rgbToHex = function(r, g, b) {
    66.       return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    67.     }
    68.  
    69.     var _luminance_ = function(sHexColor, sLight, sDark) {
    70.       var r = parseInt(sHexColor.substr(1, 2), 16);
    71.       var g = parseInt(sHexColor.substr(3, 2), 16);
    72.       var b = parseInt(sHexColor.substr(5, 2), 16);
    73.       var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    74.       return (yiq >= 128) ? sDark : sLight;
    75.     };
    76.  
    77.     window.myfunc = function(p) {
    78.       var h = (p.value - 100) / 200,
    79.         s = 0.75,
    80.         l = 0.5;
    81.       if (h > 0.5) {
    82.         l = 1 - h;
    83.       }
    84.       var rgb = _hsl2rgb_(h, s, l);
    85.       var rgbh = _hsl2rgb_(h / 2, s, l);
    86.       return {
    87.         backgroundColor: 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')',
    88.         fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
    89.         //lineWidth : 1+Math.pow(2, p.value/50),
    90.         hoverState: {
    91.           backgroundColor: 'rgb(' + rgbh[0] + ',' + rgbh[1] + ',' + rgbh[2] + ')',
    92.           fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
    93.           //lineWidth : 1+Math.pow(2, p.value/50)
    94.         }
    95.       };
    96.     }
    97.  
    98.     var myConfig = {
    99.       "graphset": [{
    100.         "type": "bar",
    101.         "background-color": "#fff",
    102.         "title": {
    103.           "background-color": "#777",
    104.           "text": "Inbound Call Report",
    105.           "adjust-layout": true
    106.         },
    107.         "subtitle": {
    108.           "text": "Location: Dallas - Team: 11<br>June 30, 2015 5:00PM - July 06, 2015 5:00PM",
    109.           "adjust-layout": true
    110.         },
    111.         "scale-x": {
    112.           "min-value": 1435708800000,
    113.           "step": "hour",
    114.           "line-color": "#333",
    115.           "zooming": true,
    116.           "max-items": 7,
    117.           "transform": {
    118.             "type": "date",
    119.             "all": "%M %d %Y<br>%h:%i %A",
    120.             "guide": {
    121.               "visible": false
    122.             },
    123.             "item": {
    124.               "visible": false
    125.             }
    126.           },
    127.           "label": {
    128.             "text": "Call Time by Hour",
    129.             "font-color": "#333"
    130.           },
    131.           "guide": {
    132.             "visible": false
    133.           },
    134.           "tick": {
    135.             "line-color": "#333",
    136.           }
    137.         },
    138.         "scale-y": {
    139.           "step": 50,
    140.           "line-color": "#333",
    141.           "guide": {
    142.             "line-style": "solid",
    143.             "line-color": "#c4c4c4"
    144.           },
    145.           "tick": {
    146.             "line-color": "#333",
    147.           },
    148.           "label": {
    149.             "text": "Minutes on the Phone",
    150.             "font-color": "#333"
    151.           }
    152.         },
    153.         "scroll-x": {
    154.           "bar": {
    155.             "background-color": "#777"
    156.           },
    157.           "handle": {
    158.             "background-color": "#76DF20"
    159.           }
    160.         },
    161.         "zoom": {
    162.           "background-color": "#20DFC6"
    163.         },
    164.         "plot": {
    165.           "line-width": 3,
    166.           "max-trackers": 9999,
    167.           "mode": "normal",
    168.           "js-rule": "myfunc()",
    169.           "shadow": false,
    170.           "marker": {
    171.             "type": "none"
    172.           }
    173.         },
    174.         "plotarea": {
    175.           "adjust-layout": true,
    176.           "margin-right": 35
    177.         },
    178.         "tooltip": {
    179.           "js-rule": "myfunc()",
    180.           "shadow": 0,
    181.           "font-color": "#000",
    182.           "text": "%k<br><br>%v<br>Minutes",
    183.           "border-radius": "5px",
    184.           "sticky": true,
    185.           "timeout": 500,
    186.           "decimals": 2
    187.         },
    188.         "series": [{
    189.           "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]
    190.         }]
    191.       }]
    192.     };
    193.  
    194.     zingchart.render({
    195.       id: 'myChart',
    196.       data: myConfig,
    197.       height: '100%',
    198.       width: '100%'
    199.     });
    200.   </script>
    201. </body>
    202.  
    203. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <!-- CHART CONTAINER -->
    14.   <div id="myChart" class="chart--container">
    15.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    16.   </div>
    17. </body>
    18.  
    19. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var _hsl2rgb_ = function(iH, iS, iL) {
    2.   var iR, iG, iB;
    3.   if (iS == 0) {
    4.     iR = iG = iB = iL;
    5.   } else {
    6.     function hue2rgb(p, q, t) {
    7.       if (t < 0) t += 1;
    8.       if (t > 1) t -= 1;
    9.       if (t < 1 / 6) return p + (q - p) * 6 * t;
    10.       if (t < 1 / 2) return q;
    11.       if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    12.       return p;
    13.     }
    14.     var q = iL < 0.5 ? iL * (1 + iS) : iL + iS - iL * iS;
    15.     var p = 2 * iL - q;
    16.     iR = hue2rgb(p, q, iH + 1 / 3);
    17.     iG = hue2rgb(p, q, iH);
    18.     iB = hue2rgb(p, q, iH - 1 / 3);
    19.   }
    20.   return [ZC._i_(iR * 255), ZC._i_(iG * 255), ZC._i_(iB * 255)];
    21. };
    22.  
    23. var componentToHex = function(c) {
    24.   var hex = c.toString(16);
    25.   return hex.length == 1 ? "0" + hex : hex;
    26. }
    27.  
    28. var rgbToHex = function(r, g, b) {
    29.   return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    30. }
    31.  
    32. var _luminance_ = function(sHexColor, sLight, sDark) {
    33.   var r = parseInt(sHexColor.substr(1, 2), 16);
    34.   var g = parseInt(sHexColor.substr(3, 2), 16);
    35.   var b = parseInt(sHexColor.substr(5, 2), 16);
    36.   var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    37.   return (yiq >= 128) ? sDark : sLight;
    38. };
    39.  
    40. window.myfunc = function(p) {
    41.   var h = (p.value - 100) / 200,
    42.     s = 0.75,
    43.     l = 0.5;
    44.   if (h > 0.5) {
    45.     l = 1 - h;
    46.   }
    47.   var rgb = _hsl2rgb_(h, s, l);
    48.   var rgbh = _hsl2rgb_(h / 2, s, l);
    49.   return {
    50.     backgroundColor: 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')',
    51.     fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
    52.     //lineWidth : 1+Math.pow(2, p.value/50),
    53.     hoverState: {
    54.       backgroundColor: 'rgb(' + rgbh[0] + ',' + rgbh[1] + ',' + rgbh[2] + ')',
    55.       fontColor: _luminance_(rgbToHex(rgb[0], rgb[1], rgb[2]), "#fff", "#000"),
    56.       //lineWidth : 1+Math.pow(2, p.value/50)
    57.     }
    58.   };
    59. }
    60.  
    61. var myConfig = {
    62.   "graphset": [{
    63.     "type": "bar",
    64.     "background-color": "#fff",
    65.     "title": {
    66.       "background-color": "#777",
    67.       "text": "Inbound Call Report",
    68.       "adjust-layout": true
    69.     },
    70.     "subtitle": {
    71.       "text": "Location: Dallas - Team: 11<br>June 30, 2015 5:00PM - July 06, 2015 5:00PM",
    72.       "adjust-layout": true
    73.     },
    74.     "scale-x": {
    75.       "min-value": 1435708800000,
    76.       "step": "hour",
    77.       "line-color": "#333",
    78.       "zooming": true,
    79.       "max-items": 7,
    80.       "transform": {
    81.         "type": "date",
    82.         "all": "%M %d %Y<br>%h:%i %A",
    83.         "guide": {
    84.           "visible": false
    85.         },
    86.         "item": {
    87.           "visible": false
    88.         }
    89.       },
    90.       "label": {
    91.         "text": "Call Time by Hour",
    92.         "font-color": "#333"
    93.       },
    94.       "guide": {
    95.         "visible": false
    96.       },
    97.       "tick": {
    98.         "line-color": "#333",
    99.       }
    100.     },
    101.     "scale-y": {
    102.       "step": 50,
    103.       "line-color": "#333",
    104.       "guide": {
    105.         "line-style": "solid",
    106.         "line-color": "#c4c4c4"
    107.       },
    108.       "tick": {
    109.         "line-color": "#333",
    110.       },
    111.       "label": {
    112.         "text": "Minutes on the Phone",
    113.         "font-color": "#333"
    114.       }
    115.     },
    116.     "scroll-x": {
    117.       "bar": {
    118.         "background-color": "#777"
    119.       },
    120.       "handle": {
    121.         "background-color": "#76DF20"
    122.       }
    123.     },
    124.     "zoom": {
    125.       "background-color": "#20DFC6"
    126.     },
    127.     "plot": {
    128.       "line-width": 3,
    129.       "max-trackers": 9999,
    130.       "mode": "normal",
    131.       "js-rule": "myfunc()",
    132.       "shadow": false,
    133.       "marker": {
    134.         "type": "none"
    135.       }
    136.     },
    137.     "plotarea": {
    138.       "adjust-layout": true,
    139.       "margin-right": 35
    140.     },
    141.     "tooltip": {
    142.       "js-rule": "myfunc()",
    143.       "shadow": 0,
    144.       "font-color": "#000",
    145.       "text": "%k<br><br>%v<br>Minutes",
    146.       "border-radius": "5px",
    147.       "sticky": true,
    148.       "timeout": 500,
    149.       "decimals": 2
    150.     },
    151.     "series": [{
    152.       "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]
    153.     }]
    154.   }]
    155. };
    156.  
    157. zingchart.render({
    158.   id: 'myChart',
    159.   data: myConfig,
    160.   height: '100%',
    161.   width: '100%'
    162. });