<!doctype html>
<html class="zc-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 class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
globals: {
fontFamily: 'Arial',
},
backgroundColor: '#FFFFFF',
width: '100%',
title: {
text: '73 Reviews',
align: 'left',
backgroundColor: 'none',
bold: false,
fontColor: '#000000',
fontSize: '20px',
x: '40px',
y: '5px',
},
subtitle: {
text: '84% <i>Compared to Last Month</i>',
align: 'left',
backgroundColor: 'none',
bold: false,
fontColor: '#7E7E7E',
fontSize: '14px',
x: '55px',
y: '35px',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#7E7E7E',
},
layout: 'float',
marker: {
type: 'circle',
},
shadow: false,
toggleAction: 'remove',
x: '32px',
y: '80px',
},
plot: {
barSpace: '20px',
},
plotarea: {
margin: '125px 45px 30px 45px',
},
scaleX: {
values: ['WEEK 1', 'WEEK 2', 'WEEK 3', 'WEEK 4'],
guide: {
visible: false,
},
item: {
color: '#8B8B8B',
},
lineColor: '#D9D7D5',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:25:5',
guide: {
lineStyle: 'dotted',
},
item: {
color: '#8B8B8B',
},
lineColor: '#D9D7D5',
lineWidth: '1px',
tick: {
visible: false,
},
},
shapes: [{
type: 'triangle',
backgroundColor: '#5297B6',
size: '5px',
x: '50px',
y: '50px',
}, ],
series: [{
type: 'bar',
text: 'YELP',
values: [15, 10, 4, 13],
backgroundColor: '#F29E4A',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'bar',
text: 'TRIPADVISOR',
values: [3, 2, 4, 5],
backgroundColor: '#7BBADE',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'bar',
text: 'ZAGAT',
values: [4, 2, 5, 6],
backgroundColor: '#93DE7F',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'line',
text: 'TOTAL',
values: [22, 14, 13, 24],
aspect: 'spline',
highlight: false,
lineColor: '#8B8B8B',
lineWidth: '2px',
marker: {
backgroundColor: '#FFFFFF',
borderColor: '#8B8B8B',
borderWidth: '2px',
shadow: false,
},
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
globals: {
fontFamily: 'Arial',
},
backgroundColor: '#FFFFFF',
width: '100%',
title: {
text: '73 Reviews',
align: 'left',
backgroundColor: 'none',
bold: false,
fontColor: '#000000',
fontSize: '20px',
x: '40px',
y: '5px',
},
subtitle: {
text: '84% <i>Compared to Last Month</i>',
align: 'left',
backgroundColor: 'none',
bold: false,
fontColor: '#7E7E7E',
fontSize: '14px',
x: '55px',
y: '35px',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#7E7E7E',
},
layout: 'float',
marker: {
type: 'circle',
},
shadow: false,
toggleAction: 'remove',
x: '32px',
y: '80px',
},
plot: {
barSpace: '20px',
},
plotarea: {
margin: '125px 45px 30px 45px',
},
scaleX: {
values: ['WEEK 1', 'WEEK 2', 'WEEK 3', 'WEEK 4'],
guide: {
visible: false,
},
item: {
color: '#8B8B8B',
},
lineColor: '#D9D7D5',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:25:5',
guide: {
lineStyle: 'dotted',
},
item: {
color: '#8B8B8B',
},
lineColor: '#D9D7D5',
lineWidth: '1px',
tick: {
visible: false,
},
},
shapes: [
{
type: 'triangle',
backgroundColor: '#5297B6',
size: '5px',
x: '50px',
y: '50px',
},
],
series: [
{
type: 'bar',
text: 'YELP',
values: [15, 10, 4, 13],
backgroundColor: '#F29E4A',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'bar',
text: 'TRIPADVISOR',
values: [3, 2, 4, 5],
backgroundColor: '#7BBADE',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'bar',
text: 'ZAGAT',
values: [4, 2, 5, 6],
backgroundColor: '#93DE7F',
barWidth: '10px',
hoverState: {
visible: false,
},
},
{
type: 'line',
text: 'TOTAL',
values: [22, 14, 13, 24],
aspect: 'spline',
highlight: false,
lineColor: '#8B8B8B',
lineWidth: '2px',
marker: {
backgroundColor: '#FFFFFF',
borderColor: '#8B8B8B',
borderWidth: '2px',
shadow: false,
},
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
