<!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: 'scatter',
title: {
text: 'Tooltips at 100% width',
adjustLayout: true,
fontFamily: 'Georgia',
fontSize: 20,
mediaRules: [{
maxWidth: 500,
text: 'Tooltips at 500 pixels',
fontSize: 14
},
{
maxWidth: 300,
text: 'Tooltips at 300 pixels',
fontSize: 12,
fontWeight: 'normal'
}
]
},
plotarea: {
adjustLayout: true
},
plot: {
tooltip: {
text: '%t:<br>%v particles',
fontFamily: 'Georgia',
fontColor: '#333333',
fontAlpha: 1,
backgroundColor: 'white',
alpha: 0.8,
borderWidth: 1,
borderColor: '#ff6600',
borderRadius: '3px',
lineStyle: 'dashdot',
mediaRules: [{
maxWidth: 500,
fontSize: 11,
borderColor: '#ff66cc',
lineStyle: 'dotted'
},
{
maxWidth: 300,
fontSize: 10,
fontFamily: 'Arial',
borderColor: '#9933ff',
lineStyle: 'solid'
}
]
},
marker: {
size: 4,
},
hoverMarker: {
size: 6,
borderWidth: 1,
borderColor: 'white'
}
},
scaleX: {
values: '0:10:2',
decimals: 1,
item: {
fontSize: 10
},
guide: {
alpha: 1,
lineColor: '#bfbfbf',
lineStyle: 'solid'
},
minorTicks: 4,
minorGuide: {
alpha: 1,
lineColor: '#e6e6e6',
lineStyle: 'solid'
}
},
scaleY: {
values: '0:100:25',
item: {
fontSize: 10
},
guide: {
alpha: 1,
lineColor: '#bfbfbf',
lineStyle: 'solid'
},
minorTicks: 4,
minorGuide: {
alpha: 1,
lineColor: '#e6e6e6',
lineStyle: 'solid'
}
},
series: [{
values: [
[1, 9],
[2, 15],
[3, 21],
[4, 30],
[5, 40],
[6, 59],
[7, 60],
[8, 75],
[9, 81],
[10, 99]
],
marker: {
backgroundColor: '#006666'
},
text: 'Test 1-001A3'
},
{
values: [
[0.9, 3],
[2.1, 13],
[3.5, 25],
[4.9, 35],
[5.3, 41],
[6.5, 57],
[7.1, 61],
[8.7, 70],
[9.2, 82],
[9.9, 95]
],
marker: {
backgroundColor: '#006699'
},
text: 'Test 2-002B4'
},
{
values: [
[0.1, 9],
[1.8, 21],
[1.9, 29],
[4.1, 33],
[4.5, 39],
[6.9, 51],
[7.4, 64],
[8.9, 70],
[9, 75],
[9.3, 93]
],
marker: {
backgroundColor: '#0099cc'
},
text: 'Test 3-004C3'
},
{
values: [
[0.3, 11],
[0.9, 15],
[1.1, 24],
[2.3, 29],
[2.9, 30],
[3.3, 35],
[5.6, 67],
[6.9, 70],
[7.3, 71],
[8.9, 90]
],
marker: {
backgroundColor: '#0066cc'
},
text: 'Test 4-004D1'
},
{
values: [
[0.5, 5],
[1.9, 5],
[2.5, 10],
[3.1, 30],
[6.5, 45],
[6.9, 74],
[7.2, 50],
[7.8, 56],
[8, 61],
[8.5, 71]
],
marker: {
backgroundColor: '#0033cc'
},
text: 'Test 5-034CE'
}
]
};
// 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: 'scatter',
title: {
text: 'Tooltips at 100% width',
adjustLayout: true,
fontFamily: 'Georgia',
fontSize: 20,
mediaRules: [{
maxWidth: 500,
text: 'Tooltips at 500 pixels',
fontSize: 14
},
{
maxWidth: 300,
text: 'Tooltips at 300 pixels',
fontSize: 12,
fontWeight: 'normal'
}
]
},
plotarea: {
adjustLayout: true
},
plot: {
tooltip: {
text: '%t:<br>%v particles',
fontFamily: 'Georgia',
fontColor: '#333333',
fontAlpha: 1,
backgroundColor: 'white',
alpha: 0.8,
borderWidth: 1,
borderColor: '#ff6600',
borderRadius: '3px',
lineStyle: 'dashdot',
mediaRules: [{
maxWidth: 500,
fontSize: 11,
borderColor: '#ff66cc',
lineStyle: 'dotted'
},
{
maxWidth: 300,
fontSize: 10,
fontFamily: 'Arial',
borderColor: '#9933ff',
lineStyle: 'solid'
}
]
},
marker: {
size: 4,
},
hoverMarker: {
size: 6,
borderWidth: 1,
borderColor: 'white'
}
},
scaleX: {
values: '0:10:2',
decimals: 1,
item: {
fontSize: 10
},
guide: {
alpha: 1,
lineColor: '#bfbfbf',
lineStyle: 'solid'
},
minorTicks: 4,
minorGuide: {
alpha: 1,
lineColor: '#e6e6e6',
lineStyle: 'solid'
}
},
scaleY: {
values: '0:100:25',
item: {
fontSize: 10
},
guide: {
alpha: 1,
lineColor: '#bfbfbf',
lineStyle: 'solid'
},
minorTicks: 4,
minorGuide: {
alpha: 1,
lineColor: '#e6e6e6',
lineStyle: 'solid'
}
},
series: [{
values: [
[1, 9],
[2, 15],
[3, 21],
[4, 30],
[5, 40],
[6, 59],
[7, 60],
[8, 75],
[9, 81],
[10, 99]
],
marker: {
backgroundColor: '#006666'
},
text: 'Test 1-001A3'
},
{
values: [
[0.9, 3],
[2.1, 13],
[3.5, 25],
[4.9, 35],
[5.3, 41],
[6.5, 57],
[7.1, 61],
[8.7, 70],
[9.2, 82],
[9.9, 95]
],
marker: {
backgroundColor: '#006699'
},
text: 'Test 2-002B4'
},
{
values: [
[0.1, 9],
[1.8, 21],
[1.9, 29],
[4.1, 33],
[4.5, 39],
[6.9, 51],
[7.4, 64],
[8.9, 70],
[9, 75],
[9.3, 93]
],
marker: {
backgroundColor: '#0099cc'
},
text: 'Test 3-004C3'
},
{
values: [
[0.3, 11],
[0.9, 15],
[1.1, 24],
[2.3, 29],
[2.9, 30],
[3.3, 35],
[5.6, 67],
[6.9, 70],
[7.3, 71],
[8.9, 90]
],
marker: {
backgroundColor: '#0066cc'
},
text: 'Test 4-004D1'
},
{
values: [
[0.5, 5],
[1.9, 5],
[2.5, 10],
[3.1, 30],
[6.5, 45],
[6.9, 74],
[7.2, 50],
[7.8, 56],
[8, 61],
[8.5, 71]
],
marker: {
backgroundColor: '#0033cc'
},
text: 'Test 5-034CE'
}
]
};
// 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();