<!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 {
min-height: 530px;
width: 100%;
height: 100%;
}
.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 chartData = [{
values: [
[1, 15, 8],
[2, 4, 2],
[5, 10, 1],
[6, 3, 3],
[3, 6, 2],
[7, 15, 1],
[8, 2, 4],
[1, 6, 6],
[2, 12, 3],
[4, 4, 4],
[5, 1, 5],
[6, 0, 1],
[8, 16, 2],
],
hoverMarker: {
backgroundColor: '#d2d9af #b2bf77',
borderColor: '#a1ae64',
borderWidth: '1px',
},
marker: {
backgroundColor: '#b2bf77 #829550',
borderColor: '#728440',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
{
values: [
[3, 5, 1],
[2, 17, 2],
[8, 8, 3],
[4, 6, 2],
[7, 3, 5],
[2, 12, 1],
[1, 0, 3],
[6, 2, 2],
[4, 12, 7],
[6, 14, 2],
[2, 6, 2],
],
hoverMarker: {
backgroundColor: '#c3c2e3 #9d9ad1',
borderColor: '#8a87c2',
borderWidth: '1px',
},
marker: {
backgroundColor: '#9d9ad1 #615faa',
borderColor: '#514f99',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
{
values: [
[3, 6, 5],
[6, 8, 8],
[8, 12, 5],
[3, 2, 3],
[5, 5, 2],
[7, 10, 2],
[2, 1, 1],
[7, 4, 1],
[6, 17, 4],
[1, 9, 3],
[5, 14, 1],
],
hoverMarker: {
backgroundColor: '#f9f0c8 #ecd466',
borderColor: '#d5bc4c',
borderWidth: '1px',
},
marker: {
backgroundColor: '#ecd466 #e0b140',
borderColor: '#cb9f34',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
];
let chartConfig = {
type: 'bubble',
theme: 'classic',
backgroundColor: '#f4f4f4 #dfdfdf',
title: {
text: 'Bubbles in ZingChart',
backgroundColor: '#777e88 #4e5665',
borderBottom: '1px solid #050505',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '18px',
fontWeight: 'normal',
height: '50px',
},
plot: {
tooltip: {
text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
textAlign: 'left',
},
},
plotarea: {
alpha: 0.3,
backgroundColor: '#fff',
margin: '90px 40px 50px 50px',
},
scaleX: {
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid',
},
item: {
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px',
paddingTop: '5px',
},
lineColor: '#aaadb3',
minorGridLines: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed',
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false,
},
minorTicks: 1,
shadow: false,
tick: {
lineColor: '#aaadb3',
},
},
scaleY: {
values: '0:20:5',
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid',
},
item: {
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px',
paddingRight: '5px',
},
lineColor: '#aaadb3',
minorGridLines: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed',
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false,
},
minorTicks: 1,
shadow: false,
tick: {
lineColor: '#aaadb3',
},
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartData = [
{
values: [
[1, 15, 8],
[2, 4, 2],
[5, 10, 1],
[6, 3, 3],
[3, 6, 2],
[7, 15, 1],
[8, 2, 4],
[1, 6, 6],
[2, 12, 3],
[4, 4, 4],
[5, 1, 5],
[6, 0, 1],
[8, 16, 2],
],
hoverMarker: {
backgroundColor: '#d2d9af #b2bf77',
borderColor: '#a1ae64',
borderWidth: '1px',
},
marker: {
backgroundColor: '#b2bf77 #829550',
borderColor: '#728440',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
{
values: [
[3, 5, 1],
[2, 17, 2],
[8, 8, 3],
[4, 6, 2],
[7, 3, 5],
[2, 12, 1],
[1, 0, 3],
[6, 2, 2],
[4, 12, 7],
[6, 14, 2],
[2, 6, 2],
],
hoverMarker: {
backgroundColor: '#c3c2e3 #9d9ad1',
borderColor: '#8a87c2',
borderWidth: '1px',
},
marker: {
backgroundColor: '#9d9ad1 #615faa',
borderColor: '#514f99',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
{
values: [
[3, 6, 5],
[6, 8, 8],
[8, 12, 5],
[3, 2, 3],
[5, 5, 2],
[7, 10, 2],
[2, 1, 1],
[7, 4, 1],
[6, 17, 4],
[1, 9, 3],
[5, 14, 1],
],
hoverMarker: {
backgroundColor: '#f9f0c8 #ecd466',
borderColor: '#d5bc4c',
borderWidth: '1px',
},
marker: {
backgroundColor: '#ecd466 #e0b140',
borderColor: '#cb9f34',
borderWidth: '1px',
fillType: 'linear',
shadow: true,
},
},
];
let chartConfig = {
type: 'bubble',
theme: 'classic',
backgroundColor: '#f4f4f4 #dfdfdf',
title: {
text: 'Bubbles in ZingChart',
backgroundColor: '#777e88 #4e5665',
borderBottom: '1px solid #050505',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '18px',
fontWeight: 'normal',
height: '50px',
},
plot: {
tooltip: {
text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
textAlign: 'left',
},
},
plotarea: {
alpha: 0.3,
backgroundColor: '#fff',
margin: '90px 40px 50px 50px',
},
scaleX: {
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid',
},
item: {
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px',
paddingTop: '5px',
},
lineColor: '#aaadb3',
minorGridLines: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed',
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false,
},
minorTicks: 1,
shadow: false,
tick: {
lineColor: '#aaadb3',
},
},
scaleY: {
values: '0:20:5',
guide: {
alpha: 0.3,
lineColor: '#aaadb3',
lineStyle: 'solid',
},
item: {
fontColor: '#676b72',
fontFamily: 'Arial',
fontSize: '11px',
paddingRight: '5px',
},
lineColor: '#aaadb3',
minorGridLines: {
alpha: 0.2,
lineColor: '#aaadb3',
lineStyle: 'dashed',
},
minorTick: {
lineColor: '#aaadb3',
shadow: false,
visible: false,
},
minorTicks: 1,
shadow: false,
tick: {
lineColor: '#aaadb3',
},
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
