Scatter Pod
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

91 lines
2.3 KiB

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
const datapoints1 = [
[100, -50, 0],
[200, 150, 0],
[100, 160, 1],
[150, 170, 1],
[150, 180, 0],
[150, 250, 1]
];
var pod = new ChartwerkScatterPod(
document.getElementById('chart'),
[
{
target: 'test1',
datapoints: datapoints1,
color: 'red',
lineType: 'dashed',
pointType: 'circle',
colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green',
clickCallback: (data, idx) => { console.log('click', data, idx) }
},
{
target: 'test2',
datapoints: [
[200, 50, 1],
[175, 60, 0],
[150, 70, 1]
],
color: 'purple',
pointType: 'rectangle',
pointSize: 5,
}
],
{
axis: {
x: {
format: 'numeric',
range: [-100, 300],
label: 'x'
},
y: {
invert: true,
range: [-100, 250],
label: 'y'
},
y1: {
isActive: true,
range: [0, 250]
}
},
zoomEvents: {
mouse: {
pan: { isActive: false, orientation: 'both', keyEvent: 'main' },
zoom: { isActive: true, keyEvent: 'shift' },
},
scroll: {
pan: { isActive: false },
zoom: { isActive: true, keyEvent: 'main' }
}
},
crosshair: {
orientation: 'both',
color: 'gray'
},
eventsCallbacks: {
zoomOut: () => { pod.render() }
},
margin: { top: 30, right: 30, bottom: 40, left: 30 },
}
);
pod.render();
</script>
</body>
</html>
<style>
.overlay {
fill: black;
}
</style>