<!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: 300px;
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"];
var myConfig = {
type: 'line',
backgroundColor: '#eaf5d6',
mediaRules: [{
maxWidth: 500,
backgroundColor: '#cbe698'
},
{
maxWidth: 300,
backgroundColor: '#acd75b'
}
],
title: {
text: 'Responsive Line Chart',
adjustLayout: true, //automatically adjusts the layout of the object, in relation to other objects
fontFamily: 'Georgia',
backgroundColor: '#d4eef7',
fontSize: 20,
mediaRules: [{
maxWidth: 500,
backgroundColor: '#93d5eb',
fontSize: 12
},
{
maxWidth: 300,
visible: false //removes the title object at this breakpoint
}
]
},
legend: {
align: 'right',
verticalAlign: 'middle',
//the above attributes also automatically adjust the layout of the object, in relation to other objects
layout: '4x2',
borderWidth: 1,
backgroundColor: '#d4eef7',
header: {
text: 'Legend',
textAlign: 'center',
fontSize: 12
},
marker: {
type: 'circle',
showLine: true,
size: 4
},
mediaRules: [{
maxWidth: 500,
layout: '8x1',
backgroundColor: '#93d5eb',
header: {
visible: false
},
item: {
fontSize: 10,
margin: 1
},
marker: {
size: 3,
}
},
{
maxWidth: 300,
visible: false //removes the legend object at this breakpoint
}
]
},
plotarea: {
adjustLayout: true, //automatically adjusts the layout of the object, in relation to other objects
backgroundColor: '#d4eef7',
mediaRules: [{
maxWidth: 500,
backgroundColor: '#93d5eb'
},
{
maxWidth: 300,
backgroundColor: '#53bcdf'
}
]
},
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
}
},
{
maxWidth: 300,
labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
item: {
fontSize: 10
}
}
]
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
}
},
{
maxWidth: 300,
item: {
fontSize: 10
}
}
]
},
plot: {
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
mediaRules: [{
maxWidth: 500,
marker: {
size: 3
},
tooltip: {
text: '%t:<br>%v',
fontSize: 10
}
},
{
maxWidth: 300,
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55]
},
{
values: [40, 49, 15, 21, 70, 51, 69]
},
{
values: [33, 35, 17, 61, 66, 32, 35]
},
{
values: [21, 25, 59, 70, 81, 23, 61]
},
{
values: [61, 81, 91, 30, 14, 26, 19]
},
{
values: [50, 95, 88, 77, 66, 55, 79]
},
{
values: [11, 19, 81, 40, 40, 81, 51]
},
{
values: [81, 30, 91, 85, 51, 88, 71]
}
]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: myConfig,
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: 300px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
var myConfig = {
type: 'line',
backgroundColor: '#eaf5d6',
mediaRules: [{
maxWidth: 500,
backgroundColor: '#cbe698'
},
{
maxWidth: 300,
backgroundColor: '#acd75b'
}
],
title: {
text: 'Responsive Line Chart',
adjustLayout: true, //automatically adjusts the layout of the object, in relation to other objects
fontFamily: 'Georgia',
backgroundColor: '#d4eef7',
fontSize: 20,
mediaRules: [{
maxWidth: 500,
backgroundColor: '#93d5eb',
fontSize: 12
},
{
maxWidth: 300,
visible: false //removes the title object at this breakpoint
}
]
},
legend: {
align: 'right',
verticalAlign: 'middle',
//the above attributes also automatically adjust the layout of the object, in relation to other objects
layout: '4x2',
borderWidth: 1,
backgroundColor: '#d4eef7',
header: {
text: 'Legend',
textAlign: 'center',
fontSize: 12
},
marker: {
type: 'circle',
showLine: true,
size: 4
},
mediaRules: [{
maxWidth: 500,
layout: '8x1',
backgroundColor: '#93d5eb',
header: {
visible: false
},
item: {
fontSize: 10,
margin: 1
},
marker: {
size: 3,
}
},
{
maxWidth: 300,
visible: false //removes the legend object at this breakpoint
}
]
},
plotarea: {
adjustLayout: true, //automatically adjusts the layout of the object, in relation to other objects
backgroundColor: '#d4eef7',
mediaRules: [{
maxWidth: 500,
backgroundColor: '#93d5eb'
},
{
maxWidth: 300,
backgroundColor: '#53bcdf'
}
]
},
scaleX: {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
}
},
{
maxWidth: 300,
labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
item: {
fontSize: 10
}
}
]
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 500,
item: {
fontSize: 10
}
},
{
maxWidth: 300,
item: {
fontSize: 10
}
}
]
},
plot: {
tooltip: {
text: '%t: %v',
borderRadius: '3px'
},
mediaRules: [{
maxWidth: 500,
marker: {
size: 3
},
tooltip: {
text: '%t:<br>%v',
fontSize: 10
}
},
{
maxWidth: 300,
marker: {
visible: false
},
tooltip: {
text: '%v'
}
}
]
},
series: [{
values: [31, 66, 35, 33, 59, 61, 55]
},
{
values: [40, 49, 15, 21, 70, 51, 69]
},
{
values: [33, 35, 17, 61, 66, 32, 35]
},
{
values: [21, 25, 59, 70, 81, 23, 61]
},
{
values: [61, 81, 91, 30, 14, 26, 19]
},
{
values: [50, 95, 88, 77, 66, 55, 79]
},
{
values: [11, 19, 81, 40, 40, 81, 51]
},
{
values: [81, 30, 91, 85, 51, 88, 71]
}
]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();