• 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>
        .zc-body {
          background-color: #111;
        }
    
        .chart--container {
          width: 100%;
          height: 100%;
          min-height: 530px;
        }
    
        #myChart-wrapper {
          margin: auto;
        }
    
        .zc-ref {
          display: none;
        }
      </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>
    .zc-body {
      background-color: #111;
    }
    
    .chart--container {
      width: 100%;
      height: 100%;
      min-height: 530px;
    }
    
    #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
    });