<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
graphset: [{
type: 'area',
title: {
text: 'Responsive Charting',
adjustLayout: true,
fontFamily: 'Georgia',
fontSize: 20,
mediaRules: [{
maxWidth: 600,
fontSize: 12
},
{
maxWidth: 400,
fontWeight: 'normal'
}
]
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: '4x2',
borderWidth: 1,
header: {
text: 'Legend',
textAlign: 'center',
fontSize: 12
},
marker: {
type: 'circle',
borderWidth: 0,
showLine: true,
size: 3
},
mediaRules: [{
maxWidth: 600,
layout: '8x1',
header: {
visible: false
},
item: {
fontSize: 10
},
marker: {
size: 2,
lineWidth: 1
}
},
{
maxWidth: 400,
align: 'center',
verticalAlign: 'bottom',
layout: '2x4',
item: {
maxChars: 3,
margin: 0
},
tooltip: {
text: '%t',
borderRadius: '3px'
}
}
]
},
plotarea: {
adjustLayout: true
},
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
mediaRules: [{
maxWidth: 600,
item: {
fontSize: 10
}
},
{
maxWidth: 400,
labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
item: {
fontSize: 10
}
}
]
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 600,
item: {
fontSize: 10
}
},
{
maxWidth: 400,
item: {
fontSize: 10
}
}
]
},
plot: {
animation: {
effect: 10,
method: 0,
sequence: 1,
speed: 1
},
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
aspect: 'spline',
marker: {
size: 3,
borderWidth: 0
},
mediaRules: [{
maxWidth: 600,
lineWidth: 1,
marker: {
size: 2
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 400,
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55],
text: 'Alpha',
lineColor: '#1B4F72',
backgroundColor: '#1B4F72',
marker: {
backgroundColor: '#1B4F72'
}
},
{
values: [40, 49, 15, 21, 70, 51, 69],
text: 'Beta',
lineColor: '#21618C',
backgroundColor: '#21618C',
marker: {
backgroundColor: '#21618C'
}
},
{
values: [33, 35, 17, 61, 66, 32, 35],
text: 'Gamma',
lineColor: '#2874A6',
backgroundColor: '#2874A6',
marker: {
backgroundColor: '#2874A6'
}
},
{
values: [21, 25, 59, 70, 81, 23, 61],
text: 'Delta',
lineColor: '#2E86C1',
backgroundColor: '#2E86C1',
marker: {
backgroundColor: '#2E86C1'
}
},
{
values: [61, 81, 91, 30, 14, 26, 19],
text: 'Epsilon',
lineColor: '#3498DB',
backgroundColor: '#3498DB',
marker: {
backgroundColor: '#3498DB'
}
},
{
values: [50, 95, 88, 77, 66, 55, 79],
text: 'Zeta',
lineColor: '#5DADE2',
backgroundColor: '#5DADE2',
marker: {
backgroundColor: '#5DADE2'
}
},
{
values: [11, 19, 81, 40, 40, 81, 51],
text: 'Eta',
lineColor: '#85C1E9',
backgroundColor: '#85C1E9',
marker: {
backgroundColor: '#85C1E9'
}
},
{
values: [81, 30, 91, 85, 51, 88, 71],
text: 'Theta',
lineColor: '#AED6F1',
backgroundColor: '#AED6F1',
marker: {
backgroundColor: '#AED6F1'
}
}
]
}]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
</body>
</html>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
let chartConfig = {
graphset: [{
type: 'area',
title: {
text: 'Responsive Charting',
adjustLayout: true,
fontFamily: 'Georgia',
fontSize: 20,
mediaRules: [{
maxWidth: 600,
fontSize: 12
},
{
maxWidth: 400,
fontWeight: 'normal'
}
]
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: '4x2',
borderWidth: 1,
header: {
text: 'Legend',
textAlign: 'center',
fontSize: 12
},
marker: {
type: 'circle',
borderWidth: 0,
showLine: true,
size: 3
},
mediaRules: [{
maxWidth: 600,
layout: '8x1',
header: {
visible: false
},
item: {
fontSize: 10
},
marker: {
size: 2,
lineWidth: 1
}
},
{
maxWidth: 400,
align: 'center',
verticalAlign: 'bottom',
layout: '2x4',
item: {
maxChars: 3,
margin: 0
},
tooltip: {
text: '%t',
borderRadius: '3px'
}
}
]
},
plotarea: {
adjustLayout: true
},
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
mediaRules: [{
maxWidth: 600,
item: {
fontSize: 10
}
},
{
maxWidth: 400,
labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
item: {
fontSize: 10
}
}
]
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 600,
item: {
fontSize: 10
}
},
{
maxWidth: 400,
item: {
fontSize: 10
}
}
]
},
plot: {
animation: {
effect: 10,
method: 0,
sequence: 1,
speed: 1
},
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
aspect: 'spline',
marker: {
size: 3,
borderWidth: 0
},
mediaRules: [{
maxWidth: 600,
lineWidth: 1,
marker: {
size: 2
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 400,
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55],
text: 'Alpha',
lineColor: '#1B4F72',
backgroundColor: '#1B4F72',
marker: {
backgroundColor: '#1B4F72'
}
},
{
values: [40, 49, 15, 21, 70, 51, 69],
text: 'Beta',
lineColor: '#21618C',
backgroundColor: '#21618C',
marker: {
backgroundColor: '#21618C'
}
},
{
values: [33, 35, 17, 61, 66, 32, 35],
text: 'Gamma',
lineColor: '#2874A6',
backgroundColor: '#2874A6',
marker: {
backgroundColor: '#2874A6'
}
},
{
values: [21, 25, 59, 70, 81, 23, 61],
text: 'Delta',
lineColor: '#2E86C1',
backgroundColor: '#2E86C1',
marker: {
backgroundColor: '#2E86C1'
}
},
{
values: [61, 81, 91, 30, 14, 26, 19],
text: 'Epsilon',
lineColor: '#3498DB',
backgroundColor: '#3498DB',
marker: {
backgroundColor: '#3498DB'
}
},
{
values: [50, 95, 88, 77, 66, 55, 79],
text: 'Zeta',
lineColor: '#5DADE2',
backgroundColor: '#5DADE2',
marker: {
backgroundColor: '#5DADE2'
}
},
{
values: [11, 19, 81, 40, 40, 81, 51],
text: 'Eta',
lineColor: '#85C1E9',
backgroundColor: '#85C1E9',
marker: {
backgroundColor: '#85C1E9'
}
},
{
values: [81, 30, 91, 85, 51, 88, 71],
text: 'Theta',
lineColor: '#AED6F1',
backgroundColor: '#AED6F1',
marker: {
backgroundColor: '#AED6F1'
}
}
]
}]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();