Gallery Back to Gallery

Spotify Usage Report

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  </script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
  </script>
  <style>
    body {
      margin: 10px;
      padding: 10px;
    }

    *,
    input,
    button,
    select,
    textarea,
    label {
      font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    }
  </style>
</head>

<body>
  <div id="zc"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var csize = 500,
      margin = 50;
    var bsizeS = 3,
      bsizeL = 20;

    var cdata = {

      graphset: [{
        type: 'pie',
        backgroundColor: '#4A907D',

        plotarea: {
          margin: margin
        },

        title: {
          text: 'We\'ve spent some serious quality time together.',
          width: '100%',
          align: 'left',
          fontColor: '#181818',
          fontWeight: 'bold',
          fontSize: 18,
          padding: 4
        },

        scale: {
          sizeFactor: 1
        },

        scaleR: {
          refAngle: 0,
          aperture: 180
        },

        plot: {
          refAngle: 90,
          angleStart: 90,
          detach: false,
          totals: [100],
          hoverState: {
            visible: false
          }
        },

        series: [{
            size: '100%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '95%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            alpha: 0.25,
            tooltip: {
              visible: false
            },
            valueBox: {
              text: '2019',
              fontColor: '#181818',
              fontSize: 15,
              fontWeight: 'bold',
              placement: 'in',
              offsetX: 168,
              offsetY: 190
            }
          },
          {
            size: '95%',
            values: [78],
            backgroundColor: '#CEF46E',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            animation: {
              speed: 1000,
              effect: 2,
              method: 0
            },
            valueBox: [{
                text: '\u25CF',
                fontColor: '#CEF46E',
                fontSize: 15,
                placement: 'in',
                offsetX: -4,
                offsetY: -190
              },
              {
                text: '172,694 minutes',
                fontColor: '#CEF46E',
                fontSize: 14,
                fontWeight: 'bold',
                placement: 'in',
                offsetX: 200,
                offsetY: -235
              }
            ]
          },
          {
            size: '90%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '85%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            alpha: 0.25,
            tooltip: {
              visible: false
            },
            valueBox: {
              text: '2018',
              fontColor: '#181818',
              fontSize: 15,
              fontWeight: 'bold',
              placement: 'in',
              offsetX: 155,
              offsetY: 170
            }
          },
          {
            size: '85%',
            values: [90],
            backgroundColor: '#CEF46E',
            borderWidth: bsizeS,
            animation: {
              speed: 2000,
              effect: 2,
              method: 0
            },
            borderColor: '#CEF46E',
            valueBox: [{
                text: '\u25CF',
                fontColor: '#CEF46E',
                fontSize: 15,
                placement: 'in',
                offsetX: 58,
                offsetY: -182
              },
              {
                text: '199,830 minutes',
                fontColor: '#CEF46E',
                fontSize: 14,
                fontWeight: 'bold',
                placement: 'in',
                offsetX: 193,
                offsetY: -188
              }
            ]
          },
          {
            size: '80%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '75%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            alpha: 0.25,
            tooltip: {
              visible: false
            },
            valueBox: {
              text: '2017',
              fontColor: '#181818',
              fontSize: 15,
              fontWeight: 'bold',
              placement: 'in',
              offsetX: 142,
              offsetY: 150
            }
          },
          {
            size: '75%',
            values: [63],
            backgroundColor: '#CEF46E',
            borderWidth: bsizeS,
            animation: {
              speed: 3000,
              effect: 2,
              method: 0
            },
            borderColor: '#CEF46E',
            valueBox: [{
                text: '\u25CF',
                fontColor: '#CEF46E',
                fontSize: 15,
                placement: 'in',
                offsetX: -55,
                offsetY: -118
              },
              {
                text: '129,374 minutes',
                fontColor: '#CEF46E',
                fontSize: 14,
                fontWeight: 'bold',
                placement: 'in',
                offsetX: 166,
                offsetY: -203
              }
            ]
          },
          {
            size: '70%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '65%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            alpha: 0.25,
            tooltip: {
              visible: false
            },
            valueBox: {
              text: '2016',
              fontColor: '#181818',
              fontSize: 15,
              fontWeight: 'bold',
              placement: 'in',
              offsetX: 129,
              offsetY: 130
            }
          },
          {
            size: '65%',
            values: [60],
            backgroundColor: '#CEF46E',
            borderWidth: bsizeS,
            animation: {
              speed: 3500,
              effect: 2,
              method: 0
            },
            borderColor: '#CEF46E',
            valueBox: [{
                text: '\u25CF',
                fontColor: '#CEF46E',
                fontSize: 15,
                placement: 'in',
                offsetX: -55,
                offsetY: -92
              },
              {
                text: '126,554 minutes',
                fontColor: '#CEF46E',
                fontSize: 14,
                fontWeight: 'bold',
                placement: 'in',
                offsetX: 153,
                offsetY: -178
              }
            ]
          },
          {
            size: '60%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '55%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeS,
            borderColor: '#CEF46E',
            alpha: 0.25,
            tooltip: {
              visible: false
            },
            valueBox: {
              text: '2015',
              fontColor: '#181818',
              fontSize: 15,
              fontWeight: 'bold',
              placement: 'in',
              offsetX: 116,
              offsetY: 110
            }
          },
          {
            size: '55%',
            values: [49],
            backgroundColor: '#CEF46E',
            borderWidth: bsizeS,
            animation: {
              speed: 4000,
              effect: 2,
              method: 0
            },
            borderColor: '#CEF46E',
            valueBox: [{
                text: '\u25CF',
                fontColor: '#CEF46E',
                fontSize: 15,
                placement: 'in',
                offsetX: -61,
                offsetY: -46
              },
              {
                text: '93,612 minutes',
                fontColor: '#CEF46E',
                fontSize: 14,
                fontWeight: 'bold',
                placement: 'in',
                offsetX: 130,
                offsetY: -160
              }
            ]
          },
          {
            size: '50%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },

          {
            size: '45%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '40%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '35%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '30%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '25%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '20%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '15%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '10%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          },
          {
            size: '5%',
            values: [100],
            backgroundColor: 'none',
            borderWidth: bsizeL,
            borderColor: '#181818',
            tooltip: {
              visible: false
            },
            valueBox: {
              visible: false
            }
          }
        ]
      }]
    };

    zingchart.render({
      id: 'zc',
      width: 500,
      height: 500,
      output: 'svg',
      data: cdata
    });
  </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>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>
  </head>
	<body>
		<div id="zc"></div>
  </body>
</html>
var csize = 500, margin = 50;
var bsizeS = 3, bsizeL = 20;

var cdata = {

	graphset : [
		{
			type : 'pie',
			backgroundColor : '#4A907D',
			
			plotarea : {
				margin : margin
			},

			title : {
				text : 'We\'ve spent some serious quality time together.',
				width : '100%',
				align : 'left',
				fontColor : '#181818',
				fontWeight : 'bold',
				fontSize : 18,
				padding : 4
			},

			scale : {
				sizeFactor : 1
			},

			scaleR : {
				refAngle : 0,
				aperture : 180
			},

			plot : {
				refAngle : 90,
				angleStart : 90,
				detach : false,
				totals : [100],
				hoverState : {
					visible : false
				}
			},

			series : [
				{
					size : '100%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '95%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					alpha : 0.25,
					tooltip : {
						visible : false
					},
					valueBox : {
						text : '2019',
						fontColor : '#181818',
						fontSize : 15,
						fontWeight : 'bold',
						placement : 'in',
						offsetX : 168,
						offsetY : 190
					}
				},
				{
					size : '95%',
					values : [78],
					backgroundColor : '#CEF46E',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					animation : {
						speed : 1000,
						effect : 2,
						method : 0
					},
					valueBox : [
						{
							text : '\u25CF',
							fontColor : '#CEF46E',
							fontSize : 15,
							placement : 'in',
							offsetX : -4,
							offsetY : -190
						},
						{
							text : '172,694 minutes',
							fontColor : '#CEF46E',
							fontSize : 14,
							fontWeight : 'bold',
							placement : 'in',
							offsetX : 200,
							offsetY : -235
						}
					]
				},
				{
					size : '90%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '85%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					alpha : 0.25,
					tooltip : {
						visible : false
					},
					valueBox : {
						text : '2018',
						fontColor : '#181818',
						fontSize : 15,
						fontWeight : 'bold',
						placement : 'in',
						offsetX : 155,
						offsetY : 170
					}
				},
				{
					size : '85%',
					values : [90],
					backgroundColor : '#CEF46E',
					borderWidth : bsizeS,
					animation : {
						speed : 2000,
						effect : 2,
						method : 0
					},					
					borderColor : '#CEF46E',
					valueBox : [
						{
							text : '\u25CF',
							fontColor : '#CEF46E',
							fontSize : 15,
							placement : 'in',
							offsetX : 58,
							offsetY : -182
						},
						{
							text : '199,830 minutes',
							fontColor : '#CEF46E',
							fontSize : 14,
							fontWeight : 'bold',
							placement : 'in',
							offsetX : 193,
							offsetY : -188
						}
					]
				},
				{
					size : '80%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '75%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					alpha : 0.25,
					tooltip : {
						visible : false
					},
					valueBox : {
						text : '2017',
						fontColor : '#181818',
						fontSize : 15,
						fontWeight : 'bold',
						placement : 'in',
						offsetX : 142,
						offsetY : 150
					}
				},
				{
					size : '75%',
					values : [63],
					backgroundColor : '#CEF46E',
					borderWidth : bsizeS,
					animation : {
						speed : 3000,
						effect : 2,
						method : 0
					},					
					borderColor : '#CEF46E',
					valueBox : [
						{
							text : '\u25CF',
							fontColor : '#CEF46E',
							fontSize : 15,
							placement : 'in',
							offsetX : -55,
							offsetY : -118
						},
						{
							text : '129,374 minutes',
							fontColor : '#CEF46E',
							fontSize : 14,
							fontWeight : 'bold',
							placement : 'in',
							offsetX : 166,
							offsetY : -203
						}
					]
				},
				{
					size : '70%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '65%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					alpha : 0.25,
					tooltip : {
						visible : false
					},
					valueBox : {
						text : '2016',
						fontColor : '#181818',
						fontSize : 15,
						fontWeight : 'bold',
						placement : 'in',
						offsetX : 129,
						offsetY : 130
					}
				},
				{
					size : '65%',
					values : [60],
					backgroundColor : '#CEF46E',
					borderWidth : bsizeS,
					animation : {
						speed : 3500,
						effect : 2,
						method : 0
					},					
					borderColor : '#CEF46E',
					valueBox : [
						{
							text : '\u25CF',
							fontColor : '#CEF46E',
							fontSize : 15,
							placement : 'in',
							offsetX : -55,
							offsetY : -92
						},
						{
							text : '126,554 minutes',
							fontColor : '#CEF46E',
							fontSize : 14,
							fontWeight : 'bold',
							placement : 'in',
							offsetX : 153,
							offsetY : -178
						}
					]
				},
				{
					size : '60%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '55%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeS,
					borderColor : '#CEF46E',
					alpha : 0.25,
					tooltip : {
						visible : false
					},
					valueBox : {
						text : '2015',
						fontColor : '#181818',
						fontSize : 15,
						fontWeight : 'bold',
						placement : 'in',
						offsetX : 116,
						offsetY : 110
					}
				},
				{
					size : '55%',
					values : [49],
					backgroundColor : '#CEF46E',
					borderWidth : bsizeS,
					animation : {
						speed : 4000,
						effect : 2,
						method : 0
					},					
					borderColor : '#CEF46E',
					valueBox : [
						{
							text : '\u25CF',
							fontColor : '#CEF46E',
							fontSize : 15,
							placement : 'in',
							offsetX : -61,
							offsetY : -46
						},
						{
							text : '93,612 minutes',
							fontColor : '#CEF46E',
							fontSize : 14,
							fontWeight : 'bold',
							placement : 'in',
							offsetX : 130,
							offsetY : -160
						}
					]
				},
				{
					size : '50%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},

				{
					size : '45%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '40%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},	
				{
					size : '35%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '30%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '25%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},	
				{
					size : '20%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '15%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '10%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				},
				{
					size : '5%',
					values : [100],
					backgroundColor : 'none',
					borderWidth : bsizeL,
					borderColor : '#181818',
					tooltip : {
						visible : false
					},
					valueBox : {
						visible : false
					}
				}
			]
		}
	]
};

zingchart.render({
  id : 'zc',
  width : 500,
  height : 500,
  output : 'svg',
  data : cdata
});
body { 
  margin:10px;
  padding:10px; 
}

*, input, button, select, textarea, label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}
Dynamic Scatter Healthcare Chart 4/271 Mother of All Dashboards

Related Documentation:

  • No Related Docs