<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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
},
source: {
text: 'Source: Fast Company & Inc (Published)',
marginRight: '5%',
marginBottom: '2%',
fontFamily: 'Tahoma',
fontStyle: 'italic',
fontWeight: 'normal'
},
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'
}
}
]
};
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
},
source: {
text: 'Source: Fast Company & Inc (Published)',
marginRight: '5%',
marginBottom: '2%',
fontFamily: 'Tahoma',
fontStyle: 'italic',
fontWeight: 'normal'
},
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'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
