<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
var chartId = 'myChart';
// CHART CONFIG
// -----------------------------
var chartConfig = {
type: 'hbar',
backgroundColor: '#FFF',
stacked: true,
plotarea: {
margin: '80 70 70 100'
},
title: {
text: 'Reading attitude',
fontSize: '35px',
fontWeight: 'bold',
paddingLeft: '20px',
align: 'left'
},
subtitle: {
text: 'How much do you disagree or agree with these statements about reading?',
fontSize: '16px',
fontWeight: 'normal',
padding: '15 0 0 20',
align: 'left'
},
plot: {
dataDesc: ['', '', '', 'I like to exchange books with my friends.', '', '', '', '', 'I like to express my opinions about books I have read.', '', '', '', '', 'I cannot sit still and read for more than a few minutes.', '', '', '', '', 'I read only to get information that I need.', '', '', '', '', 'I enjoy going to a bookstore or a library', '', '', '', '', 'For me, reading is a waste of time.', '', '', '', '', 'I feel happy if I receive a book as a present.', '', '', '', '', 'I find it hard to finish books.', '', '', '', '', 'I like talking about books with other people.', '', '', '', '', 'Reading is one of my favorite hobbies.', '', '', '', '', 'I read only if I have to.', ''],
borderWidth: '1px',
borderColor: '#000',
hoverState: {
visible: false
}
},
legend: {
layout: 'float',
width: '70%',
margin: 'auto auto 15 auto',
borderWidth: '0px',
item: {
fontSize: '14px'
},
toggleAction: 'remove'
},
scaleX: {
values: ['Canada - 60%', 'Mexico - 49%', 'USA - 53%', '', '', 'Canada - 59%', 'Mexico - 21%', 'USA - 60%', '', '', 'Canada - 69%', 'Mexico - 70%', 'USA - 53%', '', '', 'Canada - 49%', 'Mexico - 63%', 'USA - 50%', '', '', 'Canada - 66%', 'Mexico - 61%', 'USA - 59%', '', '', 'Canada - 69%', 'Mexico - 60%', 'USA - 42%', '', '', 'Canada - 23%', 'Mexico - 64%', 'USA - 66%', '', '', 'Canada - 11%', 'Mexico - 32%', 'USA - 60%', '', '', 'Canada - 45%', 'Mexico - 59%', 'USA - 57%', '', '', 'Canada - 33%', 'Mexico - 45%', 'USA - 57%', '', '', 'Canada - 43%', 'Mexico - 57%', 'USA - 19%', '', ''],
maxItems: 999,
itemsOverlap: true,
lineWidth: '0px',
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px'
},
guide: {
visible: false
},
tick: {
visible: false
}
},
tooltip: {
color: '#000',
fontSize: '15px',
padding: '10px',
fontWeight: 'bold',
text: '%plot-text: %node-value%'
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 25,
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px'
},
guide: {
visible: false
},
tick: {
visible: true
}
},
series: [{
values: [48, 19, 7, 0, 0, 38, 10, 48, 0, 0, 23, 43, 31, 0, 0, 38, 26, 32, 0, 0, 8, 40, 24, 0, 0, 45, 26, 19, 0, 0, 10, 40, 24, 0, 0, 5, 6, 39, 0, 0, 11, 6, 11, 0, 0, 20, 11, 6, 0, 0, 35, 47, 14, 0, 0],
backgroundColor: '#8B475D',
text: 'Strongly disagree',
valueBox: {
visible: true,
color: '#000',
fillAngle: 0,
offsetX: '-6px',
offsetY: '-2px',
padding: '4px',
shadow: false,
text: '%data-desc',
fontWeight: 'bold',
fontSize: '13px',
rules: [{
rule: '%node-index%5 !== 3',
visible: false
}]
},
rules: [{
rule: '%node-value === 0',
backgroundColor: 'none',
borderWidth: '0px'
}]
},
{
values: [12, 30, 46, null, null, 21, 11, 12, null, null, 46, 27, 22, null, null, 11, 37, 18, null, null, 58, 21, 35, null, null, 24, 34, 23, null, null, 13, 24, 42, null, null, 6, 26, 21, null, null, 34, 53, 46, null, null, 13, 34, 51, null, null, 8, 10, 5, null, null],
backgroundColor: '#FFB6C1',
text: 'Disagree'
},
{
values: [12, 10, 26, null, null, 6, 38, 13, null, null, 9, 8, 24, null, null, 21, 14, 12, null, null, 13, 6, 12, null, null, 10, 11, 33, null, null, 7, 8, 9, null, null, 14, 32, 14, null, null, 35, 7, 14, null, null, 37, 8, 16, null, null, 34, 22, 12, null, null],
backgroundColor: '#FFF8DC',
text: 'Agree'
},
{
values: [28, 41, 21, null, null, 35, 41, 27, null, null, 22, 22, 23, null, null, 30, 23, 38, null, null, 21, 33, 29, null, null, 21, 29, 25, null, null, 70, 28, 25, null, null, 75, 36, 26, null, null, 20, 34, 29, null, null, 30, 47, 27, null, null, 23, 21, 69, null, null],
backgroundColor: '#918F87',
text: 'Strongly agree',
dataEnd: [40, 51, 47, 51, '', 41, 79, 40, 55, '', 31, 30, 47, 60, '', 51, 37, 50, 49, '', 34, 39, 41, 62, '', 31, 40, 58, 42, '', 77, 36, 34, 41, '', 89, 68, 40, 34, '', 55, 41, 43, 64, '', 67, 55, 43, 31, '', 57, 43, 81, 46, ''],
valueBox: {
visible: true,
color: '#000',
text: '%data-end%',
fontWeight: 'normal',
fontSize: '12px',
placement: 'top-in',
width: '40px',
offsetX: '40px'
}
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: 1000,
width: '100%'
});
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
var chartId = 'myChart';
// CHART CONFIG
// -----------------------------
var chartConfig = {
type: 'hbar',
backgroundColor: '#FFF',
stacked: true,
plotarea: {
margin: '80 70 70 100'
},
title: {
text: 'Reading attitude',
fontSize: '35px',
fontWeight: 'bold',
paddingLeft: '20px',
align: 'left'
},
subtitle: {
text: 'How much do you disagree or agree with these statements about reading?',
fontSize: '16px',
fontWeight: 'normal',
padding: '15 0 0 20',
align: 'left'
},
plot: {
dataDesc: ['', '', '', 'I like to exchange books with my friends.', '', '', '', '', 'I like to express my opinions about books I have read.', '', '', '', '', 'I cannot sit still and read for more than a few minutes.', '', '', '', '', 'I read only to get information that I need.', '', '', '', '', 'I enjoy going to a bookstore or a library', '', '', '', '', 'For me, reading is a waste of time.', '', '', '', '', 'I feel happy if I receive a book as a present.', '', '', '', '', 'I find it hard to finish books.', '', '', '', '', 'I like talking about books with other people.', '', '', '', '', 'Reading is one of my favorite hobbies.', '', '', '', '', 'I read only if I have to.', ''],
borderWidth: '1px',
borderColor: '#000',
hoverState: {
visible: false
}
},
legend: {
layout: 'float',
width: '70%',
margin: 'auto auto 15 auto',
borderWidth: '0px',
item: {
fontSize: '14px'
},
toggleAction: 'remove'
},
scaleX: {
values: ['Canada - 60%', 'Mexico - 49%', 'USA - 53%', '', '', 'Canada - 59%', 'Mexico - 21%', 'USA - 60%', '', '', 'Canada - 69%', 'Mexico - 70%', 'USA - 53%', '', '', 'Canada - 49%', 'Mexico - 63%', 'USA - 50%', '', '', 'Canada - 66%', 'Mexico - 61%', 'USA - 59%', '', '', 'Canada - 69%', 'Mexico - 60%', 'USA - 42%', '', '', 'Canada - 23%', 'Mexico - 64%', 'USA - 66%', '', '', 'Canada - 11%', 'Mexico - 32%', 'USA - 60%', '', '', 'Canada - 45%', 'Mexico - 59%', 'USA - 57%', '', '', 'Canada - 33%', 'Mexico - 45%', 'USA - 57%', '', '', 'Canada - 43%', 'Mexico - 57%', 'USA - 19%', '', ''],
maxItems: 999,
itemsOverlap: true,
lineWidth: '0px',
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px'
},
guide: {
visible: false
},
tick: {
visible: false
}
},
tooltip: {
color: '#000',
fontSize: '15px',
padding: '10px',
fontWeight: 'bold',
text: '%plot-text: %node-value%'
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 25,
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px'
},
guide: {
visible: false
},
tick: {
visible: true
}
},
series: [
{
values: [48, 19, 7, 0, 0, 38, 10, 48, 0, 0, 23, 43, 31, 0, 0, 38, 26, 32, 0, 0, 8, 40, 24, 0, 0, 45, 26, 19, 0, 0, 10, 40, 24, 0, 0, 5, 6, 39, 0, 0, 11, 6, 11, 0, 0, 20, 11, 6, 0, 0, 35, 47, 14, 0, 0],
backgroundColor: '#8B475D',
text: 'Strongly disagree',
valueBox: {
visible: true,
color: '#000',
fillAngle: 0,
offsetX: '-6px',
offsetY: '-2px',
padding: '4px',
shadow: false,
text: '%data-desc',
fontWeight: 'bold',
fontSize: '13px',
rules: [
{
rule: '%node-index%5 !== 3',
visible: false
}
]
},
rules: [
{
rule: '%node-value === 0',
backgroundColor: 'none',
borderWidth: '0px'
}
]
},
{
values: [12, 30, 46, null, null, 21, 11, 12, null, null, 46, 27, 22, null, null, 11, 37, 18, null, null, 58, 21, 35, null, null, 24, 34, 23, null, null, 13, 24, 42, null, null, 6, 26, 21, null, null, 34, 53, 46, null, null, 13, 34, 51, null, null, 8, 10, 5, null, null],
backgroundColor: '#FFB6C1',
text: 'Disagree'
},
{
values: [12, 10, 26, null, null, 6, 38, 13, null, null, 9, 8, 24, null, null, 21, 14, 12, null, null, 13, 6, 12, null, null, 10, 11, 33, null, null, 7, 8, 9, null, null, 14, 32, 14, null, null, 35, 7, 14, null, null, 37, 8, 16, null, null, 34, 22, 12, null, null],
backgroundColor: '#FFF8DC',
text: 'Agree'
},
{
values: [28, 41, 21, null, null, 35, 41, 27, null, null, 22, 22, 23, null, null, 30, 23, 38, null, null, 21, 33, 29, null, null, 21, 29, 25, null, null, 70, 28, 25, null, null, 75, 36, 26, null, null, 20, 34, 29, null, null, 30, 47, 27, null, null, 23, 21, 69, null, null],
backgroundColor: '#918F87',
text: 'Strongly agree',
dataEnd: [40, 51, 47, 51, '', 41, 79, 40, 55, '', 31, 30, 47, 60, '', 51, 37, 50, 49, '', 34, 39, 41, 62, '', 31, 40, 58, 42, '', 77, 36, 34, 41, '', 89, 68, 40, 34, '', 55, 41, 43, 64, '', 67, 55, 43, 31, '', 57, 43, 81, 46, ''],
valueBox: {
visible: true,
color: '#000',
text: '%data-end%',
fontWeight: 'normal',
fontSize: '12px',
placement: 'top-in',
width: '40px',
offsetX: '40px'
}
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: 1000,
width: '100%'
});
