<!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 chartData = [{
type: 'line',
values: [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
scales: 'scale-x,scale-y',
lineColor: '#0D47A1',
legendMarker: {
type: 'circle',
},
marker: {
backgroundColor: '#0D47A1',
},
},
{
type: 'line',
values: [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
scales: 'scale-x,scale-y-2',
lineColor: '#B71C1C',
tooltipText: '%v%',
legendMarker: {
type: 'circle',
},
marker: {
backgroundColor: '#B71C1C',
},
},
{
type: 'bar',
values: [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
scales: 'scale-x,scale-y-3',
backgroundColor: '#1B5E20',
tooltip: {
text: 'The number being shown is the percentage of the node when compared to its plot',
width: '200px',
wrapText: true,
},
valueBox: {
text: '%pper%',
decimals: 1,
fontAngle: 90,
fontColor: '#fff',
offsetY: '5px',
placement: 'top-in',
},
},
{
type: 'bar',
values: [
250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000,
250000, 220000, 240000,
],
scales: 'scale-x,scale-y-4',
backgroundColor: '#E65100',
text: 'Dell',
tooltip: {
text: 'The number being shown above the bar is the value of the node',
width: '200px',
wrapText: true,
},
valueBox: {
bold: true,
fontAngle: 90,
fontColor: '#fff',
offsetY: '5px',
placement: 'top-in',
short: true,
},
},
];
let chartConfig = {
type: 'mixed',
backgroundColor: 'white',
title: {
text: 'Chart Title',
align: 'left',
backgroundColor: '#BDBDBD',
fontSize: '14px',
height: '5%',
},
subtitle: {
text: 'Subtitle',
align: 'left',
backgroundColor: '#E0E0E0',
height: '4%',
offsetY: '-5px',
},
legend: {
alpha: 1,
draggable: true,
footer: {
text: '- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag',
fontSize: '8px',
},
header: {
text: 'Legend Info',
},
layout: 'x2',
maxItems: 2,
minimize: true,
overflow: 'page',
shadow: false,
width: '180px',
x: '74%',
y: '9.5%',
},
plotarea: {
margin: '34% 30% 10% 10%',
},
scaleX: {
values: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
guide: {
lineColor: '#BDBDBD',
lineStyle: 'solid',
},
label: {
text: 'X label',
},
markers: [{
type: 'area',
alpha: 0.5,
backgroundColor: '#66BB6A',
label: {
text: 'Active<br>Month',
angle: 0,
bold: true,
fontSize: '10px',
offsetY: '-240px',
},
range: [6.5, 7.5],
},
{
type: 'area',
alpha: 0.5,
backgroundColor: '#cccccc',
range: [7.5, 11.5],
},
],
zooming: true,
},
scaleX2: {
values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
guide: {
visible: false,
},
label: {
text: 'X-2 label',
},
zooming: true,
},
scaleY: {
guide: {
lineStyle: 'solid',
},
label: {
text: 'Y label',
},
markers: [{
type: 'line',
alpha: 1,
label: {
text: 'Threshold',
backgroundColor: '#212121',
callout: true,
calloutPosition: 'right',
fontColor: 'white',
fontSize: '10px',
offsetX: '-60px',
offsetY: '8px',
},
lineColor: '#212121',
lineWidth: '2px',
range: [74],
}, ],
minorGuide: {
alpha: 0.7,
lineGapSize: '6px',
lineSegementSize: '1px',
lineStyle: 'dashed',
lineWidth: '1px',
},
minorTick: {
placement: 'cross',
size: '6px',
},
minorTicks: 3,
zooming: true,
},
scaleY2: {
values: '0:100:10',
format: '%v%',
guide: {
visible: false,
},
label: {
text: 'Y-2 label',
},
zooming: true,
},
scaleY3: {
values: '0:50:10',
decimals: 2,
guide: {
visible: false,
},
label: {
text: 'Y-3 label',
},
zooming: true,
},
scaleY4: {
values: '0:1000000:100000',
format: '$%v',
guide: {
visible: false,
},
label: {
text: 'Y-4 label',
},
multiplier: true,
zooming: true,
},
crosshairX: {
plotLabel: {
visible: false,
},
},
labels: [{
text: 'View External<br>Report',
url: 'https://www.zingchart.com/pricing',
target: '_blank',
padding: '5px',
backgroundColor: '#ccc',
borderRadius: '3px',
callout: true,
calloutHeight: '10px',
calloutWidth: '15px',
fontColor: '#000',
hook: 'node:plot=2,index=4',
offsetY: '-35px',
underline: true,
}, ],
source: {
text: 'Source: www.zingchart.com',
fontColor: '#B71C1C',
},
zoom: {
alpha: 0.2,
backgroundColor: '#B71C1C',
label: {
borderColor: '#B71C1C',
visible: true,
},
},
scrollX: {
bar: {
backgroundColor: '#757575',
height: '8px',
},
handle: {
backgroundColor: '#E0E0E0',
height: '4px',
offsetY: '-1px',
},
},
scrollY: {
bar: {
width: '8px',
backgroundColor: '#757575',
},
handle: {
backgroundColor: '#E0E0E0',
offsetX: '-1px',
width: '4px',
},
},
preview: {
position: '14% 14%',
width: '69%',
height: '50px',
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartData = [
{
type: 'line',
values: [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
scales: 'scale-x,scale-y',
lineColor: '#0D47A1',
legendMarker: {
type: 'circle',
},
marker: {
backgroundColor: '#0D47A1',
},
},
{
type: 'line',
values: [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
scales: 'scale-x,scale-y-2',
lineColor: '#B71C1C',
tooltipText: '%v%',
legendMarker: {
type: 'circle',
},
marker: {
backgroundColor: '#B71C1C',
},
},
{
type: 'bar',
values: [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
scales: 'scale-x,scale-y-3',
backgroundColor: '#1B5E20',
tooltip: {
text: 'The number being shown is the percentage of the node when compared to its plot',
width: '200px',
wrapText: true,
},
valueBox: {
text: '%pper%',
decimals: 1,
fontAngle: 90,
fontColor: '#fff',
offsetY: '5px',
placement: 'top-in',
},
},
{
type: 'bar',
values: [
250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000,
250000, 220000, 240000,
],
scales: 'scale-x,scale-y-4',
backgroundColor: '#E65100',
text: 'Dell',
tooltip: {
text: 'The number being shown above the bar is the value of the node',
width: '200px',
wrapText: true,
},
valueBox: {
bold: true,
fontAngle: 90,
fontColor: '#fff',
offsetY: '5px',
placement: 'top-in',
short: true,
},
},
];
let chartConfig = {
type: 'mixed',
backgroundColor: 'white',
title: {
text: 'Chart Title',
align: 'left',
backgroundColor: '#BDBDBD',
fontSize: '14px',
height: '5%',
},
subtitle: {
text: 'Subtitle',
align: 'left',
backgroundColor: '#E0E0E0',
height: '4%',
offsetY: '-5px',
},
legend: {
alpha: 1,
draggable: true,
footer: {
text: '- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag',
fontSize: '8px',
},
header: {
text: 'Legend Info',
},
layout: 'x2',
maxItems: 2,
minimize: true,
overflow: 'page',
shadow: false,
width: '180px',
x: '74%',
y: '9.5%',
},
plotarea: {
margin: '34% 30% 10% 10%',
},
scaleX: {
values: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
guide: {
lineColor: '#BDBDBD',
lineStyle: 'solid',
},
label: {
text: 'X label',
},
markers: [
{
type: 'area',
alpha: 0.5,
backgroundColor: '#66BB6A',
label: {
text: 'Active<br>Month',
angle: 0,
bold: true,
fontSize: '10px',
offsetY: '-240px',
},
range: [6.5, 7.5],
},
{
type: 'area',
alpha: 0.5,
backgroundColor: '#cccccc',
range: [7.5, 11.5],
},
],
zooming: true,
},
scaleX2: {
values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
guide: {
visible: false,
},
label: {
text: 'X-2 label',
},
zooming: true,
},
scaleY: {
guide: {
lineStyle: 'solid',
},
label: {
text: 'Y label',
},
markers: [
{
type: 'line',
alpha: 1,
label: {
text: 'Threshold',
backgroundColor: '#212121',
callout: true,
calloutPosition: 'right',
fontColor: 'white',
fontSize: '10px',
offsetX: '-60px',
offsetY: '8px',
},
lineColor: '#212121',
lineWidth: '2px',
range: [74],
},
],
minorGuide: {
alpha: 0.7,
lineGapSize: '6px',
lineSegementSize: '1px',
lineStyle: 'dashed',
lineWidth: '1px',
},
minorTick: {
placement: 'cross',
size: '6px',
},
minorTicks: 3,
zooming: true,
},
scaleY2: {
values: '0:100:10',
format: '%v%',
guide: {
visible: false,
},
label: {
text: 'Y-2 label',
},
zooming: true,
},
scaleY3: {
values: '0:50:10',
decimals: 2,
guide: {
visible: false,
},
label: {
text: 'Y-3 label',
},
zooming: true,
},
scaleY4: {
values: '0:1000000:100000',
format: '$%v',
guide: {
visible: false,
},
label: {
text: 'Y-4 label',
},
multiplier: true,
zooming: true,
},
crosshairX: {
plotLabel: {
visible: false,
},
},
labels: [
{
text: 'View External<br>Report',
url: 'https://www.zingchart.com/pricing',
target: '_blank',
padding: '5px',
backgroundColor: '#ccc',
borderRadius: '3px',
callout: true,
calloutHeight: '10px',
calloutWidth: '15px',
fontColor: '#000',
hook: 'node:plot=2,index=4',
offsetY: '-35px',
underline: true,
},
],
source: {
text: 'Source: www.zingchart.com',
fontColor: '#B71C1C',
},
zoom: {
alpha: 0.2,
backgroundColor: '#B71C1C',
label: {
borderColor: '#B71C1C',
visible: true,
},
},
scrollX: {
bar: {
backgroundColor: '#757575',
height: '8px',
},
handle: {
backgroundColor: '#E0E0E0',
height: '4px',
offsetY: '-1px',
},
},
scrollY: {
bar: {
width: '8px',
backgroundColor: '#757575',
},
handle: {
backgroundColor: '#E0E0E0',
offsetX: '-1px',
width: '4px',
},
},
preview: {
position: '14% 14%',
width: '69%',
height: '50px',
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
