<!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>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'bar',
backgroundColor: 'white',
title: {
text: 'Patient volume by payer:<br>Baseline vs. Scenario',
backgroundColor: 'none',
fontColor: 'black',
fontSize: '16px',
fontStyle: 'italic',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%v',
fontColor: '#fff',
placement: 'top-in',
},
stacked: true,
},
plotarea: {
margin: '55 20 40 50',
},
scaleX: {
values: ['Baseline', 'Scenario'],
guide: {
visible: false,
},
item: {
fontColor: '#616161',
fontSize: '16px',
},
lineColor: '#616161',
tick: {
lineColor: '#616161',
},
},
scaleY: {
guide: {
visible: false,
},
item: {
fontColor: '#616161',
fontSize: '12px',
},
lineColor: '#616161',
minValue: '0px',
step: 200,
thousandsSeparator: ',',
tick: {
lineColor: '#616161',
},
},
series: [{
values: [150, 90],
backgroundColor: '#00897b',
},
{
values: [250, 225],
backgroundColor: '#ffa000',
},
{
values: [160, 180],
backgroundColor: '#c2185b',
},
{
values: [400, 400],
backgroundColor: '#303f9f',
},
],
};
zingchart.node_click = (p) => {
let fieldVal = parseFloat(document.getElementById('newVal').value);
if (!isNaN(fieldVal)) {
let newNewVal =
parseFloat(document.getElementById('newVal').value) + p.value;
zingchart.exec('zc', 'setnodevalue', {
plotindex: p.plotindex,
nodeindex: p.nodeindex,
value: newNewVal,
});
}
};
zingchart.bind('zc', 'complete', (info) => {
// remove old lines (if any)
zingchart.exec(info.id, 'removeobject', {
type: 'shape',
cls: 'nodelink',
});
let iPlots = zingchart.exec(info.id, 'getplotlength');
// let's assume all plots have same number of nodes
let iNodes = zingchart.exec(info.id, 'getnodelength', {
plotindex: 0,
});
let aLines = [];
for (let n = 0; n < iNodes - 1; n++) {
for (let p = 0; p < iPlots; p++) {
let oNode1 = zingchart.exec(info.id, 'getobjectinfo', {
object: 'node',
plotindex: p,
nodeindex: n,
});
let oNode2 = zingchart.exec(info.id, 'getobjectinfo', {
object: 'node',
plotindex: p,
nodeindex: n + 1,
});
aLines.push({
type: 'line',
cls: 'nodelink',
lineWidth: '2px',
lineColor: '#212121',
points: [
[oNode1.x + oNode1.width / 2, oNode1.y],
[oNode2.x - oNode2.width / 2, oNode2.y],
],
});
}
}
zingchart.exec(info.id, 'addobject', {
type: 'shape',
data: aLines,
});
});
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
backgroundColor: 'white',
title: {
text: 'Patient volume by payer:<br>Baseline vs. Scenario',
backgroundColor: 'none',
fontColor: 'black',
fontSize: '16px',
fontStyle: 'italic',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%v',
fontColor: '#fff',
placement: 'top-in',
},
stacked: true,
},
plotarea: {
margin: '55 20 40 50',
},
scaleX: {
values: ['Baseline', 'Scenario'],
guide: {
visible: false,
},
item: {
fontColor: '#616161',
fontSize: '16px',
},
lineColor: '#616161',
tick: {
lineColor: '#616161',
},
},
scaleY: {
guide: {
visible: false,
},
item: {
fontColor: '#616161',
fontSize: '12px',
},
lineColor: '#616161',
minValue: '0px',
step: 200,
thousandsSeparator: ',',
tick: {
lineColor: '#616161',
},
},
series: [
{
values: [150, 90],
backgroundColor: '#00897b',
},
{
values: [250, 225],
backgroundColor: '#ffa000',
},
{
values: [160, 180],
backgroundColor: '#c2185b',
},
{
values: [400, 400],
backgroundColor: '#303f9f',
},
],
};
zingchart.node_click = (p) => {
let fieldVal = parseFloat(document.getElementById('newVal').value);
if (!isNaN(fieldVal)) {
let newNewVal =
parseFloat(document.getElementById('newVal').value) + p.value;
zingchart.exec('zc', 'setnodevalue', {
plotindex: p.plotindex,
nodeindex: p.nodeindex,
value: newNewVal,
});
}
};
zingchart.bind('zc', 'complete', (info) => {
// remove old lines (if any)
zingchart.exec(info.id, 'removeobject', {
type: 'shape',
cls: 'nodelink',
});
let iPlots = zingchart.exec(info.id, 'getplotlength');
// let's assume all plots have same number of nodes
let iNodes = zingchart.exec(info.id, 'getnodelength', {
plotindex: 0,
});
let aLines = [];
for (let n = 0; n < iNodes - 1; n++) {
for (let p = 0; p < iPlots; p++) {
let oNode1 = zingchart.exec(info.id, 'getobjectinfo', {
object: 'node',
plotindex: p,
nodeindex: n,
});
let oNode2 = zingchart.exec(info.id, 'getobjectinfo', {
object: 'node',
plotindex: p,
nodeindex: n + 1,
});
aLines.push({
type: 'line',
cls: 'nodelink',
lineWidth: '2px',
lineColor: '#212121',
points: [
[oNode1.x + oNode1.width / 2, oNode1.y],
[oNode2.x - oNode2.width / 2, oNode2.y],
],
});
}
}
zingchart.exec(info.id, 'addobject', {
type: 'shape',
data: aLines,
});
});
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
