<!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>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var ogMarkerSelected = false;
var ogMarkerId = 'draggableMarker';
var myConfig = {
type: "mixed",
title: {
text: "Click and Drag Marker"
},
scaleY: {
markers: [{
type: 'line',
lineWidth: 25,
lineColor: '#FFAB40',
range: [55]
}]
},
series: [{
type: 'scatter',
values: [35, 42, 67, 89, 25, 34, 67, 85]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
/**
* Event listener for 'mousedown'. Get xyinfo from graph.
* Currently, scale.markers are shapes but they live in
* a different svg group than other shapes so the events
* system does not work the same for them. This is so
* we can layer and place them appropriately. So for this
* we must conduct a solution to create our own shape_mousedown
* event.
*
* Once we register scale.marker_mousedown we can continue to draw it
*/
zingchart.bind('myChart', 'mousedown', function(e) {
// hide the image map so we can grab the scale marker
var img = document.getElementById('myChart-img');
img.style.display = 'none';
// this will now grab the scale marker
var target = document.elementFromPoint(e.x, e.y);
// re display the image map
img.style.display = 'initial';
// check to see
if (isScaleMarker(target.id)) {
ogMarkerSelected = true;
img.style.cursor = 'row-resize';
} else {
ogMarkerSelected = false;
}
});
zingchart.bind('myChart', 'mousemove', function(e) {
if (ogMarkerSelected) {
// Returns array of 3 * n plots
// index 0 is scale-x info
// index 1 is scale-y info
// index 2 is node/plot info
var ogXYInfo = zingchart.exec('myChart', 'getxyinfo', {
x: e.x,
y: e.y
});
// Set new series values in graph
zingchart.exec('myChart', 'modify', {
data: {
'scale-y': {
markers: [{
type: 'line',
id: ogMarkerId,
lineWidth: 25,
lineColor: '#FFAB40',
range: [ogXYInfo[1].scalevalue],
pairScale: 'x'
}]
}
}
});
}
});
/**
* Event listener for 'mouseup'. Get xyinfo from graph
*/
zingchart.bind('myChart', 'mouseup', function(e) {
var img = document.getElementById('myChart-img');
img.style.cursor = 'default';
ogMarkerSelected = false;
});
/*
* Will parse the svg path id which will look something like:
* myChart-graph-id0-scale-y-marker-0-path
*
* It will return true if we are targeting a scale marker
*/
function isScaleMarker(targetId) {
var targetPath = targetId.split('-');
var bIsScaleMarker = false;
for (var i = 0; i < targetPath.length; i++) {
if (targetPath[i] === 'marker')
bIsScaleMarker = true;
}
return bIsScaleMarker;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
var ogMarkerSelected = false;
var ogMarkerId = 'draggableMarker';
var myConfig = {
type: "mixed",
title: {
text: "Click and Drag Marker"
},
scaleY: {
markers: [{
type: 'line',
lineWidth: 25,
lineColor: '#FFAB40',
range: [55]
}]
},
series: [{
type: 'scatter',
values: [35, 42, 67, 89, 25, 34, 67, 85]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
/**
* Event listener for 'mousedown'. Get xyinfo from graph.
* Currently, scale.markers are shapes but they live in
* a different svg group than other shapes so the events
* system does not work the same for them. This is so
* we can layer and place them appropriately. So for this
* we must conduct a solution to create our own shape_mousedown
* event.
*
* Once we register scale.marker_mousedown we can continue to draw it
*/
zingchart.bind('myChart', 'mousedown', function(e) {
// hide the image map so we can grab the scale marker
var img = document.getElementById('myChart-img');
img.style.display = 'none';
// this will now grab the scale marker
var target = document.elementFromPoint(e.x, e.y);
// re display the image map
img.style.display = 'initial';
// check to see
if (isScaleMarker(target.id)) {
ogMarkerSelected = true;
img.style.cursor = 'row-resize';
} else {
ogMarkerSelected = false;
}
});
zingchart.bind('myChart', 'mousemove', function(e) {
if (ogMarkerSelected) {
// Returns array of 3 * n plots
// index 0 is scale-x info
// index 1 is scale-y info
// index 2 is node/plot info
var ogXYInfo = zingchart.exec('myChart', 'getxyinfo', {
x: e.x,
y: e.y
});
// Set new series values in graph
zingchart.exec('myChart', 'modify', {
data: {
'scale-y': {
markers: [{
type: 'line',
id: ogMarkerId,
lineWidth: 25,
lineColor: '#FFAB40',
range: [ogXYInfo[1].scalevalue],
pairScale: 'x'
}]
}
}
});
}
});
/**
* Event listener for 'mouseup'. Get xyinfo from graph
*/
zingchart.bind('myChart', 'mouseup', function(e) {
var img = document.getElementById('myChart-img');
img.style.cursor = 'default';
ogMarkerSelected = false;
});
/*
* Will parse the svg path id which will look something like:
* myChart-graph-id0-scale-y-marker-0-path
*
* It will return true if we are targeting a scale marker
*/
function isScaleMarker(targetId) {
var targetPath = targetId.split('-');
var bIsScaleMarker = false;
for (var i = 0; i < targetPath.length; i++) {
if (targetPath[i] === 'marker')
bIsScaleMarker = true;
}
return bIsScaleMarker;
}