• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background-color: #111;
    11.     }
    12.  
    13.     .chart--container {
    14.       width: 100%;
    15.       height: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.  
    20.     #myChart-wrapper {
    21.       margin: auto;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     let chartConfig = {
    37.       theme: 'classic',
    38.       backgroundColor: '#111',
    39.       graphset: [{
    40.         type: 'null',
    41.         backgroundColor: 'none',
    42.         width: '100%',
    43.         height: '100%',
    44.         x: '0px',
    45.         y: '0px',
    46.         widgets: [{
    47.             type: 'dashboard_datetime',
    48.             id: 'dash1',
    49.             backgroundColor1: '#55154D',
    50.             backgroundColor2: '#44043C',
    51.             title: 'NEW YORK',
    52.             width: '230px',
    53.             height: '230px',
    54.             x: '10px',
    55.             y: '13px',
    56.           },
    57.           {
    58.             type: 'dashboard_metric',
    59.             id: 'dash2',
    60.             value: 813.74,
    61.             backgroundColor1: '#67001F',
    62.             backgroundColor2: '#56000E',
    63.             percent: +11.52,
    64.             title: 'VIRAL COEFFICIENT',
    65.             width: '230px',
    66.             height: '230px',
    67.             x: '248px',
    68.             y: '13px',
    69.           },
    70.           {
    71.             type: 'dashboard_accounts',
    72.             id: 'dash3',
    73.             width: '230px',
    74.             height: '230px',
    75.             x: '486px',
    76.             y: '13px',
    77.           },
    78.           {
    79.             type: 'dashboard_metric',
    80.             id: 'dash4',
    81.             value: 83.18,
    82.             backgroundColor1: '#014358',
    83.             backgroundColor2: '#003247',
    84.             percent: -21.27,
    85.             title: 'RETENTION RATE (30 DAYS)',
    86.             width: '230px',
    87.             height: '230px',
    88.             x: '10px',
    89.             y: '255px',
    90.           },
    91.           {
    92.             type: 'dashboard_metric',
    93.             id: 'dash5',
    94.             value: '487.32',
    95.             backgroundColor1: '#264031',
    96.             backgroundColor2: '#22392b',
    97.             percent: 4.37,
    98.             title: 'AVG TIME ON SITE',
    99.             width: '468px',
    100.             height: '230px',
    101.             x: '248px',
    102.             y: '255px',
    103.           }
    104.         ]
    105.       }]
    106.     };
    107.  
    108.     zingchart.widgets.dashboard_container = {
    109.       parse: function(data) {
    110.         let x = parseInt(data.x) || 0;
    111.         let y = parseInt(data.y) || 0;
    112.         let w = parseInt(data.width) || 240;
    113.         let h = parseInt(data.height) || 240;
    114.         let id = data.id || 'dash';
    115.         let backgroundColor1 = data.backgroundColor1 || '#232526';
    116.         let backgroundColor2 = data.backgroundColor2 || '#202122';
    117.  
    118.         let json = {
    119.           labels: [],
    120.           shapes: [{
    121.               type: 'poly',
    122.               backgroundColor: backgroundColor1,
    123.               flat: true,
    124.               points: [
    125.                 [x, y],
    126.                 [x + w + 1, y],
    127.                 [x, y + h + 1]
    128.               ],
    129.               zIndex: -1000
    130.             },
    131.             {
    132.               type: 'poly',
    133.               backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
    134.               fillAngle: 180,
    135.               fillOffsetX: w / 4,
    136.               flat: true,
    137.               points: [
    138.                 [x + w, y + h],
    139.                 [x + w, y],
    140.                 [x, y + h]
    141.               ],
    142.               zIndex: -1000
    143.             }
    144.           ]
    145.         };
    146.         return json;
    147.       }
    148.     };
    149.  
    150.     zingchart.widgets.dashboard_datetime = {
    151.       tinfo: function() {
    152.         let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    153.         let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    154.  
    155.         let date = new Date();
    156.         let hr = date.getHours(),
    157.           min = date.getMinutes(),
    158.           mod = 'AM';
    159.         if (hr > 12) {
    160.           hr -= 12;
    161.           mod = 'PM';
    162.         }
    163.         hr = (hr < 10) ? ('0' + hr) : hr;
    164.         min = (min < 10) ? ('0' + min) : min;
    165.  
    166.         return {
    167.           dow: dow[date.getDay()],
    168.           day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
    169.           time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
    170.         };
    171.       },
    172.       update: function(chartid, snippetid, params) {
    173.         let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    174.         zingchart.exec(chartid, 'updateobject', {
    175.           data: [{
    176.             type: 'label',
    177.             id: snippetid + '_time_sh',
    178.             text: tinfo.time
    179.           }, {
    180.             type: 'label',
    181.             id: snippetid + '_time',
    182.             text: tinfo.time
    183.           }]
    184.         });
    185.       },
    186.       parse: function(data) {
    187.         let x = parseInt(data.x) || 0;
    188.         let y = parseInt(data.y) || 0;
    189.         let w = parseInt(data.width) || 240;
    190.         let h = parseInt(data.height) || 240;
    191.         let id = data.id || 'dash';
    192.         let title = data.title || '';
    193.         let value = data.value || '';
    194.         let percent = data.percent || 0;
    195.  
    196.         let json = zingchart.widgets.dashboard_container.parse(data);
    197.  
    198.         window.setInterval(function() {
    199.           zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
    200.             time: Math.random()
    201.           });
    202.         }, 5000);
    203.  
    204.         let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    205.  
    206.         json.labels.push({
    207.           text: title,
    208.           padding: '8px 8px 8px 28px',
    209.           bold: true,
    210.           color: '#eee',
    211.           flat: true,
    212.           fontSize: '13px',
    213.           textAlign: 'left',
    214.           x: x,
    215.           y: y,
    216.           width: w
    217.         }, {
    218.           id: id + '_time_sh',
    219.           text: tinfo.time,
    220.           padding: '8px 8px 8px 8px',
    221.           color: '#000',
    222.           flat: true,
    223.           fontSize: '55px',
    224.           textAlign: 'left',
    225.           vmlBackgroundImage: '',
    226.           x: x + 2,
    227.           y: y + 34,
    228.           width: w,
    229.           height: '90px'
    230.         }, {
    231.           id: id + '_time',
    232.           text: tinfo.time,
    233.           padding: '8px 8px 8px 8px',
    234.           color: '#eee',
    235.           flat: true,
    236.           fontSize: '55px',
    237.           textAlign: 'left',
    238.           width: w,
    239.           height: '90px',
    240.           x: x,
    241.           y: y + 32,
    242.           zIndex: 1000
    243.         }, {
    244.           text: tinfo.dow,
    245.           padding: '8px 8px 8px 8px',
    246.           color: '#eee',
    247.           flat: true,
    248.           fontSize: '27px',
    249.           textAlign: 'left',
    250.           width: w,
    251.           x: x + 2,
    252.           y: y + 130
    253.         }, {
    254.           text: tinfo.day,
    255.           padding: '8px 8px 8px 8px',
    256.           color: '#eee',
    257.           flat: true,
    258.           fontSize: '27px',
    259.           textAlign: 'left',
    260.           width: w,
    261.           x: x + 2,
    262.           y: y + 164
    263.         });
    264.  
    265.         json.shapes.push({
    266.           type: 'line',
    267.           flat: true,
    268.           lineColor: '#121314',
    269.           lineWidth: '1px',
    270.           points: [
    271.             [x, y + 33],
    272.             [x + w, y + 33]
    273.           ]
    274.         }, {
    275.           type: 'line',
    276.           flat: true,
    277.           lineColor: '#303334',
    278.           lineWidth: '1px',
    279.           points: [
    280.             [x, y + 34],
    281.             [x + w, y + 34]
    282.           ]
    283.         }, {
    284.           type: 'line',
    285.           flat: true,
    286.           lineColor: '#121314',
    287.           lineWidth: '1px',
    288.           points: [
    289.             [x, y + 126],
    290.             [x + w, y + 126]
    291.           ]
    292.         }, {
    293.           type: 'line',
    294.           flat: true,
    295.           lineColor: '#303334',
    296.           lineWidth: '1px',
    297.           points: [
    298.             [x, y + 127],
    299.             [x + w, y + 127]
    300.           ]
    301.         });
    302.  
    303.         return json;
    304.       }
    305.     }
    306.  
    307.     zingchart.widgets.dashboard_metric = {
    308.       percent: function(percent) {
    309.         let ps = (String(Math.abs(percent))).split('.');
    310.         let p1 = ps[0] || '0';
    311.         let p2 = ps[1] || '00';
    312.         return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
    313.       },
    314.       update: function(chartid, snippetid, params) {
    315.         let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
    316.         let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
    317.         zingchart.exec(chartid, 'updateobject', {
    318.           data: [{
    319.             objtype: 'label',
    320.             id: snippetid + '_value_sh',
    321.             text: value
    322.           }, {
    323.             objtype: 'label',
    324.             id: snippetid + '_value',
    325.             text: value
    326.           }, {
    327.             objtype: 'label',
    328.             id: snippetid + '_percent',
    329.             color: (percent > 0) ? '#77AB13' : '#AE432E',
    330.             text: zingchart.widgets.dashboard_metric.percent(percent)
    331.           }, {
    332.             objtype: 'shape',
    333.             id: snippetid + '_trend',
    334.             angle: (percent > 0) ? 0 : 180,
    335.             backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
    336.           }]
    337.         });
    338.       },
    339.       parse: function(data) {
    340.         let x = parseInt(data.x) || 0;
    341.         let y = parseInt(data.y) || 0;
    342.         let w = parseInt(data.width) || 240;
    343.         let h = parseInt(data.height) || 240;
    344.         let id = data.id || 'dash';
    345.         let title = data.title || '';
    346.         let value = data.value || '';
    347.         let percent = data.percent || 0;
    348.  
    349.         let json = zingchart.widgets.dashboard_container.parse(data);
    350.  
    351.         window.setInterval(function() {
    352.           zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
    353.         }, 2000 + parseInt(2000 * Math.random(), 10));
    354.  
    355.         json.labels.push({
    356.           text: title,
    357.           padding: '8px 8px 8px 28px',
    358.           bold: true,
    359.           color: '#eee',
    360.           flat: true,
    361.           fontSize: '13px',
    362.           textAlign: 'left',
    363.           width: w,
    364.           x: x,
    365.           y: y
    366.         }, {
    367.           id: id + '_value_sh',
    368.           text: value,
    369.           color: '#000',
    370.           flat: true,
    371.           fontSize: '55px',
    372.           x: x + 12,
    373.           y: y + 42
    374.         }, {
    375.           id: id + '_value',
    376.           text: value,
    377.           color: '#eee',
    378.           flat: true,
    379.           fontSize: '55px',
    380.           x: x + 10,
    381.           y: y + 40
    382.         }, {
    383.           id: id + '_percent',
    384.           text: zingchart.widgets.dashboard_metric.percent(percent),
    385.           color: (percent > 0) ? '#77AB13' : '#AE432E',
    386.           flat: true,
    387.           fontSize: '47px',
    388.           x: x + 50,
    389.           y: y + 105
    390.         });
    391.  
    392.         json.shapes.push({
    393.           type: 'line',
    394.           flat: true,
    395.           lineColor: '#121314',
    396.           lineWidth: 1,
    397.           points: [
    398.             [x, y + 33],
    399.             [x + w, y + 33]
    400.           ]
    401.         }, {
    402.           type: 'line',
    403.           flat: true,
    404.           lineColor: '#303334',
    405.           lineWidth: 1,
    406.           points: [
    407.             [x, y + 34],
    408.             [x + w, y + 34]
    409.           ]
    410.         }, {
    411.           type: 'circle',
    412.           backgroundColor: '#556D2C #384820',
    413.           fillAngle: 45,
    414.           fillOffsetX: 4,
    415.           fillOffsetY: 4,
    416.           flat: true,
    417.           size: 6,
    418.           x: x + 16,
    419.           y: y + 16
    420.         }, {
    421.           type: 'triangle',
    422.           id: id + '_trend',
    423.           angle: (percent > 0) ? 0 : 180,
    424.           backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
    425.           flat: true,
    426.           shadow: true,
    427.           shadowColor: '#000',
    428.           shadowDistance: 2,
    429.           size: 16,
    430.           x: x + 30,
    431.           y: y + 140
    432.         });
    433.         return json;
    434.       }
    435.     };
    436.  
    437.     zingchart.widgets.dashboard_accounts = {
    438.       update: function(chartid, snippetid, params) {
    439.         zingchart.exec(chartid, 'setseriesvalues', {
    440.           graphid: snippetid + '_graph',
    441.           values: [
    442.             [10 + parseInt(100 * Math.random(), 10)],
    443.             [10 + parseInt(100 * Math.random(), 10)],
    444.             [10 + parseInt(100 * Math.random(), 10)]
    445.           ],
    446.           smart: true
    447.         });
    448.       },
    449.       parse: function(data) {
    450.         let x = parseInt(data.x) || 0;
    451.         let y = parseInt(data.y) || 0;
    452.         let w = parseInt(data.width) || 240;
    453.         let h = parseInt(data.height) || 240;
    454.         let id = data.id || 'dash';
    455.  
    456.         let json = zingchart.widgets.dashboard_container.parse(data);
    457.  
    458.         window.setInterval(function() {
    459.           zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
    460.         }, 5000);
    461.  
    462.         json.graphs = json.graphs || [];
    463.         json.graphs.push({
    464.           type: 'pie',
    465.           id: id + '_graph',
    466.           backgroundColor: 'none',
    467.           width: w,
    468.           height: h,
    469.           x: x,
    470.           y: y,
    471.           title: {
    472.             text: 'Accounts',
    473.             backgroundColor: 'none',
    474.             color: '#fff'
    475.           },
    476.           legend: {
    477.             margin: 'auto auto 10px auto',
    478.             backgroundColor: 'none',
    479.             borderWidth: '0px',
    480.             item: {
    481.               margin: '2px',
    482.               padding: '2px',
    483.               color: '#fff'
    484.             },
    485.             layout: 'float',
    486.             marker: {
    487.               type: 'default',
    488.               borderRadius: '3px',
    489.               borderWidth: '0px',
    490.               width: '15px',
    491.               height: '10px'
    492.             },
    493.             shadow: false,
    494.           },
    495.           plot: {
    496.             _animation: {
    497.               speed: 500,
    498.               method: 'ANIMATION_LINEAR',
    499.               effect: 'ANIMATION_EXPAND_TOP'
    500.             },
    501.             shadow: false,
    502.             valueBox: {
    503.               visible: false
    504.             },
    505.             slice: 20
    506.           },
    507.           plotarea: {
    508.             margin: '10px 10px 40px 10px'
    509.           },
    510.           scale: {
    511.             sizeFactor: 0.65
    512.           },
    513.           series: [{
    514.               text: 'Free',
    515.               values: [103],
    516.               backgroundColor: '#058DC7'
    517.             },
    518.             {
    519.               text: 'Basic',
    520.               values: [37],
    521.               backgroundColor: '#50B432'
    522.             },
    523.             {
    524.               text: 'Premium',
    525.               values: [192],
    526.               backgroundColor: '#EF561A'
    527.             }
    528.           ]
    529.         });
    530.  
    531.         return json;
    532.       }
    533.     };
    534.  
    535.     zingchart.render({
    536.       id: 'myChart',
    537.       data: chartConfig,
    538.       height: 500,
    539.       width: 725
    540.     });
    541.   </script>
    542. </body>
    543.  
    544. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. .zc-body {
    2.   background-color: #111;
    3. }
    4.  
    5. .chart--container {
    6.   width: 100%;
    7.   height: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11.  
    12. #myChart-wrapper {
    13.   margin: auto;
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    1. let chartConfig = {
    2.   theme: 'classic',
    3.   backgroundColor: '#111',
    4.   graphset: [{
    5.     type: 'null',
    6.     backgroundColor: 'none',
    7.     width: '100%',
    8.     height: '100%',
    9.     x: '0px',
    10.     y: '0px',
    11.     widgets: [{
    12.         type: 'dashboard_datetime',
    13.         id: 'dash1',
    14.         backgroundColor1: '#55154D',
    15.         backgroundColor2: '#44043C',
    16.         title: 'NEW YORK',
    17.         width: '230px',
    18.         height: '230px',
    19.         x: '10px',
    20.         y: '13px',
    21.       },
    22.       {
    23.         type: 'dashboard_metric',
    24.         id: 'dash2',
    25.         value: 813.74,
    26.         backgroundColor1: '#67001F',
    27.         backgroundColor2: '#56000E',
    28.         percent: +11.52,
    29.         title: 'VIRAL COEFFICIENT',
    30.         width: '230px',
    31.         height: '230px',
    32.         x: '248px',
    33.         y: '13px',
    34.       },
    35.       {
    36.         type: 'dashboard_accounts',
    37.         id: 'dash3',
    38.         width: '230px',
    39.         height: '230px',
    40.         x: '486px',
    41.         y: '13px',
    42.       },
    43.       {
    44.         type: 'dashboard_metric',
    45.         id: 'dash4',
    46.         value: 83.18,
    47.         backgroundColor1: '#014358',
    48.         backgroundColor2: '#003247',
    49.         percent: -21.27,
    50.         title: 'RETENTION RATE (30 DAYS)',
    51.         width: '230px',
    52.         height: '230px',
    53.         x: '10px',
    54.         y: '255px',
    55.       },
    56.       {
    57.         type: 'dashboard_metric',
    58.         id: 'dash5',
    59.         value: '487.32',
    60.         backgroundColor1: '#264031',
    61.         backgroundColor2: '#22392b',
    62.         percent: 4.37,
    63.         title: 'AVG TIME ON SITE',
    64.         width: '468px',
    65.         height: '230px',
    66.         x: '248px',
    67.         y: '255px',
    68.       }
    69.     ]
    70.   }]
    71. };
    72.  
    73. zingchart.widgets.dashboard_container = {
    74.   parse: function(data) {
    75.     let x = parseInt(data.x) || 0;
    76.     let y = parseInt(data.y) || 0;
    77.     let w = parseInt(data.width) || 240;
    78.     let h = parseInt(data.height) || 240;
    79.     let id = data.id || 'dash';
    80.     let backgroundColor1 = data.backgroundColor1 || '#232526';
    81.     let backgroundColor2 = data.backgroundColor2 || '#202122';
    82.  
    83.     let json = {
    84.       labels: [],
    85.       shapes: [{
    86.           type: 'poly',
    87.           backgroundColor: backgroundColor1,
    88.           flat: true,
    89.           points: [
    90.             [x, y],
    91.             [x + w + 1, y],
    92.             [x, y + h + 1]
    93.           ],
    94.           zIndex: -1000
    95.         },
    96.         {
    97.           type: 'poly',
    98.           backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
    99.           fillAngle: 180,
    100.           fillOffsetX: w / 4,
    101.           flat: true,
    102.           points: [
    103.             [x + w, y + h],
    104.             [x + w, y],
    105.             [x, y + h]
    106.           ],
    107.           zIndex: -1000
    108.         }
    109.       ]
    110.     };
    111.     return json;
    112.   }
    113. };
    114.  
    115. zingchart.widgets.dashboard_datetime = {
    116.   tinfo: function() {
    117.     let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    118.     let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    119.  
    120.     let date = new Date();
    121.     let hr = date.getHours(),
    122.       min = date.getMinutes(),
    123.       mod = 'AM';
    124.     if (hr > 12) {
    125.       hr -= 12;
    126.       mod = 'PM';
    127.     }
    128.     hr = (hr < 10) ? ('0' + hr) : hr;
    129.     min = (min < 10) ? ('0' + min) : min;
    130.  
    131.     return {
    132.       dow: dow[date.getDay()],
    133.       day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
    134.       time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
    135.     };
    136.   },
    137.   update: function(chartid, snippetid, params) {
    138.     let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    139.     zingchart.exec(chartid, 'updateobject', {
    140.       data: [{
    141.         type: 'label',
    142.         id: snippetid + '_time_sh',
    143.         text: tinfo.time
    144.       }, {
    145.         type: 'label',
    146.         id: snippetid + '_time',
    147.         text: tinfo.time
    148.       }]
    149.     });
    150.   },
    151.   parse: function(data) {
    152.     let x = parseInt(data.x) || 0;
    153.     let y = parseInt(data.y) || 0;
    154.     let w = parseInt(data.width) || 240;
    155.     let h = parseInt(data.height) || 240;
    156.     let id = data.id || 'dash';
    157.     let title = data.title || '';
    158.     let value = data.value || '';
    159.     let percent = data.percent || 0;
    160.  
    161.     let json = zingchart.widgets.dashboard_container.parse(data);
    162.  
    163.     window.setInterval(function() {
    164.       zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
    165.         time: Math.random()
    166.       });
    167.     }, 5000);
    168.  
    169.     let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    170.  
    171.     json.labels.push({
    172.       text: title,
    173.       padding: '8px 8px 8px 28px',
    174.       bold: true,
    175.       color: '#eee',
    176.       flat: true,
    177.       fontSize: '13px',
    178.       textAlign: 'left',
    179.       x: x,
    180.       y: y,
    181.       width: w
    182.     }, {
    183.       id: id + '_time_sh',
    184.       text: tinfo.time,
    185.       padding: '8px 8px 8px 8px',
    186.       color: '#000',
    187.       flat: true,
    188.       fontSize: '55px',
    189.       textAlign: 'left',
    190.       vmlBackgroundImage: '',
    191.       x: x + 2,
    192.       y: y + 34,
    193.       width: w,
    194.       height: '90px'
    195.     }, {
    196.       id: id + '_time',
    197.       text: tinfo.time,
    198.       padding: '8px 8px 8px 8px',
    199.       color: '#eee',
    200.       flat: true,
    201.       fontSize: '55px',
    202.       textAlign: 'left',
    203.       width: w,
    204.       height: '90px',
    205.       x: x,
    206.       y: y + 32,
    207.       zIndex: 1000
    208.     }, {
    209.       text: tinfo.dow,
    210.       padding: '8px 8px 8px 8px',
    211.       color: '#eee',
    212.       flat: true,
    213.       fontSize: '27px',
    214.       textAlign: 'left',
    215.       width: w,
    216.       x: x + 2,
    217.       y: y + 130
    218.     }, {
    219.       text: tinfo.day,
    220.       padding: '8px 8px 8px 8px',
    221.       color: '#eee',
    222.       flat: true,
    223.       fontSize: '27px',
    224.       textAlign: 'left',
    225.       width: w,
    226.       x: x + 2,
    227.       y: y + 164
    228.     });
    229.  
    230.     json.shapes.push({
    231.       type: 'line',
    232.       flat: true,
    233.       lineColor: '#121314',
    234.       lineWidth: '1px',
    235.       points: [
    236.         [x, y + 33],
    237.         [x + w, y + 33]
    238.       ]
    239.     }, {
    240.       type: 'line',
    241.       flat: true,
    242.       lineColor: '#303334',
    243.       lineWidth: '1px',
    244.       points: [
    245.         [x, y + 34],
    246.         [x + w, y + 34]
    247.       ]
    248.     }, {
    249.       type: 'line',
    250.       flat: true,
    251.       lineColor: '#121314',
    252.       lineWidth: '1px',
    253.       points: [
    254.         [x, y + 126],
    255.         [x + w, y + 126]
    256.       ]
    257.     }, {
    258.       type: 'line',
    259.       flat: true,
    260.       lineColor: '#303334',
    261.       lineWidth: '1px',
    262.       points: [
    263.         [x, y + 127],
    264.         [x + w, y + 127]
    265.       ]
    266.     });
    267.  
    268.     return json;
    269.   }
    270. }
    271.  
    272. zingchart.widgets.dashboard_metric = {
    273.   percent: function(percent) {
    274.     let ps = (String(Math.abs(percent))).split('.');
    275.     let p1 = ps[0] || '0';
    276.     let p2 = ps[1] || '00';
    277.     return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
    278.   },
    279.   update: function(chartid, snippetid, params) {
    280.     let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
    281.     let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
    282.     zingchart.exec(chartid, 'updateobject', {
    283.       data: [{
    284.         objtype: 'label',
    285.         id: snippetid + '_value_sh',
    286.         text: value
    287.       }, {
    288.         objtype: 'label',
    289.         id: snippetid + '_value',
    290.         text: value
    291.       }, {
    292.         objtype: 'label',
    293.         id: snippetid + '_percent',
    294.         color: (percent > 0) ? '#77AB13' : '#AE432E',
    295.         text: zingchart.widgets.dashboard_metric.percent(percent)
    296.       }, {
    297.         objtype: 'shape',
    298.         id: snippetid + '_trend',
    299.         angle: (percent > 0) ? 0 : 180,
    300.         backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
    301.       }]
    302.     });
    303.   },
    304.   parse: function(data) {
    305.     let x = parseInt(data.x) || 0;
    306.     let y = parseInt(data.y) || 0;
    307.     let w = parseInt(data.width) || 240;
    308.     let h = parseInt(data.height) || 240;
    309.     let id = data.id || 'dash';
    310.     let title = data.title || '';
    311.     let value = data.value || '';
    312.     let percent = data.percent || 0;
    313.  
    314.     let json = zingchart.widgets.dashboard_container.parse(data);
    315.  
    316.     window.setInterval(function() {
    317.       zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
    318.     }, 2000 + parseInt(2000 * Math.random(), 10));
    319.  
    320.     json.labels.push({
    321.       text: title,
    322.       padding: '8px 8px 8px 28px',
    323.       bold: true,
    324.       color: '#eee',
    325.       flat: true,
    326.       fontSize: '13px',
    327.       textAlign: 'left',
    328.       width: w,
    329.       x: x,
    330.       y: y
    331.     }, {
    332.       id: id + '_value_sh',
    333.       text: value,
    334.       color: '#000',
    335.       flat: true,
    336.       fontSize: '55px',
    337.       x: x + 12,
    338.       y: y + 42
    339.     }, {
    340.       id: id + '_value',
    341.       text: value,
    342.       color: '#eee',
    343.       flat: true,
    344.       fontSize: '55px',
    345.       x: x + 10,
    346.       y: y + 40
    347.     }, {
    348.       id: id + '_percent',
    349.       text: zingchart.widgets.dashboard_metric.percent(percent),
    350.       color: (percent > 0) ? '#77AB13' : '#AE432E',
    351.       flat: true,
    352.       fontSize: '47px',
    353.       x: x + 50,
    354.       y: y + 105
    355.     });
    356.  
    357.     json.shapes.push({
    358.       type: 'line',
    359.       flat: true,
    360.       lineColor: '#121314',
    361.       lineWidth: 1,
    362.       points: [
    363.         [x, y + 33],
    364.         [x + w, y + 33]
    365.       ]
    366.     }, {
    367.       type: 'line',
    368.       flat: true,
    369.       lineColor: '#303334',
    370.       lineWidth: 1,
    371.       points: [
    372.         [x, y + 34],
    373.         [x + w, y + 34]
    374.       ]
    375.     }, {
    376.       type: 'circle',
    377.       backgroundColor: '#556D2C #384820',
    378.       fillAngle: 45,
    379.       fillOffsetX: 4,
    380.       fillOffsetY: 4,
    381.       flat: true,
    382.       size: 6,
    383.       x: x + 16,
    384.       y: y + 16
    385.     }, {
    386.       type: 'triangle',
    387.       id: id + '_trend',
    388.       angle: (percent > 0) ? 0 : 180,
    389.       backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
    390.       flat: true,
    391.       shadow: true,
    392.       shadowColor: '#000',
    393.       shadowDistance: 2,
    394.       size: 16,
    395.       x: x + 30,
    396.       y: y + 140
    397.     });
    398.     return json;
    399.   }
    400. };
    401.  
    402. zingchart.widgets.dashboard_accounts = {
    403.   update: function(chartid, snippetid, params) {
    404.     zingchart.exec(chartid, 'setseriesvalues', {
    405.       graphid: snippetid + '_graph',
    406.       values: [
    407.         [10 + parseInt(100 * Math.random(), 10)],
    408.         [10 + parseInt(100 * Math.random(), 10)],
    409.         [10 + parseInt(100 * Math.random(), 10)]
    410.       ],
    411.       smart: true
    412.     });
    413.   },
    414.   parse: function(data) {
    415.     let x = parseInt(data.x) || 0;
    416.     let y = parseInt(data.y) || 0;
    417.     let w = parseInt(data.width) || 240;
    418.     let h = parseInt(data.height) || 240;
    419.     let id = data.id || 'dash';
    420.  
    421.     let json = zingchart.widgets.dashboard_container.parse(data);
    422.  
    423.     window.setInterval(function() {
    424.       zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
    425.     }, 5000);
    426.  
    427.     json.graphs = json.graphs || [];
    428.     json.graphs.push({
    429.       type: 'pie',
    430.       id: id + '_graph',
    431.       backgroundColor: 'none',
    432.       width: w,
    433.       height: h,
    434.       x: x,
    435.       y: y,
    436.       title: {
    437.         text: 'Accounts',
    438.         backgroundColor: 'none',
    439.         color: '#fff'
    440.       },
    441.       legend: {
    442.         margin: 'auto auto 10px auto',
    443.         backgroundColor: 'none',
    444.         borderWidth: '0px',
    445.         item: {
    446.           margin: '2px',
    447.           padding: '2px',
    448.           color: '#fff'
    449.         },
    450.         layout: 'float',
    451.         marker: {
    452.           type: 'default',
    453.           borderRadius: '3px',
    454.           borderWidth: '0px',
    455.           width: '15px',
    456.           height: '10px'
    457.         },
    458.         shadow: false,
    459.       },
    460.       plot: {
    461.         _animation: {
    462.           speed: 500,
    463.           method: 'ANIMATION_LINEAR',
    464.           effect: 'ANIMATION_EXPAND_TOP'
    465.         },
    466.         shadow: false,
    467.         valueBox: {
    468.           visible: false
    469.         },
    470.         slice: 20
    471.       },
    472.       plotarea: {
    473.         margin: '10px 10px 40px 10px'
    474.       },
    475.       scale: {
    476.         sizeFactor: 0.65
    477.       },
    478.       series: [{
    479.           text: 'Free',
    480.           values: [103],
    481.           backgroundColor: '#058DC7'
    482.         },
    483.         {
    484.           text: 'Basic',
    485.           values: [37],
    486.           backgroundColor: '#50B432'
    487.         },
    488.         {
    489.           text: 'Premium',
    490.           values: [192],
    491.           backgroundColor: '#EF561A'
    492.         }
    493.       ]
    494.     });
    495.  
    496.     return json;
    497.   }
    498. };
    499.  
    500. zingchart.render({
    501.   id: 'myChart',
    502.   data: chartConfig,
    503.   height: 500,
    504.   width: 725
    505. });