<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<style>
#table {
margin-top: 20px;
padding: 10px;
background-color: #F7F7F7;
visibility: hidden;
}
#table h3 {
margin: 0px 10px;
border-bottom: 1px solid black;
}
.row {
margin: 5px 0px;
}
.column {
background-color: #2196F3;
border-radius: 4px;
display: inline-block;
font-size: 16px;
color: #FFF;
padding: 2px 8px;
margin: 0px 5px;
width: 28%;
text-align: center;
}
</style>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<div id="table"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: "bubble",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sin Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
size: 5,
borderWidth: 0,
alpha: .85,
},
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'
}
},
// This styling will be pushed during the next build.
// You can style the mask background, border and line color
selectionTool: {
mask: {
borderWidth: 2,
borderColor: 'red',
backgroundColor: 'yellow',
alpha: .5
}
},
series: [{
// Lets create some random values that look cool
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.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
backgroundColor: '#F48FB1'
}
},
{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 600;
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.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
backgroundColor: '#CE93D8'
}
}
]
};
/* Special callback function for this dragging module.
* You can use this information to display selected data.
* You can use this information to update the chart etc...
*/
zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
var table = document.getElementById('table');
var header = document.createElement('h3');
var Column = function() {
var column = document.createElement('div');
column.classList.add('column');
return column;
}
var Row = function() {
var row = document.createElement('div');
row.classList.add('row');
return row;
}
// clear table and set header
table.innerHTML = '';
header.innerHTML = 'Selected State Logistics';
table.appendChild(header);
// define variables for creating grid
var totalMinValue = 10000;
var totalMaxValue = 0;
var sumValues = 0;
var row;
var column1;
var column2;
var column3;
// loop through plots and grab information
for (var key in e.nodes) {
// Get global min and max values from plots
if (e.nodes[key].value < totalMinValue)
totalMinValue = e.nodes[key].value;
if (e.nodes[key].value > totalMaxValue)
totalMaxValue = e.nodes[key].value;
sumValues += e.nodes[key].value;
}
// append a new total value row
row = Row();
column1 = Column();
column2 = Column();
column3 = Column();
column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
row.appendChild(column1);
row.appendChild(column2);
row.appendChild(column3);
table.appendChild(row);
// render the table visible
table.style.visibility = 'visible';
});
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [myConfig]
},
height: 400,
width: '100%',
modules: 'selection-tool'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<style>
#table {
margin-top: 20px;
padding: 10px;
background-color: #F7F7F7;
visibility: hidden;
}
#table h3 {
margin: 0px 10px;
border-bottom: 1px solid black;
}
.row {
margin: 5px 0px;
}
.column {
background-color: #2196F3;
border-radius: 4px;
display: inline-block;
font-size: 16px;
color: #FFF;
padding: 2px 8px;
margin: 0px 5px;
width: 28%;
text-align: center;
}
</style>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
<div id="table"></div>
</body>
</html>
var myConfig = {
type: "bubble",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sin Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
size: 5,
borderWidth: 0,
alpha: .85,
},
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'
}
},
// This styling will be pushed during the next build.
// You can style the mask background, border and line color
selectionTool: {
mask: {
borderWidth: 2,
borderColor: 'red',
backgroundColor: 'yellow',
alpha: .5
}
},
series: [{
// Lets create some random values that look cool
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.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
backgroundColor: '#F48FB1'
}
},
{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 600;
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.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
backgroundColor: '#CE93D8'
}
}
]
};
/* Special callback function for this dragging module.
* You can use this information to display selected data.
* You can use this information to update the chart etc...
*/
zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
var table = document.getElementById('table');
var header = document.createElement('h3');
var Column = function() {
var column = document.createElement('div');
column.classList.add('column');
return column;
}
var Row = function() {
var row = document.createElement('div');
row.classList.add('row');
return row;
}
// clear table and set header
table.innerHTML = '';
header.innerHTML = 'Selected State Logistics';
table.appendChild(header);
// define variables for creating grid
var totalMinValue = 10000;
var totalMaxValue = 0;
var sumValues = 0;
var row;
var column1;
var column2;
var column3;
// loop through plots and grab information
for (var key in e.nodes) {
// Get global min and max values from plots
if (e.nodes[key].value < totalMinValue)
totalMinValue = e.nodes[key].value;
if (e.nodes[key].value > totalMaxValue)
totalMaxValue = e.nodes[key].value;
sumValues += e.nodes[key].value;
}
// append a new total value row
row = Row();
column1 = Column();
column2 = Column();
column3 = Column();
column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
row.appendChild(column1);
row.appendChild(column2);
row.appendChild(column3);
table.appendChild(row);
// render the table visible
table.style.visibility = 'visible';
});
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [myConfig]
},
height: 400,
width: '100%',
modules: 'selection-tool'
});
});