<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: "scatter",
backgroundColor: '#F7F7F7',
title: {
text: 'Tooltip Text Changes'
},
plot: {
_maxTrackers: 0,
selectionMode: "none", // turn off normal selection
marker: {
borderWidth: 0
},
selectedMarker: {
size: 8,
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'
}
}
]
};
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
console.log(e);
var series1Text = '%t<br>SumValue: ';
var series2Text = '%t<br>SumValue: ';
// Calculate Sum of selection
for (var i = 0; i < e.selection.length; i++) {
var sumValue = e.nodes.reduce(function(a, b, arr, index) {
if (i == 0 && b.plotindex === 0)
return (a.value ? a.value : a) + b.value;
else if (i == 1 && b.plotindex === 1)
return (a.value ? a.value : a) + b.value;
else
return (a.value ? a.value : a);
});
if (i === 0)
series1Text += sumValue;
else
series2Text += sumValue;
}
// This will merge with the current series data and update
// the tooltip based on the selected plots
zingchart.exec(e.id, 'appendseriesdata', {
data: [{
tooltip: {
selectedState: {
text: series1Text
}
}
},
{
tooltip: {
selectedState: {
text: series2Text
}
}
}
]
})
});
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%',
modules: 'selection-tool'
});
});
</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>
var myConfig = {
type: "scatter",
backgroundColor: '#F7F7F7',
title: {
text: 'Tooltip Text Changes'
},
plot: {
_maxTrackers: 0,
selectionMode: "none", // turn off normal selection
marker: {
borderWidth: 0
},
selectedMarker: {
size: 8,
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'
}
}
]
};
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
console.log(e);
var series1Text = '%t<br>SumValue: ';
var series2Text = '%t<br>SumValue: ';
// Calculate Sum of selection
for (var i = 0; i < e.selection.length; i++) {
var sumValue = e.nodes.reduce(function(a, b, arr, index) {
if (i == 0 && b.plotindex === 0)
return (a.value ? a.value : a) + b.value;
else if (i == 1 && b.plotindex === 1)
return (a.value ? a.value : a) + b.value;
else
return (a.value ? a.value : a);
});
if (i === 0)
series1Text += sumValue;
else
series2Text += sumValue;
}
// This will merge with the current series data and update
// the tooltip based on the selected plots
zingchart.exec(e.id, 'appendseriesdata', {
data: [{
tooltip: {
selectedState: {
text: series1Text
}
}
},
{
tooltip: {
selectedState: {
text: series2Text
}
}
}
]
})
});
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%',
modules: 'selection-tool'
});
});