<!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: "bar",
backgroundColor: '#F7F7F7',
title: {
text: 'You can have multiple selections'
},
subtitle: {
text: 'Click away to deselect bars'
},
plot: {
'data-append-selection': true,
_maxTrackers: 0,
selectionMode: "none", // turn off normal selection
selectedState: {
backgroundColor: 'red',
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: {
},
scaleX: {
visible: false,
zooming: true
},
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
}
},
scrollX: {},
preview: {
adjustLayout: true
},
zoom: {
active: false,
},
series: [{
values: (function() {
var aV = [];
var len = 25;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push(
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
);
}
return aV;
})(),
dataGlobalValue: 'bla bla',
dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#F48FB1'
}
},
{
values: (function() {
var aV = [];
var len = 25;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push(
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
);
}
return aV;
})(),
dataGlobalValue: 'moo moo',
dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#CE93D8'
}
}
]
};
zingchart.bind('myChart', 'click', function() {
zingchart.exec('myChart', 'clearselection');
});
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
console.log(e)
});
// 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: "bar",
backgroundColor: '#F7F7F7',
title: {
text: 'You can have multiple selections'
},
subtitle: {
text: 'Click away to deselect bars'
},
plot: {
'data-append-selection': true,
_maxTrackers: 0,
selectionMode: "none", // turn off normal selection
selectedState: {
backgroundColor: 'red',
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: {
},
scaleX: {
visible: false,
zooming: true
},
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
}
},
scrollX: {},
preview: {
adjustLayout: true
},
zoom: {
active: false,
},
series: [{
values: (function() {
var aV = [];
var len = 25;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push(
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
);
}
return aV;
})(),
dataGlobalValue: 'bla bla',
dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#F48FB1'
}
},
{
values: (function() {
var aV = [];
var len = 25;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push(
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
);
}
return aV;
})(),
dataGlobalValue: 'moo moo',
dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
size: 5,
alpha: .85,
backgroundColor: '#CE93D8'
}
}
]
};
zingchart.bind('myChart', 'click', function() {
zingchart.exec('myChart', 'clearselection');
});
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
console.log(e)
});
// 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'
});
});