<!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>
.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)
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbar',
stacked: true,
backgroundColor: '#FFF',
title: {
text: 'Reading attitude',
align: 'left',
fontSize: '35px',
fontWeight: 'bold',
paddingLeft: '20px',
},
subtitle: {
text: 'How much do you disagree or agree with these statements about reading?',
align: 'left',
fontSize: '16px',
fontWeight: 'normal',
padding: '15 0 0 20',
},
legend: {
borderWidth: '0px',
layout: 'float',
margin: 'auto auto 15 auto',
toggleAction: 'remove',
width: '70%',
},
plot: {
tooltip: {
text: '%plot-text: %node-value%',
color: '#000',
fontSize: '15px',
fontWeight: 'bold',
padding: '10px',
},
borderWidth: '1px',
borderColor: '#000',
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.',
'',
],
hoverState: {
visible: false,
},
},
plotarea: {
margin: '80 70 70 100',
},
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%',
'',
'',
],
guide: {
visible: false,
},
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px',
},
itemsOverlap: true,
maxItems: 999,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 25,
guide: {
visible: false,
},
item: {
color: '#000',
fontSize: '12px',
fontWeight: 'normal',
},
tick: {
visible: true,
},
},
series: [{
text: 'Strongly disagree',
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,
],
valueBox: {
text: '%data-desc',
color: '#000',
fillAngle: 0,
fontSize: '13px',
fontWeight: 'bold',
offsetX: '-6px',
offsetY: '-2px',
padding: '4px',
shadow: false,
visible: true,
rules: [{
rule: '%node-index%5 !== 3',
visible: false,
}, ],
},
backgroundColor: '#8B475D',
rules: [{
rule: '%node-value === 0',
backgroundColor: 'none',
borderWidth: '0px',
}, ],
},
{
text: 'Disagree',
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: 'Agree',
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: 'Strongly 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,
],
valueBox: {
text: '%data-end%',
color: '#000',
fontSize: '12px',
fontWeight: 'normal',
offsetX: '40px',
placement: 'top-in',
visible: true,
width: '40px',
},
backgroundColor: '#918F87',
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,
'',
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: '1000px',
width: '100%',
});
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbar',
stacked: true,
backgroundColor: '#FFF',
title: {
text: 'Reading attitude',
align: 'left',
fontSize: '35px',
fontWeight: 'bold',
paddingLeft: '20px',
},
subtitle: {
text: 'How much do you disagree or agree with these statements about reading?',
align: 'left',
fontSize: '16px',
fontWeight: 'normal',
padding: '15 0 0 20',
},
legend: {
borderWidth: '0px',
layout: 'float',
margin: 'auto auto 15 auto',
toggleAction: 'remove',
width: '70%',
},
plot: {
tooltip: {
text: '%plot-text: %node-value%',
color: '#000',
fontSize: '15px',
fontWeight: 'bold',
padding: '10px',
},
borderWidth: '1px',
borderColor: '#000',
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.',
'',
],
hoverState: {
visible: false,
},
},
plotarea: {
margin: '80 70 70 100',
},
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%',
'',
'',
],
guide: {
visible: false,
},
item: {
color: '#000',
fontWeight: 'normal',
fontSize: '12px',
},
itemsOverlap: true,
maxItems: 999,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 25,
guide: {
visible: false,
},
item: {
color: '#000',
fontSize: '12px',
fontWeight: 'normal',
},
tick: {
visible: true,
},
},
series: [
{
text: 'Strongly disagree',
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,
],
valueBox: {
text: '%data-desc',
color: '#000',
fillAngle: 0,
fontSize: '13px',
fontWeight: 'bold',
offsetX: '-6px',
offsetY: '-2px',
padding: '4px',
shadow: false,
visible: true,
rules: [
{
rule: '%node-index%5 !== 3',
visible: false,
},
],
},
backgroundColor: '#8B475D',
rules: [
{
rule: '%node-value === 0',
backgroundColor: 'none',
borderWidth: '0px',
},
],
},
{
text: 'Disagree',
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: 'Agree',
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: 'Strongly 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,
],
valueBox: {
text: '%data-end%',
color: '#000',
fontSize: '12px',
fontWeight: 'normal',
offsetX: '40px',
placement: 'top-in',
visible: true,
width: '40px',
},
backgroundColor: '#918F87',
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,
'',
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: '1000px',
width: '100%',
});
