<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #F7F7F7;
}
.chart--container {
width: 100%;
height: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: "scatter",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sine Wave'
},
plot: {
_maxTrackers: 0,
selectionMode: "none", // turn off normal selection
marker: {
borderWidth: 0
},
selectedMarker: {
size: 9,
borderWidth: 1,
borderColor: '#000',
},
hoverMarker: {
size: 7
},
tooltip: {
backgroundColor: '#FFF',
fontColor: '#000',
fontSize: 14,
borderRadius: 4,
borderWidth: 1,
borderColor: '#000',
text: '%t: %v',
selectedState: {
borderWidth: 2,
fontSize: 16
}
}
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
visible: false
},
scaleY: {
minValue: -2,
maxValue: 2,
step: 1,
guide: {
visible: false
},
lineColor: '#90CAF9',
lineWidth: 2,
refLine: {
lineColor: '#90CAF9',
lineWidth: 2
},
item: {
fontColor: '#90CAF9',
fontSize: 14
},
tick: {
lineColor: '#90CAF9'
}
},
selectionTool: {
mask: {
borderWidth: 2,
borderColor: "red",
backgroundColor: "yellow",
alpha: 0.5
}
},
series: [{
values: (function() {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV;
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#F48FB1'
}
},
{
values: (function() {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV;
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#CE93D8'
}
}
]
};
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
modules: 'selection-tool'
});
});
</script>
</body>
</html>
var myConfig = {
type: "scatter",
backgroundColor:'#F7F7F7',
title:{
text:'Points Along A Sine Wave'
},
plot:{
_maxTrackers:0,
selectionMode: "none", // turn off normal selection
marker:{
borderWidth:0
},
selectedMarker:{
size:9,
borderWidth: 1,
borderColor: '#000',
},
hoverMarker:{
size:7
},
tooltip:{
backgroundColor:'#FFF',
fontColor:'#000',
fontSize:14,
borderRadius:4,
borderWidth:1,
borderColor:'#000',
text:'%t: %v',
selectedState:{
borderWidth: 2,
fontSize: 16
}
}
},
plotarea:{
margin:'dynamic'
},
scaleX:{
visible:false
},
scaleY:{
minValue:-2,
maxValue:2,
step:1,
guide:{
visible:false
},
lineColor:'#90CAF9',
lineWidth:2,
refLine:{
lineColor:'#90CAF9',
lineWidth:2
},
item:{
fontColor:'#90CAF9',
fontSize:14
},
tick:{
lineColor:'#90CAF9'
}
},
selectionTool: {
mask: {
borderWidth: 2,
borderColor: "red",
backgroundColor: "yellow",
alpha: 0.5
}
},
series : [
{
values : (function () {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV;
})(),
backgroundColor:'#F48FB1',
text:'Sin Wave One',
marker:{
size:5,
alpha:.85,
backgroundColor:'#F48FB1'
}
},
{
values : (function () {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV;
})(),
backgroundColor:'#F48FB1',
text:'Sin Wave Two',
marker:{
size:5,
alpha:.85,
backgroundColor:'#CE93D8'
}
}
]
};
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id : 'myChart',
data : myConfig,
height: '100%',
width: '100%',
modules:'selection-tool'
});
});
