<!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 chartConfig = {
backgroundColor: '#f5f7ea',
graphset: [{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '2%',
y: '3%',
title: {
text: 'GROCERY ORDERS',
backgroundColor: 'none',
fontColor: '#384653',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '5920',
bold: true,
fontColor: '#dd655f',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '34.6%',
y: '3%',
title: {
text: 'GROCERY SALES',
backgroundColor: 'none',
fontColor: '#384653',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '$2,402',
bold: true,
fontColor: '#4cc2bb',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '67%',
y: '3%',
title: {
text: 'GROCERY ITEMS SOLD',
backgroundColor: 'none',
fontColor: '#104053',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '11,274',
bold: true,
fontColor: '#4f5963',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'bar',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '68%',
width: '96%',
x: '2%',
y: '30%',
legend: {
backgroundColor: '#FFFFFF',
borderColor: '#FFFFFF',
borderRadius: '4px',
layout: 'float',
margin: 'auto auto 10% auto',
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
text: '%v %k in %t',
borderRadius: '4px',
shadow: false,
},
},
plotarea: {
margin: '45px 40px 90px 60px',
},
scaleX: {
values: ['Bakery', 'Dairy', 'Meat', 'Produce', 'Liquor', 'Frozen'],
guide: {
visible: false,
},
item: {
fontColor: '#384653',
},
lineColor: '#b0aaab',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:80:10',
guide: {
lineStyle: 'solid',
visible: true,
},
item: {
paddingRight: '5%',
fontColor: '#384653',
},
lineColor: '#FFFFFF',
lineWidth: '1px',
tick: {
visible: false,
},
},
series: [{
text: 'Aisle 1',
values: [11, 26, 7, 44, 12, 30],
backgroundColor: '#4cc2bb',
legendMarker: {
borderColor: '#4cc2bb',
},
},
{
text: 'Aisle 2',
values: [9, 31, 12, 38, 19, 34],
backgroundColor: '#4c707e',
legendMarker: {
borderColor: '#4c707e',
},
},
{
text: 'Aisle 3',
values: [39, 65, 12, 58, 39, 24],
backgroundColor: '#dd655f',
legendMarker: {
borderColor: '#dd655f',
},
},
{
text: 'Aisle 4',
values: [11, 21, 17, 44, 22, 16],
backgroundColor: '#88a0a9',
legendMarker: {
borderColor: '#88a0a9',
},
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
backgroundColor: '#f5f7ea',
graphset: [
{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '2%',
y: '3%',
title: {
text: 'GROCERY ORDERS',
backgroundColor: 'none',
fontColor: '#384653',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '5920',
bold: true,
fontColor: '#dd655f',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '34.6%',
y: '3%',
title: {
text: 'GROCERY SALES',
backgroundColor: 'none',
fontColor: '#384653',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '$2,402',
bold: true,
fontColor: '#4cc2bb',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'null',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '25%',
width: '31%',
x: '67%',
y: '3%',
title: {
text: 'GROCERY ITEMS SOLD',
backgroundColor: 'none',
fontColor: '#104053',
fontSize: '12px',
height: '70px',
textAlign: 'center',
},
subtitle: {
text: '11,274',
bold: true,
fontColor: '#4f5963',
fontSize: '24px',
height: '40px',
paddingTop: '25%',
textAlign: 'center',
},
},
{
type: 'bar',
backgroundColor: '#fbfcf7',
borderColor: '#384653',
borderRadius: '4px',
borderWidth: '1px',
height: '68%',
width: '96%',
x: '2%',
y: '30%',
legend: {
backgroundColor: '#FFFFFF',
borderColor: '#FFFFFF',
borderRadius: '4px',
layout: 'float',
margin: 'auto auto 10% auto',
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
text: '%v %k in %t',
borderRadius: '4px',
shadow: false,
},
},
plotarea: {
margin: '45px 40px 90px 60px',
},
scaleX: {
values: ['Bakery', 'Dairy', 'Meat', 'Produce', 'Liquor', 'Frozen'],
guide: {
visible: false,
},
item: {
fontColor: '#384653',
},
lineColor: '#b0aaab',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:80:10',
guide: {
lineStyle: 'solid',
visible: true,
},
item: {
paddingRight: '5%',
fontColor: '#384653',
},
lineColor: '#FFFFFF',
lineWidth: '1px',
tick: {
visible: false,
},
},
series: [
{
text: 'Aisle 1',
values: [11, 26, 7, 44, 12, 30],
backgroundColor: '#4cc2bb',
legendMarker: {
borderColor: '#4cc2bb',
},
},
{
text: 'Aisle 2',
values: [9, 31, 12, 38, 19, 34],
backgroundColor: '#4c707e',
legendMarker: {
borderColor: '#4c707e',
},
},
{
text: 'Aisle 3',
values: [39, 65, 12, 58, 39, 24],
backgroundColor: '#dd655f',
legendMarker: {
borderColor: '#dd655f',
},
},
{
text: 'Aisle 4',
values: [11, 21, 17, 44, 22, 16],
backgroundColor: '#88a0a9',
legendMarker: {
borderColor: '#88a0a9',
},
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
