<!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>
.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"]; // DEFINE DATA
// -----------------------------
let chartData = [{
text: 'Undeclared',
values: [783, 672, 621, 466, 427, 315, 382, 299, 363, 363, 350, 213, 261, 287, 243],
lineColor: '#a6cee3',
marker: {
backgroundColor: '#a6cee3',
borderColor: '#a6cee3'
}
},
{
text: 'Salmonella',
values: [148, 137, 149, 134, 132, 136, 141, 115, 120, 146, 117, 118, 132, 114, 116],
lineColor: '#1f78b4',
marker: {
backgroundColor: '#1f78b4',
borderColor: '#1f78b4'
}
},
{
text: 'Norovirus',
values: [73, 199, 276, 305, 367, 285, 496, 283, 503, 321, 358, 198, 303, 224, 288],
lineColor: '#b2df8a',
marker: {
backgroundColor: '#b2df8a',
borderColor: '#b2df8a'
}
},
{
text: 'Vibrio',
values: [19, 12, 6, 6, 8, 9, 9, 6, 8, 1, 2, 2, 6, 8, 12],
lineColor: '#33a02c',
marker: {
backgroundColor: '#33a02c',
borderColor: '#33a02c'
}
},
{
text: 'E.coli',
values: [32, 31, 35, 24, 33, 26, 21, 23, 30, 44, 36, 36, 30, 28, 30],
lineColor: '#fb9a99',
marker: {
backgroundColor: '#fb9a99',
borderColor: '#fb9a99'
}
},
{
text: 'Hepatitis',
values: [12, 12, 12, 6, 7, 6, 2, 6, 5, 4, 1, 2, 3, 1, 0],
lineColor: '#e31a1c',
marker: {
backgroundColor: '#e31a1c',
borderColor: '#e31a1c'
}
},
{
text: 'Staphylococcus',
values: [39, 58, 63, 59, 64, 50, 39, 34, 29, 21, 14, 13, 10, 12, 8],
lineColor: '#fdbf6f',
marker: {
backgroundColor: '#fdbf6f',
borderColor: '#fdbf6f'
}
},
{
text: 'Clostridium',
values: [56, 53, 60, 61, 65, 52, 58, 42, 39, 50, 44, 30, 34, 23, 32],
lineColor: '#ff7f00',
marker: {
backgroundColor: '#ff7f00',
borderColor: '#ff7f00'
}
},
{
text: 'Campylobacter',
values: [15, 6, 15, 20, 22, 22, 15, 25, 27, 30, 26, 16, 28, 33, 38],
lineColor: '#cab2d6',
marker: {
backgroundColor: '#cab2d6',
borderColor: '#cab2d6'
}
},
{
text: 'Shigella',
values: [19, 15, 13, 16, 12, 14, 11, 8, 10, 11, 6, 4, 5, 4, 2],
lineColor: '#ffff99',
marker: {
backgroundColor: '#ffff99',
borderColor: '#ffff99'
}
},
{
text: 'Scombroid',
values: [33, 30, 35, 26, 27, 38, 29, 25, 30, 18, 9, 5, 10, 10, 15],
lineColor: '#6a3d9a',
marker: {
backgroundColor: '#6a3d9a',
borderColor: '#6a3d9a'
}
},
{
text: 'Yersinia',
values: [1, 1, 0, 3, 3, 1, 2, 0, 0, 0, 0, 0, 0, 1, 2],
lineColor: '#b15928',
marker: {
backgroundColor: '#b15928',
borderColor: '#b15928'
}
},
{
text: 'Bacillus',
values: [32, 32, 56, 62, 82, 65, 57, 40, 33, 41, 26, 12, 15, 10, 3]
},
{
text: 'Listeria',
values: [2, 5, 2, 2, 1, 2, 0, 4, 4, 1, 3, 2, 5, 5, 5]
},
{
text: 'Pesticides',
values: [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0]
},
{
text: 'Cyclospora',
values: [1, 2, 2, 2, 3, 0, 3, 5, 3, 0, 3, 1, 0, 2, 0]
},
{
text: 'Ciguatoxin',
values: [18, 15, 19, 26, 23, 18, 10, 10, 10, 14, 15, 10, 5, 15, 8]
},
{
text: 'Cryptosporidium',
values: [1, 0, 1, 0, 2, 2, 1, 0, 4, 4, 2, 0, 0, 4, 0]
},
{
text: 'Streptococcus',
values: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
},
{
text: 'Other',
values: [27, 53, 28, 11, 32, 38, 35, 33, 33, 13, 6, 4, 2, 17, 13]
}
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
theme: 'classic',
backgroundColor: 'white',
title: {
text: 'Yearly Outbreaks by Genus',
backgroundColor: 'white',
color: '#333',
textAlign: 'left',
width: '60%'
},
subtitle: {
text: 'Toggle a legend item to remove the series and adjust the scale. Use the preview to scale the y-axis.',
textAlign: 'left',
width: '60%'
},
legend: {
backgroundColor: 'white',
borderWidth: '2px',
item: {
cursor: 'hand'
},
layout: 'x1',
marker: {
borderWidth: '0px',
cursor: 'hand'
},
marginTop: '5%',
maxItems: 10,
overflow: "scroll",
shadow: false,
toggleAction: 'remove',
x: '80%',
y: '20%'
},
plot: {
backgroundMode: 'graph',
backgroundState: {
lineColor: '#eee',
},
lineWidth: '3px',
marker: {
size: '2px'
},
selectedState: {
lineWidth: '4px'
},
selectionMode: 'multiple'
},
plotarea: {
margin: '15% 25% 25% 7%'
},
scaleX: {
values: '1998:2012:1',
maxItems: 8
},
scaleY: {
zooming: true,
zoomTo: [0, 150],
lineColor: '#333'
},
preview: {},
tooltip: {
text: '%t: %v outbreaks in %k'
},
series: chartData
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let chartData = [
{
text: 'Undeclared',
values: [783, 672, 621, 466, 427, 315, 382, 299, 363, 363, 350, 213, 261, 287, 243],
lineColor: '#a6cee3',
marker: {
backgroundColor: '#a6cee3',
borderColor: '#a6cee3'
}
},
{
text: 'Salmonella',
values: [148, 137, 149, 134, 132, 136, 141, 115, 120, 146, 117, 118, 132, 114, 116],
lineColor: '#1f78b4',
marker: {
backgroundColor: '#1f78b4',
borderColor: '#1f78b4'
}
},
{
text: 'Norovirus',
values: [73, 199, 276, 305, 367, 285, 496, 283, 503, 321, 358, 198, 303, 224, 288],
lineColor: '#b2df8a',
marker: {
backgroundColor: '#b2df8a',
borderColor: '#b2df8a'
}
},
{
text: 'Vibrio',
values: [19, 12, 6, 6, 8, 9, 9, 6, 8, 1, 2, 2, 6, 8, 12],
lineColor: '#33a02c',
marker: {
backgroundColor: '#33a02c',
borderColor: '#33a02c'
}
},
{
text: 'E.coli',
values: [32, 31, 35, 24, 33, 26, 21, 23, 30, 44, 36, 36, 30, 28, 30],
lineColor: '#fb9a99',
marker: {
backgroundColor: '#fb9a99',
borderColor: '#fb9a99'
}
},
{
text: 'Hepatitis',
values: [12, 12, 12, 6, 7, 6, 2, 6, 5, 4, 1, 2, 3, 1, 0],
lineColor: '#e31a1c',
marker: {
backgroundColor: '#e31a1c',
borderColor: '#e31a1c'
}
},
{
text: 'Staphylococcus',
values: [39, 58, 63, 59, 64, 50, 39, 34, 29, 21, 14, 13, 10, 12, 8],
lineColor: '#fdbf6f',
marker: {
backgroundColor: '#fdbf6f',
borderColor: '#fdbf6f'
}
},
{
text: 'Clostridium',
values: [56, 53, 60, 61, 65, 52, 58, 42, 39, 50, 44, 30, 34, 23, 32],
lineColor: '#ff7f00',
marker: {
backgroundColor: '#ff7f00',
borderColor: '#ff7f00'
}
},
{
text: 'Campylobacter',
values: [15, 6, 15, 20, 22, 22, 15, 25, 27, 30, 26, 16, 28, 33, 38],
lineColor: '#cab2d6',
marker: {
backgroundColor: '#cab2d6',
borderColor: '#cab2d6'
}
},
{
text: 'Shigella',
values: [19, 15, 13, 16, 12, 14, 11, 8, 10, 11, 6, 4, 5, 4, 2],
lineColor: '#ffff99',
marker: {
backgroundColor: '#ffff99',
borderColor: '#ffff99'
}
},
{
text: 'Scombroid',
values: [33, 30, 35, 26, 27, 38, 29, 25, 30, 18, 9, 5, 10, 10, 15],
lineColor: '#6a3d9a',
marker: {
backgroundColor: '#6a3d9a',
borderColor: '#6a3d9a'
}
},
{
text: 'Yersinia',
values: [1, 1, 0, 3, 3, 1, 2, 0, 0, 0, 0, 0, 0, 1, 2],
lineColor: '#b15928',
marker: {
backgroundColor: '#b15928',
borderColor: '#b15928'
}
},
{
text: 'Bacillus',
values: [32, 32, 56, 62, 82, 65, 57, 40, 33, 41, 26, 12, 15, 10, 3]
},
{
text: 'Listeria',
values: [2, 5, 2, 2, 1, 2, 0, 4, 4, 1, 3, 2, 5, 5, 5]
},
{
text: 'Pesticides',
values: [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0]
},
{
text: 'Cyclospora',
values: [1, 2, 2, 2, 3, 0, 3, 5, 3, 0, 3, 1, 0, 2, 0]
},
{
text: 'Ciguatoxin',
values: [18, 15, 19, 26, 23, 18, 10, 10, 10, 14, 15, 10, 5, 15, 8]
},
{
text: 'Cryptosporidium',
values: [1, 0, 1, 0, 2, 2, 1, 0, 4, 4, 2, 0, 0, 4, 0]
},
{
text: 'Streptococcus',
values: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
},
{
text: 'Other',
values: [27, 53, 28, 11, 32, 38, 35, 33, 33, 13, 6, 4, 2, 17, 13]
}
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
theme: 'classic',
backgroundColor: 'white',
title: {
text: 'Yearly Outbreaks by Genus',
backgroundColor: 'white',
color: '#333',
textAlign: 'left',
width: '60%'
},
subtitle: {
text: 'Toggle a legend item to remove the series and adjust the scale. Use the preview to scale the y-axis.',
textAlign: 'left',
width: '60%'
},
legend: {
backgroundColor: 'white',
borderWidth: '2px',
item: {
cursor: 'hand'
},
layout: 'x1',
marker: {
borderWidth: '0px',
cursor: 'hand'
},
marginTop: '5%',
maxItems: 10,
overflow: "scroll",
shadow: false,
toggleAction: 'remove',
x: '80%',
y: '20%'
},
plot: {
backgroundMode: 'graph',
backgroundState: {
lineColor: '#eee',
},
lineWidth: '3px',
marker: {
size: '2px'
},
selectedState: {
lineWidth: '4px'
},
selectionMode: 'multiple'
},
plotarea: {
margin: '15% 25% 25% 7%'
},
scaleX: {
values: '1998:2012:1',
maxItems: 8
},
scaleY: {
zooming: true,
zoomTo: [0, 150],
lineColor: '#333'
},
preview: {},
tooltip: {
text: '%t: %v outbreaks in %k'
},
series: chartData
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
