<!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>
.info {
padding: 1rem 0 0;
min-height: 680px;
background: #fff;
box-sizing: border-box;
}
.control-bar {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.control-bar.loaded {
display: flex !important;
opacity: 1;
}
.control-bar>div {
display: flex;
align-items: center;
}
.control-bar>*+* {
margin-left: 10px;
}
.control-bar span {
margin-left: 7px;
display: inline-block;
}
.control-bar select {
min-width: 45px;
height: 40px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 4px;
}
.control-bar .sel-wide {
min-width: 60px;
}
.control-bar button {
min-width: 45px;
height: 40px;
cursor: pointer;
color: #fff;
background: #074361;
border: 1px solid #074361;
border-radius: 4px;
}
.zc-body {
background-color: #fff;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div class="info">
<div data-jsref="control-bar" class="control-bar">
<div>
<span>Area Type: </span>
<select data-jsref="type">
<option value="area">Horizontal</option>
<option value="varea">Vertical</option>
<option value="area3d">3D (Horizontal)</option>
</select>
</div>
<div>
<span>with a </span>
<select data-jsref="aspect">
<option value="segmented">segmented</option>
<option value="spline">spline</option>
<option value="stepped">stepped</option>
</select>
<span>aspect and </span>
</div>
<div>
<select data-jsref="stacked">
<option value="false">no</option>
<option value="normal">normal</option>
<option value="100%">100%</option>
</select>
<span>stacking </span>
</div>
<button data-jsref="renderBtn">Render</button>
</div>
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
var controlBar = document.querySelector('[data-jsref="control-bar"]');
var type = document.querySelector('[data-jsref="type"]');
var aspect = document.querySelector('[data-jsref="aspect"]');
var stacked = document.querySelector('[data-jsref="stacked"]');
var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
// CHART CONFIG
// -----------------------------
var cdata = {
type: type.value,
plot: {
aspect: aspect.value,
},
series: [{
values: [20, 40, 25, 50, 15, 45, 33, 34]
},
{
values: [5, 30, 21, 18, 59, 50, 28, 33]
},
{
values: [30, 5, 18, 21, 33, 41, 29, 15]
}
]
};
renderBtn.addEventListener('click', render);
// HELPER FNS
// -----------------------------
zingchart.render({
id: chartId,
width: '100%',
height: 600,
data: cdata,
});
function render() {
var stackedVal = stacked.value != 'false' ? true : false;
var stackType = stacked.value != 'false' ? stacked.value : "none";
zingchart.exec('myChart', 'setcharttype', {
type: type.value
});
zingchart.exec('myChart', 'modify', {
object: 'plot',
data: {
aspect: aspect.value,
stacked: stackedVal,
'stack-type': stackType,
}
});
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body class="zc-body">
<div class="info">
<div data-jsref="control-bar" class="control-bar">
<div>
<span>Area Type: </span>
<select data-jsref="type">
<option value="area">Horizontal</option>
<option value="varea">Vertical</option>
<option value="area3d">3D (Horizontal)</option>
</select>
</div>
<div>
<span>with a </span>
<select data-jsref="aspect">
<option value="segmented">segmented</option>
<option value="spline">spline</option>
<option value="stepped">stepped</option>
</select>
<span>aspect and </span>
</div>
<div>
<select data-jsref="stacked">
<option value="false">no</option>
<option value="normal">normal</option>
<option value="100%">100%</option>
</select>
<span>stacking </span>
</div>
<button data-jsref="renderBtn">Render</button>
</div>
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
</body>
</html>
.info {
padding: 1rem 0 0;
min-height: 680px;
background: #fff;
box-sizing: border-box;
}
.control-bar {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.control-bar.loaded {
display: flex !important;
opacity: 1;
}
.control-bar>div {
display: flex;
align-items: center;
}
.control-bar>*+* {
margin-left: 10px;
}
.control-bar span {
margin-left: 7px;
display: inline-block;
}
.control-bar select {
min-width: 45px;
height: 40px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 4px;
}
.control-bar .sel-wide {
min-width: 60px;
}
.control-bar button {
min-width: 45px;
height: 40px;
cursor: pointer;
color: #fff;
background: #074361;
border: 1px solid #074361;
border-radius: 4px;
}
.zc-body {
background-color: #fff;
}
.zc-ref {
display: none;
}
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
var controlBar = document.querySelector('[data-jsref="control-bar"]');
var type = document.querySelector('[data-jsref="type"]');
var aspect = document.querySelector('[data-jsref="aspect"]');
var stacked = document.querySelector('[data-jsref="stacked"]');
var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
// CHART CONFIG
// -----------------------------
var cdata = {
type: type.value,
plot: {
aspect: aspect.value,
},
series: [{
values: [20, 40, 25, 50, 15, 45, 33, 34]
},
{
values: [5, 30, 21, 18, 59, 50, 28, 33]
},
{
values: [30, 5, 18, 21, 33, 41, 29, 15]
}
]
};
renderBtn.addEventListener('click', render);
// HELPER FNS
// -----------------------------
zingchart.render({
id: chartId,
width: '100%',
height: 600,
data: cdata,
});
function render() {
var stackedVal = stacked.value != 'false' ? true : false;
var stackType = stacked.value != 'false' ? stacked.value : "none";
zingchart.exec('myChart', 'setcharttype', {
type: type.value
});
zingchart.exec('myChart', 'modify', {
object: 'plot',
data: {
aspect: aspect.value,
stacked: stackedVal,
'stack-type': stackType,
}
});
}