• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       "graphset": [{
    18.         "type": "bar",
    19.         "backgroundColor": "#333 #000",
    20.         "plot": {
    21.           "alpha": 0,
    22.           "mode": "normal",
    23.           "hover-state": {
    24.             "visible": false
    25.           }
    26.         },
    27.         "scale-x": {
    28.           "values": ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"],
    29.           "line-width": 1,
    30.           "line-color": "#fff",
    31.           "item": {
    32.             "color": "#fff"
    33.           },
    34.           "guide": {
    35.             "visible": false
    36.           },
    37.           "tick": {
    38.             "line-width": 1,
    39.             "line-color": "#000"
    40.           }
    41.         },
    42.         "scale-y": {
    43.           "line-width": 0,
    44.           "item": {
    45.             "color": "#fff"
    46.           },
    47.           "tick": {
    48.             "visible": false
    49.           },
    50.           "guide": {
    51.             "line-width": 0,
    52.             "items": [{
    53.                 "backgroundColor": "#ccc #ddd",
    54.                 "alpha": 0.1
    55.               },
    56.               {
    57.                 "backgroundColor": "#888 #999",
    58.                 "alpha": 0.1
    59.               }
    60.             ]
    61.           }
    62.         },
    63.         "series": [{
    64.             "values": [10, 6, 27, 16],
    65.             "backgroundColor": "#8AFE00 #50A701"
    66.           },
    67.           {
    68.             "values": [15, 22, 12, 8],
    69.             "backgroundColor": "#FF72CF #DC3CA9"
    70.           },
    71.           {
    72.             "values": [7, 11, 4, 23],
    73.             "backgroundColor": "#FF9C00 #FF6300"
    74.           },
    75.           {
    76.             "values": [16, 31, 8, 26],
    77.             "backgroundColor": "#B230FD #8204BE"
    78.           }
    79.         ]
    80.       }]
    81.     };
    82.  
    83.     zingchart.complete = function(params) {
    84.  
    85.       var shapes = [];
    86.  
    87.       var charttype = zingchart.exec(params.id, 'getcharttype');
    88.  
    89.       if (charttype != 'vbar') {
    90.         return;
    91.       }
    92.  
    93.       var render = zingchart.exec(params.id, 'getrender');
    94.  
    95.       var plots = zingchart.exec(params.id, 'getplotlength');
    96.       for (var p = 0; p < plots; p++) {
    97.         var nodes = zingchart.exec(params.id, 'getnodelength', {
    98.           plotindex: p
    99.         });
    100.  
    101.         var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
    102.           object: 'plot',
    103.           plotindex: p
    104.         });
    105.  
    106.         for (var n = 0; n < nodes; n++) {
    107.  
    108.           var info = zingchart.exec(params.id, 'getobjectinfo', {
    109.             object: 'node',
    110.             plotindex: p,
    111.             nodeindex: n
    112.           });
    113.  
    114.           var ledheight = 5,
    115.             leds = info.height / (ledheight + 3);
    116.           for (var i = 0; i < leds; i++) {
    117.             shapes.push({
    118.               x: info.x + 10,
    119.               y: info.y + info.height - (i + 1) * (ledheight + 3),
    120.               type: "rect",
    121.               flat: true,
    122.               width: info.width,
    123.               height: ledheight,
    124.               borderRadius: 3,
    125.               backgroundColor: plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
    126.               fillAngle: 90,
    127.               alpha: 1
    128.             });
    129.           }
    130.  
    131.         }
    132.       }
    133.  
    134.       zingchart.exec(params.id, 'addobject', {
    135.         type: 'shape',
    136.         data: shapes
    137.       });
    138.  
    139.     }
    140.  
    141.     zingchart.render({
    142.       id: 'myChart',
    143.       data: myConfig,
    144.       height: 400,
    145.       width: "100%"
    146.     });
    147.   </script>
    148. </body>
    149.  
    150. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   "graphset": [{
    3.     "type": "bar",
    4.     "backgroundColor": "#333 #000",
    5.     "plot": {
    6.       "alpha": 0,
    7.       "mode": "normal",
    8.       "hover-state": {
    9.         "visible": false
    10.       }
    11.     },
    12.     "scale-x": {
    13.       "values": ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"],
    14.       "line-width": 1,
    15.       "line-color": "#fff",
    16.       "item": {
    17.         "color": "#fff"
    18.       },
    19.       "guide": {
    20.         "visible": false
    21.       },
    22.       "tick": {
    23.         "line-width": 1,
    24.         "line-color": "#000"
    25.       }
    26.     },
    27.     "scale-y": {
    28.       "line-width": 0,
    29.       "item": {
    30.         "color": "#fff"
    31.       },
    32.       "tick": {
    33.         "visible": false
    34.       },
    35.       "guide": {
    36.         "line-width": 0,
    37.         "items": [{
    38.             "backgroundColor": "#ccc #ddd",
    39.             "alpha": 0.1
    40.           },
    41.           {
    42.             "backgroundColor": "#888 #999",
    43.             "alpha": 0.1
    44.           }
    45.         ]
    46.       }
    47.     },
    48.     "series": [{
    49.         "values": [10, 6, 27, 16],
    50.         "backgroundColor": "#8AFE00 #50A701"
    51.       },
    52.       {
    53.         "values": [15, 22, 12, 8],
    54.         "backgroundColor": "#FF72CF #DC3CA9"
    55.       },
    56.       {
    57.         "values": [7, 11, 4, 23],
    58.         "backgroundColor": "#FF9C00 #FF6300"
    59.       },
    60.       {
    61.         "values": [16, 31, 8, 26],
    62.         "backgroundColor": "#B230FD #8204BE"
    63.       }
    64.     ]
    65.   }]
    66. };
    67.  
    68. zingchart.complete = function(params) {
    69.  
    70.   var shapes = [];
    71.  
    72.   var charttype = zingchart.exec(params.id, 'getcharttype');
    73.  
    74.   if (charttype != 'vbar') {
    75.     return;
    76.   }
    77.  
    78.   var render = zingchart.exec(params.id, 'getrender');
    79.  
    80.   var plots = zingchart.exec(params.id, 'getplotlength');
    81.   for (var p = 0; p < plots; p++) {
    82.     var nodes = zingchart.exec(params.id, 'getnodelength', {
    83.       plotindex: p
    84.     });
    85.  
    86.     var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
    87.       object: 'plot',
    88.       plotindex: p
    89.     });
    90.  
    91.     for (var n = 0; n < nodes; n++) {
    92.  
    93.       var info = zingchart.exec(params.id, 'getobjectinfo', {
    94.         object: 'node',
    95.         plotindex: p,
    96.         nodeindex: n
    97.       });
    98.  
    99.       var ledheight = 5,
    100.         leds = info.height / (ledheight + 3);
    101.       for (var i = 0; i < leds; i++) {
    102.         shapes.push({
    103.           x: info.x + 10,
    104.           y: info.y + info.height - (i + 1) * (ledheight + 3),
    105.           type: "rect",
    106.           flat: true,
    107.           width: info.width,
    108.           height: ledheight,
    109.           borderRadius: 3,
    110.           backgroundColor: plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
    111.           fillAngle: 90,
    112.           alpha: 1
    113.         });
    114.       }
    115.  
    116.     }
    117.   }
    118.  
    119.   zingchart.exec(params.id, 'addobject', {
    120.     type: 'shape',
    121.     data: shapes
    122.   });
    123.  
    124. }
    125.  
    126. zingchart.render({
    127.   id: 'myChart',
    128.   data: myConfig,
    129.   height: 400,
    130.   width: "100%"
    131. });