<!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"];
let chartConfig = {
type: "scatter",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sine Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
borderWidth: 0
},
selectedMarker: {
size: '9px',
borderWidth: '1px',
borderColor: '#000',
},
hoverMarker: {
size: '7px'
},
tooltip: {
text: '%t: %v',
backgroundColor: '#FFF',
borderColor: '#000',
borderRadius: '4px',
borderWidth: '1px',
fontColor: '#000',
fontSize: '14px'
}
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
visible: false
},
scaleY: {
minValue: -2,
maxValue: 2,
step: 1,
guide: {
visible: false
},
lineColor: '#90CAF9',
lineWidth: '2px',
refLine: {
lineColor: '#90CAF9',
lineWidth: '2px'
},
item: {
fontColor: '#90CAF9',
fontSize: '14px'
},
tick: {
lineColor: '#90CAF9'
}
},
selectionTool: {
mask: {
alpha: 0.5,
backgroundColor: "yellow",
borderColor: "red",
borderWidth: '2px'
}
},
series: [{
values: (function() {
let aV = [];
let len = 500;
let 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() {
let aV = [];
let len = 500;
let 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: chartConfig,
height: '100%',
width: '100%',
modules: 'selection-tool'
});
});
</script>
</body>
</html>
let chartConfig = {
type: "scatter",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sine Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
borderWidth: 0
},
selectedMarker: {
size: '9px',
borderWidth: '1px',
borderColor: '#000',
},
hoverMarker: {
size: '7px'
},
tooltip: {
text: '%t: %v',
backgroundColor: '#FFF',
borderColor: '#000',
borderRadius: '4px',
borderWidth: '1px',
fontColor: '#000',
fontSize: '14px'
}
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
visible: false
},
scaleY: {
minValue: -2,
maxValue: 2,
step: 1,
guide: {
visible: false
},
lineColor: '#90CAF9',
lineWidth: '2px',
refLine: {
lineColor: '#90CAF9',
lineWidth: '2px'
},
item: {
fontColor: '#90CAF9',
fontSize: '14px'
},
tick: {
lineColor: '#90CAF9'
}
},
selectionTool: {
mask: {
alpha: 0.5,
backgroundColor: "yellow",
borderColor: "red",
borderWidth: '2px'
}
},
series: [
{
values: (function () {
let aV = [];
let len = 500;
let 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 () {
let aV = [];
let len = 500;
let 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: chartConfig,
height: '100%',
width: '100%',
modules: 'selection-tool'
});
});
