<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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"]; // full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
// Chart Data
let warrants = [3, 3, 4, 6, 4, 3, 3, 5, 6, 7, 9, 10];
let orders = [3, 3, 4, 7, 4, 3, 3, 7, 8, 9, 11, 12];
let subpoenas = [3, 3, 4, 6, 4, 3, 3, 9, 10, 12, 13, 14];
let usRequests = [3, 3, 4, 6, 4, 3, 3, 10, 11, 13, 14, 15];
let governmentRequests = [3, 3, 4, 6, 4, 3, 3, 11, 12, 14, 15, 20];
// Chart Configuration
let chartConfig = {
type: 'area',
globals: {
fontColor: '#333',
fontFamily: 'Poppins',
},
title: {
text: 'Government Requests by Volume',
align: 'center',
padding: '5px',
},
subtitle: {
text: 'This area graph shows the total number of requests received over time, broken down by request type',
align: 'center',
fontColor: '#505050',
padding: '10px',
},
legend: {
align: 'center',
border: 'none',
item: {
fontSize: '18px',
},
layout: '3x2',
marker: {
type: 'circle',
},
verticalAlign: 'bottom',
},
plot: {
tooltip: {
text: '%t:<br>%v Requests received between<br>July 2020 & June 2021',
backgroundColor: '#F7F9FA',
borderRadius: '4px',
callout: true,
fontColor: '#505050',
fontSize: '18px',
padding: '20px 35px',
},
aspect: 'spline',
},
scaleX: {
labels: [
'Jul 20',
'Aug 20',
'Sep 20',
'Oct 20',
'Nov 20',
'Dec 20',
'Jan 21',
'Feb 21',
'Mar 21',
'Apr 21',
'May 21',
'Jun 21',
],
},
scaleY: {
values: '0:16:2',
},
series: [{
text: 'Arrest Warrants',
values: warrants,
alphaArea: 1,
backgroundColor: '#62E9D8',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
lineWidth: '3px',
marker: {
size: '0px',
},
zIndex: 10,
},
{
text: ' Court Orders',
values: orders,
alphaArea: 1,
backgroundColor: '#70DE99',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 9,
},
{
text: 'Subpoenas',
values: subpoenas,
alphaArea: 1,
backgroundColor: '#B2DC93',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 8,
},
{
text: 'US Requests',
values: usRequests,
alphaArea: 1,
backgroundColor: '#FFE295',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 7,
},
{
text: 'Government Requests',
values: governmentRequests,
alphaArea: 1,
backgroundColor: '#FF9C85',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 6,
},
],
};
// Render Method
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
// Chart Data
let warrants = [3, 3, 4, 6, 4, 3, 3, 5, 6, 7, 9, 10];
let orders = [3, 3, 4, 7, 4, 3, 3, 7, 8, 9, 11, 12];
let subpoenas = [3, 3, 4, 6, 4, 3, 3, 9, 10, 12, 13, 14];
let usRequests = [3, 3, 4, 6, 4, 3, 3, 10, 11, 13, 14, 15];
let governmentRequests = [3, 3, 4, 6, 4, 3, 3, 11, 12, 14, 15, 20];
// Chart Configuration
let chartConfig = {
type: 'area',
globals: {
fontColor: '#333',
fontFamily: 'Poppins',
},
title: {
text: 'Government Requests by Volume',
align: 'center',
padding: '5px',
},
subtitle: {
text: 'This area graph shows the total number of requests received over time, broken down by request type',
align: 'center',
fontColor: '#505050',
padding: '10px',
},
legend: {
align: 'center',
border: 'none',
item: {
fontSize: '18px',
},
layout: '3x2',
marker: {
type: 'circle',
},
verticalAlign: 'bottom',
},
plot: {
tooltip: {
text: '%t:<br>%v Requests received between<br>July 2020 & June 2021',
backgroundColor: '#F7F9FA',
borderRadius: '4px',
callout: true,
fontColor: '#505050',
fontSize: '18px',
padding: '20px 35px',
},
aspect: 'spline',
},
scaleX: {
labels: [
'Jul 20',
'Aug 20',
'Sep 20',
'Oct 20',
'Nov 20',
'Dec 20',
'Jan 21',
'Feb 21',
'Mar 21',
'Apr 21',
'May 21',
'Jun 21',
],
},
scaleY: {
values: '0:16:2',
},
series: [
{
text: 'Arrest Warrants',
values: warrants,
alphaArea: 1,
backgroundColor: '#62E9D8',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
lineWidth: '3px',
marker: {
size: '0px',
},
zIndex: 10,
},
{
text: ' Court Orders',
values: orders,
alphaArea: 1,
backgroundColor: '#70DE99',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 9,
},
{
text: 'Subpoenas',
values: subpoenas,
alphaArea: 1,
backgroundColor: '#B2DC93',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 8,
},
{
text: 'US Requests',
values: usRequests,
alphaArea: 1,
backgroundColor: '#FFE295',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 7,
},
{
text: 'Government Requests',
values: governmentRequests,
alphaArea: 1,
backgroundColor: '#FF9C85',
hoverMarker: {
backgroundColor: '#fff',
borderColor: '#eee',
size: '10px',
},
lineColor: '#ffffff',
marker: {
size: '0px',
},
zIndex: 6,
},
],
};
// Render Method
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
