<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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"]; // load the patterns module and then render the chart
zingchart.loadModules('patterns', function() {
let chartConfig = {
type: 'bubble',
theme: 'classic',
backgroundColor: '#f4f4f4 #ffffff',
title: {
text: 'Payment Volumes',
backgroundColor: 'none',
fontColor: '#000000',
fontFamily: 'sans-serif',
fontSize: '18px',
fontWeight: 'bold',
y: '7%',
},
plot: {
cursor: 'hand',
scaling: 'radius',
selectionMode: 'multiple',
sizeFactor: 2.5,
},
scaleX: {
values: '0:10:2',
alpha: 0.25,
guide: {
visible: false,
},
item: {
fontFamily: 'Tahoma',
fontWeight: 'normal',
rules: [{
text: 'Lowest Volume',
rule: '%v == 0',
},
{
text: '',
rule: '%v >= 2',
},
{
text: 'Highest Volume',
rule: '%v == 10',
},
],
},
lineColor: '#141414',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:4:2',
guide: {
visible: false,
},
visible: false,
},
series: [{
values: [
[0, 2, 20]
],
tooltip: {
text: '$1.5 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Stripe</strong><br>$1.5 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#6ab9e1',
backgroundImage: 'PATTERN_LIGHT_VERTICAL',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#222222',
},
},
{
values: [
[1.75, 2, 25]
],
tooltip: {
text: '$2 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Swipely</strong><br>$2 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#0173C6',
backgroundImage: 'PATTERN_LIGHT_DOWNWARD_DIAGONAL',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#333333',
},
},
{
values: [
[3.75, 2, 70]
],
tooltip: {
text: '$30 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Square</strong><br>$30 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#ffffff',
backgroundImage: 'PATTERN_SMALL_GRID',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#555555',
},
},
{
values: [
[6.25, 2, 100]
],
tooltip: {
text: '$150 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Alipay</strong><br>$150 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 0.75,
backgroundColor: '#ff7e00',
backgroundImage: 'PATTERN_ZIGZAG',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#999999',
},
},
{
values: [
[9, 2, 115]
],
tooltip: {
text: '$180 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>PayPal</strong><br>$180 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 0.75,
backgroundColor: '#008ccb',
backgroundImage: 'PATTERN_LARGE_CHECKER_BOARD',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#EEEEEE',
},
},
],
source: {
text: 'Source: Fast Company & Inc (Published)',
fontFamily: 'Tahoma',
fontStyle: 'italic',
fontWeight: 'normal',
marginBottom: '2%',
marginRight: '5%',
},
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
// load the patterns module and then render the chart
zingchart.loadModules('patterns', function () {
let chartConfig = {
type: 'bubble',
theme: 'classic',
backgroundColor: '#f4f4f4 #ffffff',
title: {
text: 'Payment Volumes',
backgroundColor: 'none',
fontColor: '#000000',
fontFamily: 'sans-serif',
fontSize: '18px',
fontWeight: 'bold',
y: '7%',
},
plot: {
cursor: 'hand',
scaling: 'radius',
selectionMode: 'multiple',
sizeFactor: 2.5,
},
scaleX: {
values: '0:10:2',
alpha: 0.25,
guide: {
visible: false,
},
item: {
fontFamily: 'Tahoma',
fontWeight: 'normal',
rules: [
{
text: 'Lowest Volume',
rule: '%v == 0',
},
{
text: '',
rule: '%v >= 2',
},
{
text: 'Highest Volume',
rule: '%v == 10',
},
],
},
lineColor: '#141414',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:4:2',
guide: {
visible: false,
},
visible: false,
},
series: [
{
values: [[0, 2, 20]],
tooltip: {
text: '$1.5 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Stripe</strong><br>$1.5 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#6ab9e1',
backgroundImage: 'PATTERN_LIGHT_VERTICAL',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#222222',
},
},
{
values: [[1.75, 2, 25]],
tooltip: {
text: '$2 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Swipely</strong><br>$2 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#0173C6',
backgroundImage: 'PATTERN_LIGHT_DOWNWARD_DIAGONAL',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#333333',
},
},
{
values: [[3.75, 2, 70]],
tooltip: {
text: '$30 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Square</strong><br>$30 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 1,
backgroundColor: '#ffffff',
backgroundImage: 'PATTERN_SMALL_GRID',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#555555',
},
},
{
values: [[6.25, 2, 100]],
tooltip: {
text: '$150 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>Alipay</strong><br>$150 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 0.75,
backgroundColor: '#ff7e00',
backgroundImage: 'PATTERN_ZIGZAG',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#999999',
},
},
{
values: [[9, 2, 115]],
tooltip: {
text: '$180 billion',
backgroundColor: '#000000',
shadow: false,
},
valueBox: {
text: '<strong>PayPal</strong><br>$180 billion',
fontColor: '#141414',
fontFamily: 'Tahoma',
fontWeight: 'normal',
placement: 'top',
},
marker: {
alpha: 0.75,
backgroundColor: '#008ccb',
backgroundImage: 'PATTERN_LARGE_CHECKER_BOARD',
},
selectedMarker: {
alpha: 0.25,
backgroundColor: '#EEEEEE',
},
},
],
source: {
text: 'Source: Fast Company & Inc (Published)',
fontFamily: 'Tahoma',
fontStyle: 'italic',
fontWeight: 'normal',
marginBottom: '2%',
marginRight: '5%',
},
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
