<!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 = {
type: 'area',
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
item: {
fontSize: 10
}
},
scaleY: {
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
plotarea: {
adjustLayout: true
},
plot: {
animation: {
effect: 10,
method: 0,
sequence: 1,
speed: 1
},
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
aspect: 'spline',
marker: {
size: 3,
borderWidth: 0
}
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55],
lineColor: '#cc0052',
backgroundColor: '#cc0052',
marker: {
backgroundColor: '#cc0052'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#006622',
backgroundColor: '#cc0052 #006622',
marker: {
size: 2,
backgroundColor: '#cc0052'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#006622',
backgroundColor: '#006622',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [40, 49, 15, 21, 70, 51, 69],
lineColor: '#e6005c',
backgroundColor: '#e6005c',
marker: {
backgroundColor: '#e6005c'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00802b',
backgroundColor: '#e6005c #00802b',
marker: {
size: 2,
backgroundColor: '#e6005c'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00802b',
backgroundColor: '#00802b',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [33, 35, 17, 61, 66, 32, 35],
lineColor: '#ff0066',
backgroundColor: '#ff0066',
marker: {
backgroundColor: '#ff0066'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#009933',
backgroundColor: '#ff0066 #009933',
marker: {
size: 2,
backgroundColor: '#ff0066'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#009933',
backgroundColor: '#009933',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [21, 25, 59, 70, 81, 23, 61],
lineColor: '#ff1a75',
backgroundColor: '#ff1a75',
marker: {
backgroundColor: '#ff1a75'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00b33c',
backgroundColor: '#ff1a75 #00b33c',
marker: {
size: 2,
backgroundColor: '#ff1a75'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00b33c',
backgroundColor: '#00b33c',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [61, 81, 91, 30, 14, 26, 19],
lineColor: '#ff3385',
backgroundColor: '#ff3385',
marker: {
backgroundColor: '#ff3385'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00cc44',
backgroundColor: '#ff3385 #00cc44',
marker: {
size: 2,
backgroundColor: '#ff3385'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00cc44',
backgroundColor: '#00cc44',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [11, 19, 81, 40, 40, 81, 51],
lineColor: '#ff4d94',
backgroundColor: '#ff4d94',
marker: {
backgroundColor: '#ff4d94'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00e64d',
backgroundColor: '#ff4d94 #00e64d',
marker: {
size: 2,
backgroundColor: '#ff4d94'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00e64d',
backgroundColor: '#00e64d',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
}
]
};
// 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 = {
type: 'area',
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
item: {
fontSize: 10
}
},
scaleY: {
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
plotarea: {
adjustLayout: true
},
plot: {
animation: {
effect: 10,
method: 0,
sequence: 1,
speed: 1
},
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
aspect: 'spline',
marker: {
size: 3,
borderWidth: 0
}
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55],
lineColor: '#cc0052',
backgroundColor: '#cc0052',
marker: {
backgroundColor: '#cc0052'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#006622',
backgroundColor: '#cc0052 #006622',
marker: {
size: 2,
backgroundColor: '#cc0052'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#006622',
backgroundColor: '#006622',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [40, 49, 15, 21, 70, 51, 69],
lineColor: '#e6005c',
backgroundColor: '#e6005c',
marker: {
backgroundColor: '#e6005c'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00802b',
backgroundColor: '#e6005c #00802b',
marker: {
size: 2,
backgroundColor: '#e6005c'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00802b',
backgroundColor: '#00802b',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [33, 35, 17, 61, 66, 32, 35],
lineColor: '#ff0066',
backgroundColor: '#ff0066',
marker: {
backgroundColor: '#ff0066'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#009933',
backgroundColor: '#ff0066 #009933',
marker: {
size: 2,
backgroundColor: '#ff0066'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#009933',
backgroundColor: '#009933',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [21, 25, 59, 70, 81, 23, 61],
lineColor: '#ff1a75',
backgroundColor: '#ff1a75',
marker: {
backgroundColor: '#ff1a75'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00b33c',
backgroundColor: '#ff1a75 #00b33c',
marker: {
size: 2,
backgroundColor: '#ff1a75'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00b33c',
backgroundColor: '#00b33c',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [61, 81, 91, 30, 14, 26, 19],
lineColor: '#ff3385',
backgroundColor: '#ff3385',
marker: {
backgroundColor: '#ff3385'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00cc44',
backgroundColor: '#ff3385 #00cc44',
marker: {
size: 2,
backgroundColor: '#ff3385'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00cc44',
backgroundColor: '#00cc44',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
{
values: [11, 19, 81, 40, 40, 81, 51],
lineColor: '#ff4d94',
backgroundColor: '#ff4d94',
marker: {
backgroundColor: '#ff4d94'
},
mediaRules: [{
maxWidth: 500,
lineWidth: 1,
lineColor: '#00e64d',
backgroundColor: '#ff4d94 #00e64d',
marker: {
size: 2,
backgroundColor: '#ff4d94'
},
tooltip: {
text: '%t:<br>%v'
}
},
{
maxWidth: 300,
lineColor: '#00e64d',
backgroundColor: '#00e64d',
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
}
]
};
// 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();