<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 600px;
}
.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"];
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// VARS
// -----------------------------
var i, iSum1 = 0,
iSum2 = 0,
iSum3 = 0,
iMed1, iMed2, iMed3, aData = [
[],
[],
[],
[]
];
// CHART DATA
// -----------------------------
var aCountries = [
'Ireland', 'Mexico', 'United States', 'Dominican Republic', 'Venezuela', 'Flanders', 'Switzerland', 'New Zealand',
'Northern Ireland', 'Netherlands', 'Australia', 'Great Britain', 'Norway', 'Sweden', 'Uruguay', 'Poland', 'Denmark',
'Austria', 'Philippines', 'Germany-West', 'Taiwan', 'Spain', 'Israel,Jews', 'Japan', 'Croatia', 'Finland',
'Israel,Arabs', 'Chile', 'Portugal', 'Slovenia', 'Cyprus', 'France', 'Germany-Est', 'South Korea', 'Italy',
'South Africa', 'Slovak Republic', 'Czech Republic', 'Russia', 'Hungary', 'Latvia', 'Ukraine', 'Turkey', 'Mean...'
];
for (i = 0; i < (aCountries.length - 1); i++) {
var r1 = rand(5, 40);
var r2 = rand(35, 70);
var r3 = rand(65, 95);
iSum1 += r1;
iSum2 += r2;
iSum3 += r3;
aData[0].push([i, r1]);
aData[1].push([i, r2]);
aData[2].push([i, r3]);
}
iMed1 = parseFloat((iSum1 / (aCountries.length - 1)).toFixed(1));
iMed2 = parseFloat((iSum2 / (aCountries.length - 1)).toFixed(1));
iMed3 = parseFloat((iSum3 / (aCountries.length - 1)).toFixed(1));
aData[0].push([aCountries.length - 1, iMed1]);
aData[1].push([aCountries.length - 1, iMed2]);
aData[2].push([aCountries.length - 1, iMed3]);
// CHART CONFIG
// -----------------------------
var chartConfig = {
"graphset": [{
"type": "hscatter",
"background-color": "#FFF",
"plotarea": {
"margin": "80 20 70 130"
},
"title": {
"text": "Religious Involvement, Self-assessed Religiosity and Happiness",
"font-size": 16,
"font-weight": "bold",
"padding-left": 20,
"align": "left"
},
"subtitle": {
"text": "(Mean values scaled from 0 to 100, *random data)",
"font-size": 13,
"font-weight": "normal",
"font-style": "italic",
"padding": "0 0 0 20",
"align": "left"
},
"legend": {
"layout": "float",
"margin": "auto auto 15 120",
"border-width": 0,
"marker": {
"type": "inherit"
},
"item": {
"font-size": 12
}
},
"scale-x": {
"values": aCountries,
"max-items": 999,
"items-overlap": true,
"mirrored": true,
"item": {
"color": "#000",
"font-weight": "normal",
"font-size": 11
},
"guide": {
"visible": true
},
"tick": {
"visible": true
}
},
"scale-y": {
"minValue": 0,
"maxValue": 100,
"step": 20,
"markers": [{
"type": "line",
"line-width": 8,
"alpha": 0.25,
"line-color": "#3A3AA2",
"range": [iMed1]
},
{
"type": "line",
"line-width": 8,
"alpha": 0.25,
"line-color": "#FDBD49",
"range": [iMed2]
},
{
"type": "line",
"line-width": 8,
"alpha": 0.25,
"line-color": "#843939",
"range": [iMed3]
}
],
"item": {
"color": "#000",
"font-weight": "normal",
"font-size": 11
},
"guide": {
"visible": false
},
"tick": {
"visible": true
}
},
"scale-y-2": {
"minValue": 0,
"maxValue": 100,
"step": 20,
"item": {
"color": "#000",
"font-weight": "normal",
"font-size": 11
},
"guide": {
"visible": false
},
"tick": {
"visible": true
}
},
"series": [{
"values": aData[0],
"text": "Religious Involvement",
"scales": "scale-x,scale-y",
"marker": {
"background-color": "#3A3AA2",
"border-width": 0,
"type": "square",
"size": 4
}
},
{
"values": aData[1],
"text": "Self-assessed Religiosity",
"scales": "scale-x,scale-y-2",
"marker": {
"background-color": "#FDBD49",
"border-width": 0,
"type": "triangle",
"size": 4
}
},
{
"values": aData[2],
"text": "Happiness",
"scales": "scale-x,scale-y",
"marker": {
"background-color": "#843939",
"border-width": 0,
"size": 4
}
}
]
}]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
width: '100%',
height: 800,
output: 'svg',
data: chartConfig
});
// HELPER FNS
// -----------------------------
function rand(min, max) {
return Math.round(min + (max - min) * Math.random());
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// VARS
// -----------------------------
var i, iSum1 = 0, iSum2 = 0, iSum3 = 0, iMed1, iMed2, iMed3, aData = [[],[],[],[]];
// CHART DATA
// -----------------------------
var aCountries = [
'Ireland', 'Mexico', 'United States', 'Dominican Republic', 'Venezuela', 'Flanders', 'Switzerland', 'New Zealand',
'Northern Ireland', 'Netherlands', 'Australia', 'Great Britain', 'Norway', 'Sweden', 'Uruguay', 'Poland', 'Denmark',
'Austria', 'Philippines', 'Germany-West', 'Taiwan', 'Spain', 'Israel,Jews', 'Japan', 'Croatia', 'Finland',
'Israel,Arabs', 'Chile', 'Portugal', 'Slovenia', 'Cyprus', 'France', 'Germany-Est', 'South Korea', 'Italy',
'South Africa', 'Slovak Republic', 'Czech Republic', 'Russia', 'Hungary', 'Latvia', 'Ukraine', 'Turkey', 'Mean...'
];
for(i=0;i<(aCountries.length-1);i++) {
var r1 = rand(5, 40);
var r2 = rand(35, 70);
var r3 = rand(65, 95);
iSum1 += r1;
iSum2 += r2;
iSum3 += r3;
aData[0].push([i, r1]);
aData[1].push([i, r2]);
aData[2].push([i, r3]);
}
iMed1 = parseFloat((iSum1/(aCountries.length-1)).toFixed(1));
iMed2 = parseFloat((iSum2/(aCountries.length-1)).toFixed(1));
iMed3 = parseFloat((iSum3/(aCountries.length-1)).toFixed(1));
aData[0].push([aCountries.length-1, iMed1]);
aData[1].push([aCountries.length-1, iMed2]);
aData[2].push([aCountries.length-1, iMed3]);
// CHART CONFIG
// -----------------------------
var chartConfig = {
"graphset":[
{
"type" : "hscatter",
"background-color" : "#FFF",
"plotarea":{
"margin" : "80 20 70 130"
},
"title":{
"text" : "Religious Involvement, Self-assessed Religiosity and Happiness",
"font-size" : 16,
"font-weight" : "bold",
"padding-left" : 20,
"align" : "left"
},
"subtitle":{
"text" : "(Mean values scaled from 0 to 100, *random data)",
"font-size" : 13,
"font-weight" : "normal",
"font-style" : "italic",
"padding" : "0 0 0 20",
"align" : "left"
},
"legend":{
"layout" : "float",
"margin" : "auto auto 15 120",
"border-width" : 0,
"marker" : {
"type" : "inherit"
},
"item":{
"font-size" : 12
}
},
"scale-x":{
"values" : aCountries,
"max-items" : 999,
"items-overlap" : true,
"mirrored" : true,
"item":{
"color" : "#000",
"font-weight" : "normal",
"font-size" : 11
},
"guide":{
"visible" : true
},
"tick":{
"visible" : true
}
},
"scale-y":{
"minValue" : 0,
"maxValue" : 100,
"step" : 20,
"markers":[
{
"type" : "line",
"line-width" : 8,
"alpha" : 0.25,
"line-color" : "#3A3AA2",
"range" : [iMed1]
},
{
"type" : "line",
"line-width" : 8,
"alpha" : 0.25,
"line-color" : "#FDBD49",
"range" : [iMed2]
},
{
"type" : "line",
"line-width" : 8,
"alpha" : 0.25,
"line-color" : "#843939",
"range" : [iMed3]
}
],
"item":{
"color" : "#000",
"font-weight" : "normal",
"font-size" : 11
},
"guide":{
"visible" : false
},
"tick":{
"visible" : true
}
},
"scale-y-2":{
"minValue" : 0,
"maxValue" : 100,
"step" : 20,
"item":{
"color" : "#000",
"font-weight" : "normal",
"font-size" : 11
},
"guide":{
"visible" : false
},
"tick":{
"visible" : true
}
},
"series":[
{
"values" : aData[0],
"text" : "Religious Involvement",
"scales" : "scale-x,scale-y",
"marker":{
"background-color" : "#3A3AA2",
"border-width" : 0,
"type" : "square",
"size" : 4
}
},
{
"values" : aData[1],
"text" : "Self-assessed Religiosity",
"scales" : "scale-x,scale-y-2",
"marker":{
"background-color" : "#FDBD49",
"border-width" : 0,
"type" : "triangle",
"size" : 4
}
},
{
"values" : aData[2],
"text" : "Happiness",
"scales" : "scale-x,scale-y",
"marker":{
"background-color" : "#843939",
"border-width" : 0,
"size" : 4
}
}
]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id : chartId,
width : '100%',
height : 800,
output : 'svg',
data : chartConfig
});
// HELPER FNS
// -----------------------------
function rand(min, max) {
return Math.round(min + (max-min)*Math.random());
}
