• 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 {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
    
            #myChart-wrapper {
                margin: auto;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 500px;
            }
        </style>
    </head>
    
    <body>
        <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"];
            let chartConfig = {
                theme: 'classic',
                backgroundColor: '#111',
                graphset: [{
                    type: 'null',
                    backgroundColor: 'none',
                    width: '100%',
                    height: '100%',
                    x: '0px',
                    y: '0px',
                    widgets: [{
                            type: 'dashboard_datetime',
                            id: 'dash1',
                            backgroundColor1: '#55154D',
                            backgroundColor2: '#44043C',
                            title: 'NEW YORK',
                            width: '230px',
                            height: '230px',
                            x: '10px',
                            y: '13px',
                        },
                        {
                            type: 'dashboard_metric',
                            id: 'dash2',
                            value: 813.74,
                            backgroundColor1: '#67001F',
                            backgroundColor2: '#56000E',
                            percent: +11.52,
                            title: 'VIRAL COEFFICIENT',
                            width: '230px',
                            height: '230px',
                            x: '248px',
                            y: '13px',
                        },
                        {
                            type: 'dashboard_accounts',
                            id: 'dash3',
                            width: '230px',
                            height: '230px',
                            x: '486px',
                            y: '13px',
                        },
                        {
                            type: 'dashboard_metric',
                            id: 'dash4',
                            value: 83.18,
                            backgroundColor1: '#014358',
                            backgroundColor2: '#003247',
                            percent: -21.27,
                            title: 'RETENTION RATE (30 DAYS)',
                            width: '230px',
                            height: '230px',
                            x: '10px',
                            y: '255px',
                        },
                        {
                            type: 'dashboard_metric',
                            id: 'dash5',
                            value: '487.32',
                            backgroundColor1: '#264031',
                            backgroundColor2: '#22392b',
                            percent: 4.37,
                            title: 'AVG TIME ON SITE',
                            width: '468px',
                            height: '230px',
                            x: '248px',
                            y: '255px',
                        }
                    ]
                }]
            };
    
            zingchart.widgets.dashboard_container = {
                parse: function(data) {
                    let x = parseInt(data.x) || 0;
                    let y = parseInt(data.y) || 0;
                    let w = parseInt(data.width) || 240;
                    let h = parseInt(data.height) || 240;
                    let id = data.id || 'dash';
                    let backgroundColor1 = data.backgroundColor1 || '#232526';
                    let backgroundColor2 = data.backgroundColor2 || '#202122';
    
                    let json = {
                        labels: [],
                        shapes: [{
                                type: 'poly',
                                backgroundColor: backgroundColor1,
                                flat: true,
                                points: [
                                    [x, y],
                                    [x + w + 1, y],
                                    [x, y + h + 1]
                                ],
                                zIndex: -1000
                            },
                            {
                                type: 'poly',
                                backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
                                fillAngle: 180,
                                fillOffsetX: w / 4,
                                flat: true,
                                points: [
                                    [x + w, y + h],
                                    [x + w, y],
                                    [x, y + h]
                                ],
                                zIndex: -1000
                            }
                        ]
                    };
                    return json;
                }
            };
    
            zingchart.widgets.dashboard_datetime = {
                tinfo: function() {
                    let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                    let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
                    let date = new Date();
                    let hr = date.getHours(),
                        min = date.getMinutes(),
                        mod = 'AM';
                    if (hr > 12) {
                        hr -= 12;
                        mod = 'PM';
                    }
                    hr = (hr < 10) ? ('0' + hr) : hr;
                    min = (min < 10) ? ('0' + min) : min;
    
                    return {
                        dow: dow[date.getDay()],
                        day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
                        time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
                    };
                },
                update: function(chartid, snippetid, params) {
                    let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
                    zingchart.exec(chartid, 'updateobject', {
                        data: [{
                            type: 'label',
                            id: snippetid + '_time_sh',
                            text: tinfo.time
                        }, {
                            type: 'label',
                            id: snippetid + '_time',
                            text: tinfo.time
                        }]
                    });
                },
                parse: function(data) {
                    let x = parseInt(data.x) || 0;
                    let y = parseInt(data.y) || 0;
                    let w = parseInt(data.width) || 240;
                    let h = parseInt(data.height) || 240;
                    let id = data.id || 'dash';
                    let title = data.title || '';
                    let value = data.value || '';
                    let percent = data.percent || 0;
    
                    let json = zingchart.widgets.dashboard_container.parse(data);
    
                    window.setInterval(function() {
                        zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
                            time: Math.random()
                        });
                    }, 5000);
    
                    let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    
                    json.labels.push({
                        text: title,
                        padding: '8px 8px 8px 28px',
                        bold: true,
                        color: '#eee',
                        flat: true,
                        fontSize: '13px',
                        textAlign: 'left',
                        x: x,
                        y: y,
                        width: w
                    }, {
                        id: id + '_time_sh',
                        text: tinfo.time,
                        padding: '8px 8px 8px 8px',
                        color: '#000',
                        flat: true,
                        fontSize: '55px',
                        textAlign: 'left',
                        vmlBackgroundImage: '',
                        x: x + 2,
                        y: y + 34,
                        width: w,
                        height: '90px'
                    }, {
                        id: id + '_time',
                        text: tinfo.time,
                        padding: '8px 8px 8px 8px',
                        color: '#eee',
                        flat: true,
                        fontSize: '55px',
                        textAlign: 'left',
                        width: w,
                        height: '90px',
                        x: x,
                        y: y + 32,
                        zIndex: 1000
                    }, {
                        text: tinfo.dow,
                        padding: '8px 8px 8px 8px',
                        color: '#eee',
                        flat: true,
                        fontSize: '27px',
                        textAlign: 'left',
                        width: w,
                        x: x + 2,
                        y: y + 130
                    }, {
                        text: tinfo.day,
                        padding: '8px 8px 8px 8px',
                        color: '#eee',
                        flat: true,
                        fontSize: '27px',
                        textAlign: 'left',
                        width: w,
                        x: x + 2,
                        y: y + 164
                    });
    
                    json.shapes.push({
                        type: 'line',
                        flat: true,
                        lineColor: '#121314',
                        lineWidth: '1px',
                        points: [
                            [x, y + 33],
                            [x + w, y + 33]
                        ]
                    }, {
                        type: 'line',
                        flat: true,
                        lineColor: '#303334',
                        lineWidth: '1px',
                        points: [
                            [x, y + 34],
                            [x + w, y + 34]
                        ]
                    }, {
                        type: 'line',
                        flat: true,
                        lineColor: '#121314',
                        lineWidth: '1px',
                        points: [
                            [x, y + 126],
                            [x + w, y + 126]
                        ]
                    }, {
                        type: 'line',
                        flat: true,
                        lineColor: '#303334',
                        lineWidth: '1px',
                        points: [
                            [x, y + 127],
                            [x + w, y + 127]
                        ]
                    });
    
                    return json;
                }
            }
    
            zingchart.widgets.dashboard_metric = {
                percent: function(percent) {
                    let ps = (String(Math.abs(percent))).split('.');
                    let p1 = ps[0] || '0';
                    let p2 = ps[1] || '00';
                    return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
                },
                update: function(chartid, snippetid, params) {
                    let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
                    let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
                    zingchart.exec(chartid, 'updateobject', {
                        data: [{
                            objtype: 'label',
                            id: snippetid + '_value_sh',
                            text: value
                        }, {
                            objtype: 'label',
                            id: snippetid + '_value',
                            text: value
                        }, {
                            objtype: 'label',
                            id: snippetid + '_percent',
                            color: (percent > 0) ? '#77AB13' : '#AE432E',
                            text: zingchart.widgets.dashboard_metric.percent(percent)
                        }, {
                            objtype: 'shape',
                            id: snippetid + '_trend',
                            angle: (percent > 0) ? 0 : 180,
                            backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
                        }]
                    });
                },
                parse: function(data) {
                    let x = parseInt(data.x) || 0;
                    let y = parseInt(data.y) || 0;
                    let w = parseInt(data.width) || 240;
                    let h = parseInt(data.height) || 240;
                    let id = data.id || 'dash';
                    let title = data.title || '';
                    let value = data.value || '';
                    let percent = data.percent || 0;
    
                    let json = zingchart.widgets.dashboard_container.parse(data);
    
                    window.setInterval(function() {
                        zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
                    }, 2000 + parseInt(2000 * Math.random(), 10));
    
                    json.labels.push({
                        text: title,
                        padding: '8px 8px 8px 28px',
                        bold: true,
                        color: '#eee',
                        flat: true,
                        fontSize: '13px',
                        textAlign: 'left',
                        width: w,
                        x: x,
                        y: y
                    }, {
                        id: id + '_value_sh',
                        text: value,
                        color: '#000',
                        flat: true,
                        fontSize: '55px',
                        x: x + 12,
                        y: y + 42
                    }, {
                        id: id + '_value',
                        text: value,
                        color: '#eee',
                        flat: true,
                        fontSize: '55px',
                        x: x + 10,
                        y: y + 40
                    }, {
                        id: id + '_percent',
                        text: zingchart.widgets.dashboard_metric.percent(percent),
                        color: (percent > 0) ? '#77AB13' : '#AE432E',
                        flat: true,
                        fontSize: '47px',
                        x: x + 50,
                        y: y + 105
                    });
    
                    json.shapes.push({
                        type: 'line',
                        flat: true,
                        lineColor: '#121314',
                        lineWidth: 1,
                        points: [
                            [x, y + 33],
                            [x + w, y + 33]
                        ]
                    }, {
                        type: 'line',
                        flat: true,
                        lineColor: '#303334',
                        lineWidth: 1,
                        points: [
                            [x, y + 34],
                            [x + w, y + 34]
                        ]
                    }, {
                        type: 'circle',
                        backgroundColor: '#556D2C #384820',
                        fillAngle: 45,
                        fillOffsetX: 4,
                        fillOffsetY: 4,
                        flat: true,
                        size: 6,
                        x: x + 16,
                        y: y + 16
                    }, {
                        type: 'triangle',
                        id: id + '_trend',
                        angle: (percent > 0) ? 0 : 180,
                        backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
                        flat: true,
                        shadow: true,
                        shadowColor: '#000',
                        shadowDistance: 2,
                        size: 16,
                        x: x + 30,
                        y: y + 140
                    });
                    return json;
                }
            };
    
            zingchart.widgets.dashboard_accounts = {
                update: function(chartid, snippetid, params) {
                    zingchart.exec(chartid, 'setseriesvalues', {
                        graphid: snippetid + '_graph',
                        values: [
                            [10 + parseInt(100 * Math.random(), 10)],
                            [10 + parseInt(100 * Math.random(), 10)],
                            [10 + parseInt(100 * Math.random(), 10)]
                        ],
                        smart: true
                    });
                },
                parse: function(data) {
                    let x = parseInt(data.x) || 0;
                    let y = parseInt(data.y) || 0;
                    let w = parseInt(data.width) || 240;
                    let h = parseInt(data.height) || 240;
                    let id = data.id || 'dash';
    
                    let json = zingchart.widgets.dashboard_container.parse(data);
    
                    window.setInterval(function() {
                        zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
                    }, 5000);
    
                    json.graphs = json.graphs || [];
                    json.graphs.push({
                        type: 'pie',
                        id: id + '_graph',
                        backgroundColor: 'none',
                        width: w,
                        height: h,
                        x: x,
                        y: y,
                        title: {
                            text: 'Accounts',
                            backgroundColor: 'none',
                            color: '#fff'
                        },
                        legend: {
                            margin: 'auto auto 10px auto',
                            backgroundColor: 'none',
                            borderWidth: '0px',
                            item: {
                                margin: '2px',
                                padding: '2px',
                                color: '#fff'
                            },
                            layout: 'float',
                            marker: {
                                type: 'default',
                                borderRadius: '3px',
                                borderWidth: '0px',
                                width: '15px',
                                height: '10px'
                            },
                            shadow: false,
                        },
                        plot: {
                            _animation: {
                                speed: 500,
                                method: 'ANIMATION_LINEAR',
                                effect: 'ANIMATION_EXPAND_TOP'
                            },
                            shadow: false,
                            valueBox: {
                                visible: false
                            },
                            slice: 20
                        },
                        plotarea: {
                            margin: '10px 10px 40px 10px'
                        },
                        scale: {
                            sizeFactor: 0.65
                        },
                        series: [{
                                text: 'Free',
                                values: [103],
                                backgroundColor: '#058DC7'
                            },
                            {
                                text: 'Basic',
                                values: [37],
                                backgroundColor: '#50B432'
                            },
                            {
                                text: 'Premium',
                                values: [192],
                                backgroundColor: '#EF561A'
                            }
                        ]
                    });
    
                    return json;
                }
            };
    
            zingchart.render({
                id: 'myChart',
                data: chartConfig,
                height: 500,
                width: 725
            });
        </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="myChart" class="chart--container">
    			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    		</div>
    	</body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    
    #myChart-wrapper {
      margin: auto;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      theme: 'classic',
      backgroundColor: '#111',
      graphset: [
        {
          type: 'null',
          backgroundColor: 'none',
          width: '100%',
          height: '100%',
          x: '0px',
          y: '0px',
          widgets: [
            {
              type: 'dashboard_datetime',
              id: 'dash1',
              backgroundColor1: '#55154D',
              backgroundColor2: '#44043C',
              title: 'NEW YORK',
              width: '230px',
              height: '230px',
              x: '10px',
              y: '13px',
            },
            {
              type: 'dashboard_metric',
              id: 'dash2',
              value: 813.74,
              backgroundColor1: '#67001F',
              backgroundColor2: '#56000E',
              percent: +11.52,
              title: 'VIRAL COEFFICIENT',
              width: '230px',
              height: '230px',
              x: '248px',
              y: '13px',
            },
            {
              type: 'dashboard_accounts',
              id: 'dash3',
              width: '230px',
              height: '230px',
              x: '486px',
              y: '13px',
            },
            {
              type: 'dashboard_metric',
              id: 'dash4',
              value: 83.18,
              backgroundColor1: '#014358',
              backgroundColor2: '#003247',
              percent: -21.27,
              title: 'RETENTION RATE (30 DAYS)',
              width: '230px',
              height: '230px',
              x: '10px',
              y: '255px',
            },
            {
              type: 'dashboard_metric',
              id: 'dash5',
              value: '487.32',
              backgroundColor1: '#264031',
              backgroundColor2: '#22392b',
              percent: 4.37,
              title: 'AVG TIME ON SITE',
              width: '468px',
              height: '230px',
              x: '248px',
              y: '255px',
            }
          ]
        }
      ]
    };
    
    zingchart.widgets.dashboard_container = {
      parse: function (data) {
        let x = parseInt(data.x) || 0;
        let y = parseInt(data.y) || 0;
        let w = parseInt(data.width) || 240;
        let h = parseInt(data.height) || 240;
        let id = data.id || 'dash';
        let backgroundColor1 = data.backgroundColor1 || '#232526';
        let backgroundColor2 = data.backgroundColor2 || '#202122';
    
        let json = {
          labels: [],
          shapes: [
            {
              type: 'poly',
              backgroundColor: backgroundColor1,
              flat: true,
              points: [[x, y], [x + w + 1, y], [x, y + h + 1]],
              zIndex: -1000
            },
            {
              type: 'poly',
              backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
              fillAngle: 180,
              fillOffsetX: w / 4,
              flat: true,
              points: [[x + w, y + h], [x + w, y], [x, y + h]],
              zIndex: -1000
            }
          ]
        };
        return json;
      }
    };
    
    zingchart.widgets.dashboard_datetime = {
      tinfo: function () {
        let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
        let date = new Date();
        let hr = date.getHours(), min = date.getMinutes(), mod = 'AM';
        if (hr > 12) {
          hr -= 12;
          mod = 'PM';
        }
        hr = (hr < 10) ? ('0' + hr) : hr;
        min = (min < 10) ? ('0' + min) : min;
    
        return {
          dow: dow[date.getDay()],
          day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
          time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
        };
      },
      update: function (chartid, snippetid, params) {
        let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
        zingchart.exec(chartid, 'updateobject', {
          data: [
            {
              type: 'label',
              id: snippetid + '_time_sh',
              text: tinfo.time
            }, {
              type: 'label',
              id: snippetid + '_time',
              text: tinfo.time
            }
          ]
        });
      },
      parse: function (data) {
        let x = parseInt(data.x) || 0;
        let y = parseInt(data.y) || 0;
        let w = parseInt(data.width) || 240;
        let h = parseInt(data.height) || 240;
        let id = data.id || 'dash';
        let title = data.title || '';
        let value = data.value || '';
        let percent = data.percent || 0;
    
        let json = zingchart.widgets.dashboard_container.parse(data);
    
        window.setInterval(function () {
          zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
            time: Math.random()
          });
        }, 5000);
    
        let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
    
        json.labels.push(
          {
            text: title,
            padding: '8px 8px 8px 28px',
            bold: true,
            color: '#eee',
            flat: true,
            fontSize: '13px',
            textAlign: 'left',
            x: x,
            y: y,
            width: w
          },
          {
            id: id + '_time_sh',
            text: tinfo.time,
            padding: '8px 8px 8px 8px',
            color: '#000',
            flat: true,
            fontSize: '55px',
            textAlign: 'left',
            vmlBackgroundImage: '',
            x: x + 2,
            y: y + 34,
            width: w,
            height: '90px'
          },
          {
            id: id + '_time',
            text: tinfo.time,
            padding: '8px 8px 8px 8px',
            color: '#eee',
            flat: true,
            fontSize: '55px',
            textAlign: 'left',
            width: w,
            height: '90px',
            x: x,
            y: y + 32,
            zIndex: 1000
          },
          {
            text: tinfo.dow,
            padding: '8px 8px 8px 8px',
            color: '#eee',
            flat: true,
            fontSize: '27px',
            textAlign: 'left',
            width: w,
            x: x + 2,
            y: y + 130
          },
          {
            text: tinfo.day,
            padding: '8px 8px 8px 8px',
            color: '#eee',
            flat: true,
            fontSize: '27px',
            textAlign: 'left',
            width: w,
            x: x + 2,
            y: y + 164
          }
        );
    
        json.shapes.push(
          {
            type: 'line',
            flat: true,
            lineColor: '#121314',
            lineWidth: '1px',
            points: [[x, y + 33], [x + w, y + 33]]
          },
          {
            type: 'line',
            flat: true,
            lineColor: '#303334',
            lineWidth: '1px',
            points: [[x, y + 34], [x + w, y + 34]]
          },
          {
            type: 'line',
            flat: true,
            lineColor: '#121314',
            lineWidth: '1px',
            points: [[x, y + 126], [x + w, y + 126]]
          },
          {
            type: 'line',
            flat: true,
            lineColor: '#303334',
            lineWidth: '1px',
            points: [[x, y + 127], [x + w, y + 127]]
          }
        );
    
        return json;
      }
    }
    
    zingchart.widgets.dashboard_metric = {
      percent: function (percent) {
        let ps = (String(Math.abs(percent))).split('.');
        let p1 = ps[0] || '0';
        let p2 = ps[1] || '00';
        return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
      },
      update: function (chartid, snippetid, params) {
        let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
        let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
        zingchart.exec(chartid, 'updateobject', {
          data: [
            {
              objtype: 'label',
              id: snippetid + '_value_sh',
              text: value
            }, {
              objtype: 'label',
              id: snippetid + '_value',
              text: value
            }, {
              objtype: 'label',
              id: snippetid + '_percent',
              color: (percent > 0) ? '#77AB13' : '#AE432E',
              text: zingchart.widgets.dashboard_metric.percent(percent)
            }, {
              objtype: 'shape',
              id: snippetid + '_trend',
              angle: (percent > 0) ? 0 : 180,
              backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
            }
          ]
        });
      },
      parse: function (data) {
        let x = parseInt(data.x) || 0;
        let y = parseInt(data.y) || 0;
        let w = parseInt(data.width) || 240;
        let h = parseInt(data.height) || 240;
        let id = data.id || 'dash';
        let title = data.title || '';
        let value = data.value || '';
        let percent = data.percent || 0;
    
        let json = zingchart.widgets.dashboard_container.parse(data);
    
        window.setInterval(function () {
          zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
        }, 2000 + parseInt(2000 * Math.random(), 10));
    
        json.labels.push(
          {
            text: title,
            padding: '8px 8px 8px 28px',
            bold: true,
            color: '#eee',
            flat: true,
            fontSize: '13px',
            textAlign: 'left',
            width: w,
            x: x,
            y: y
          },
          {
            id: id + '_value_sh',
            text: value,
            color: '#000',
            flat: true,
            fontSize: '55px',
            x: x + 12,
            y: y + 42
          },
          {
            id: id + '_value',
            text: value,
            color: '#eee',
            flat: true,
            fontSize: '55px',
            x: x + 10,
            y: y + 40
          },
          {
            id: id + '_percent',
            text: zingchart.widgets.dashboard_metric.percent(percent),
            color: (percent > 0) ? '#77AB13' : '#AE432E',
            flat: true,
            fontSize: '47px',
            x: x + 50,
            y: y + 105
          }
        );
    
        json.shapes.push(
          {
            type: 'line',
            flat: true,
            lineColor: '#121314',
            lineWidth: 1,
            points: [[x, y + 33], [x + w, y + 33]]
          },
          {
            type: 'line',
            flat: true,
            lineColor: '#303334',
            lineWidth: 1,
            points: [[x, y + 34], [x + w, y + 34]]
          },
          {
            type: 'circle',
            backgroundColor: '#556D2C #384820',
            fillAngle: 45,
            fillOffsetX: 4,
            fillOffsetY: 4,
            flat: true,
            size: 6,
            x: x + 16,
            y: y + 16
          },
          {
            type: 'triangle',
            id: id + '_trend',
            angle: (percent > 0) ? 0 : 180,
            backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
            flat: true,
            shadow: true,
            shadowColor: '#000',
            shadowDistance: 2,
            size: 16,
            x: x + 30,
            y: y + 140
          }
        );
        return json;
      }
    };
    
    zingchart.widgets.dashboard_accounts = {
      update: function (chartid, snippetid, params) {
        zingchart.exec(chartid, 'setseriesvalues', {
          graphid: snippetid + '_graph',
          values: [
            [10 + parseInt(100 * Math.random(), 10)],
            [10 + parseInt(100 * Math.random(), 10)],
            [10 + parseInt(100 * Math.random(), 10)]
          ],
          smart: true
        });
      },
      parse: function (data) {
        let x = parseInt(data.x) || 0;
        let y = parseInt(data.y) || 0;
        let w = parseInt(data.width) || 240;
        let h = parseInt(data.height) || 240;
        let id = data.id || 'dash';
    
        let json = zingchart.widgets.dashboard_container.parse(data);
    
        window.setInterval(function () {
          zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
        }, 5000);
    
        json.graphs = json.graphs || [];
        json.graphs.push({
          type: 'pie',
          id: id + '_graph',
          backgroundColor: 'none',
          width: w,
          height: h,
          x: x,
          y: y,
          title: {
            text: 'Accounts',
            backgroundColor: 'none',
            color: '#fff'
          },
          legend: {
            margin: 'auto auto 10px auto',
            backgroundColor: 'none',
            borderWidth: '0px',
            item: {
              margin: '2px',
              padding: '2px',
              color: '#fff'
            },
            layout: 'float',
            marker: {
              type: 'default',
              borderRadius: '3px',
              borderWidth: '0px',
              width: '15px',
              height: '10px'
            },
            shadow: false,
          },
          plot: {
            _animation: {
              speed: 500,
              method: 'ANIMATION_LINEAR',
              effect: 'ANIMATION_EXPAND_TOP'
            },
            shadow: false,
            valueBox: {
              visible: false
            },
            slice: 20
          },
          plotarea: {
            margin: '10px 10px 40px 10px'
          },
          scale: {
            sizeFactor: 0.65
          },
          series: [
            {
              text: 'Free',
              values: [103],
              backgroundColor: '#058DC7'
            },
            {
              text: 'Basic',
              values: [37],
              backgroundColor: '#50B432'
            },
            {
              text: 'Premium',
              values: [192],
              backgroundColor: '#EF561A'
            }
          ]
        });
    
        return json;
      }
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 500,
      width: 725
    });