<!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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'bar',
title: {
text: 'Selection Tool Demo'
},
subtitle: {
text: 'Click and drag to make a selection',
},
selectionTool: {
mask: {
borderWidth: 0,
borderColor: 'rgba(222, 243, 199, 0.7)',
backgroundColor: 'rgba(222, 243, 199, 0.6)'
}
},
plot: {
tooltip: {
placement: 'node:top',
borderColor: '#7CBE49',
borderWidth: '1px',
backgroundColor: 'white'
},
dataAppendSelection: true,
selectionMode: 'multiple',
'data-SEGMENT_ID': ['S154', 'S166', 'S130', 'S150', 'S108', 'S122', 'S147', 'S86', 'S84', 'S168', 'S65', 'S56', 'S80', 'S172', 'S97', 'S91', 'S109', 'S123', 'S115', 'S140', 'S52', 'S28', 'S132', 'S81', 'S121', 'S114', 'S153', 'S169', 'S76', 'S128', 'S137', 'S151', 'S62', 'S133', 'S96', 'S101', 'S126', 'S106', 'S125', 'S155', 'S78', 'S124', 'S164', 'S61', 'S159', 'S105', 'S46', 'S111', 'S144', 'S63', 'S94', 'S161', 'S171', 'S167', 'S92', 'S104', 'S27', 'S57', 'S163', 'S83', 'S98', 'S112', 'S60', 'S113', 'S141', 'S47', 'S49', 'S75', 'S162', 'S53', 'S136', 'S31', 'S12', 'S14', 'S30', 'S135', 'S74', 'S110', 'S54', 'S170', 'S82', 'S146', 'S45', 'S131', 'S149', 'S93', 'S129', 'S48', 'S43', 'S156', 'S68', 'S73', 'S139', 'S26', 'S44', 'S79', 'S116', 'S107', 'S88', 'S142', 'S100', 'S66', 'S95', 'S24', 'S87', 'S160', 'S102', 'S157', 'S10', 'S23', 'S58', 'S138', 'S59', 'S39', 'S64', 'S13', 'S50', 'S25', 'S134', 'S15', 'S145', 'S103', 'S42', 'S29', 'S6', 'S152', 'S37', 'S67', 'S158', 'S118', 'S143', 'S89', 'S4', 'S85', 'S77', 'S99', 'S71', 'S127', 'S90', 'S165', 'S9', 'S69', 'S148', 'S70', 'S16', 'S35', 'S34', 'S19', 'S117', 'S32', 'S120', 'S17', 'S72', 'S55', 'S5', 'S20', 'S33', 'S1', 'S41', 'S3', 'S8', 'S21', 'S22', 'S36', 'S51', 'S38', 'S119', 'S7', 'S40', 'S11', 'S18', 'S2'],
'data-PROF1_PCT_COMP': ['0.13', '0.18', '0.57', '0.48', '0.52', '0.26', '0.30', '0.55', '0.93', '0.65', '0.22', '0.58', '0.12', '0.90', '0.11', '0.12', '0.73', '0.41', '0.21', '0.38', '0.56', '0.07', '1.90', '0.58', '0.29', '0.48', '0.09', '0.70', '0.77', '0.29', '0.36', '0.16', '1.09', '0.25', '0.62', '0.45', '0.45', '0.61', '0.80', '0.06', '1.22', '0.81', '0.09', '0.18', '0.61', '1.40', '0.37', '0.11', '0.21', '0.38', '0.07', '0.48', '0.98', '0.37', '0.26', '0.50', '0.36', '0.20', '0.21', '0.21', '0.38', '0.14', '0.37', '0.11', '1.79', '1.01', '0.31', '1.16', '0.22', '1.08', '0.88', '0.36', '1.18', '1.43', '0.91', '0.43', '0.48', '0.23', '0.27', '0.69', '1.00', '0.55', '0.84', '0.22', '0.14', '0.08', '0.51', '2.29', '0.17', '0.08', '0.53', '0.20', '1.39', '0.80', '0.33', '0.10', '0.18', '0.30', '0.41', '0.17', '0.42', '0.29', '0.62', '0.41', '0.59', '0.30', '0.43', '0.48', '1.34', '0.42', '0.54', '0.21', '0.36', '0.26', '0.37', '2.37', '1.00', '1.58', '0.71', '0.71', '0.56', '0.77', '0.21', '0.08', '2.01', '0.07', '0.74', '0.40', '0.24', '0.22', '1.07', '0.60', '0.69', '1.40', '0.49', '0.10', '1.31', '1.61', '1.80', '0.23', '0.85', '1.30', '0.06', '0.62', '0.67', '0.61', '0.49', '0.22', '0.26', '0.18', '0.19', '0.22', '0.72', '0.16', '0.21', '1.32', '0.43', '0.44', '0.58', '0.58', '1.28', '0.33', '0.38', '1.37', '1.37', '0.90', '0.15', '0.82', '0.32', '0.87', '1.52', '0.88']
},
scaleY: {
zooming: false,
maxValue: 400,
guide: {
visible: false
},
item: {
visible: false
},
tick: {
visible: false
},
lineWidth: '0px',
visible: true,
values: '0:214:42.8',
},
scaleX: {
zooming: false,
item: {
visible: false
},
tick: {
visible: false
},
label: {
visible: false
},
visible: false,
},
series: [{
values: [114, 114, 111, 107, 99, 94, 90, 85, 84, 80, 78, 77, 74, 74, 74, 74, 73, 73, 73, 70, 68, 67, 67, 66, 66, 65, 64, 64, 62, 62, 61, 61, 60, 60, 59, 57, 57, 56, 56, 54, 53, 53, 52, 51, 51, 51, 50, 47, 47, 46, 46, 45, 45, 45, 44, 43, 42, 41, 41, 41, 40, 40, 39, 38, 38, 37, 37, 35, 35, 32, 32, 31, 30, 30, 29, 29, 29, 28, 27, 27, 27, 26, 25, 24, 24, 23, 23, 22, 21, 21, 20, 19, 18, 17, 17, 16, 16, 16, 14, 14, 14, 13, 13, 12, 10, 10, 9, 9, 8, 8, 7, 7, 6, 5, 5, 4, 4, 4, 3, 2, 2, 2, 1, 1, 2, 2, 2, 3, 3, 3, 4, 5, 6, 10, 12, 12, 13, 13, 16, 17, 18, 20, 21, 23, 24, 24, 24, 25, 25, 26, 27, 28, 28, 29, 30, 30, 31, 32, 37, 38, 40, 45, 47, 47, 48, 49, 49, 51, 53, 56, 62, 69],
dataIndex: [214, 214, 211, 207, 199, 194, 190, 185, 184, 180, 178, 177, 174, 174, 174, 174, 173, 173, 173, 170, 168, 167, 167, 166, 166, 165, 164, 164, 162, 162, 161, 161, 160, 160, 159, 157, 157, 156, 156, 154, 153, 153, 152, 151, 151, 151, 150, 147, 147, 146, 146, 145, 145, 145, 144, 143, 142, 141, 141, 141, 140, 140, 139, 138, 138, 137, 137, 135, 135, 132, 132, 131, 130, 130, 129, 129, 129, 128, 127, 127, 127, 126, 125, 124, 124, 123, 123, 122, 121, 121, 120, 119, 118, 117, 117, 116, 116, 116, 114, 114, 114, 113, 113, 112, 110, 110, 109, 109, 108, 108, 107, 107, 106, 105, 105, 104, 104, 104, 103, 102, 102, 102, 101, 99, 98, 98, 98, 97, 97, 97, 96, 95, 94, 90, 88, 88, 87, 87, 84, 83, 82, 80, 79, 77, 76, 76, 76, 75, 75, 74, 73, 72, 72, 71, 70, 70, 69, 68, 63, 62, 60, 55, 53, 53, 52, 51, 51, 49, 47, 44, 38, 31],
offsetValues: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 99, 98, 98, 98, 97, 97, 97, 96, 95, 94, 90, 88, 88, 87, 87, 84, 83, 82, 80, 79, 77, 76, 76, 76, 75, 75, 74, 73, 72, 72, 71, 70, 70, 69, 68, 63, 62, 60, 55, 53, 53, 52, 51, 51, 49, 47, 44, 38, 31],
tooltip: {
htmlMode: true,
text: '<table style="height:35px;"> <tr> <td style="background-color: Transparent; text-align:left; cursor: none;font-family:dincomp-light;color: rgba(51, 51, 51, 1);font-size: 11px;height: 12px;"> CODE %kt </td> </tr> <tr> <td> <span class="e1xm-ca-chartp1tooltip-text" style="color:#4A90E2;">%data-index</span> <span class="e1xm-ca-charttooltip-desc"> Index Score</span> </td> </tr> <tr> <td> <span class="e1xm-ca-chartp1tooltip-text" style="color:#4A90E2;">%data-PROF1_PCT_COMP</span> <span class="e1xm-ca-charttooltip-desc"> % Comp</span> </td> </tr></table>'
},
backgroundState: {
backgroundColor: 'rgba(74, 144, 226, 0.2)'
},
selectedState: {
backgroundColor: '#ff9002'
},
}]
};
zingchart.loadModules('selection-tool,svg-simple-selection', function() {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%',
modules: 'selection-tool,svg-simple-selection'
});
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
title: {
text: 'Selection Tool Demo'
},
subtitle: {
text: 'Click and drag to make a selection',
},
selectionTool: {
mask: {
borderWidth: 0,
borderColor: 'rgba(222, 243, 199, 0.7)',
backgroundColor: 'rgba(222, 243, 199, 0.6)'
}
},
plot: {
tooltip: {
placement: 'node:top',
borderColor: '#7CBE49',
borderWidth: '1px',
backgroundColor: 'white'
},
dataAppendSelection: true,
selectionMode: 'multiple',
'data-SEGMENT_ID': ['S154', 'S166', 'S130', 'S150', 'S108', 'S122', 'S147', 'S86', 'S84', 'S168', 'S65', 'S56', 'S80', 'S172', 'S97', 'S91', 'S109', 'S123', 'S115', 'S140', 'S52', 'S28', 'S132', 'S81', 'S121', 'S114', 'S153', 'S169', 'S76', 'S128', 'S137', 'S151', 'S62', 'S133', 'S96', 'S101', 'S126', 'S106', 'S125', 'S155', 'S78', 'S124', 'S164', 'S61', 'S159', 'S105', 'S46', 'S111', 'S144', 'S63', 'S94', 'S161', 'S171', 'S167', 'S92', 'S104', 'S27', 'S57', 'S163', 'S83', 'S98', 'S112', 'S60', 'S113', 'S141', 'S47', 'S49', 'S75', 'S162', 'S53', 'S136', 'S31', 'S12', 'S14', 'S30', 'S135', 'S74', 'S110', 'S54', 'S170', 'S82', 'S146', 'S45', 'S131', 'S149', 'S93', 'S129', 'S48', 'S43', 'S156', 'S68', 'S73', 'S139', 'S26', 'S44', 'S79', 'S116', 'S107', 'S88', 'S142', 'S100', 'S66', 'S95', 'S24', 'S87', 'S160', 'S102', 'S157', 'S10', 'S23', 'S58', 'S138', 'S59', 'S39', 'S64', 'S13', 'S50', 'S25', 'S134', 'S15', 'S145', 'S103', 'S42', 'S29', 'S6', 'S152', 'S37', 'S67', 'S158', 'S118', 'S143', 'S89', 'S4', 'S85', 'S77', 'S99', 'S71', 'S127', 'S90', 'S165', 'S9', 'S69', 'S148', 'S70', 'S16', 'S35', 'S34', 'S19', 'S117', 'S32', 'S120', 'S17', 'S72', 'S55', 'S5', 'S20', 'S33', 'S1', 'S41', 'S3', 'S8', 'S21', 'S22', 'S36', 'S51', 'S38', 'S119', 'S7', 'S40', 'S11', 'S18', 'S2'],
'data-PROF1_PCT_COMP': ['0.13', '0.18', '0.57', '0.48', '0.52', '0.26', '0.30', '0.55', '0.93', '0.65', '0.22', '0.58', '0.12', '0.90', '0.11', '0.12', '0.73', '0.41', '0.21', '0.38', '0.56', '0.07', '1.90', '0.58', '0.29', '0.48', '0.09', '0.70', '0.77', '0.29', '0.36', '0.16', '1.09', '0.25', '0.62', '0.45', '0.45', '0.61', '0.80', '0.06', '1.22', '0.81', '0.09', '0.18', '0.61', '1.40', '0.37', '0.11', '0.21', '0.38', '0.07', '0.48', '0.98', '0.37', '0.26', '0.50', '0.36', '0.20', '0.21', '0.21', '0.38', '0.14', '0.37', '0.11', '1.79', '1.01', '0.31', '1.16', '0.22', '1.08', '0.88', '0.36', '1.18', '1.43', '0.91', '0.43', '0.48', '0.23', '0.27', '0.69', '1.00', '0.55', '0.84', '0.22', '0.14', '0.08', '0.51', '2.29', '0.17', '0.08', '0.53', '0.20', '1.39', '0.80', '0.33', '0.10', '0.18', '0.30', '0.41', '0.17', '0.42', '0.29', '0.62', '0.41', '0.59', '0.30', '0.43', '0.48', '1.34', '0.42', '0.54', '0.21', '0.36', '0.26', '0.37', '2.37', '1.00', '1.58', '0.71', '0.71', '0.56', '0.77', '0.21', '0.08', '2.01', '0.07', '0.74', '0.40', '0.24', '0.22', '1.07', '0.60', '0.69', '1.40', '0.49', '0.10', '1.31', '1.61', '1.80', '0.23', '0.85', '1.30', '0.06', '0.62', '0.67', '0.61', '0.49', '0.22', '0.26', '0.18', '0.19', '0.22', '0.72', '0.16', '0.21', '1.32', '0.43', '0.44', '0.58', '0.58', '1.28', '0.33', '0.38', '1.37', '1.37', '0.90', '0.15', '0.82', '0.32', '0.87', '1.52', '0.88']
},
scaleY: {
zooming: false,
maxValue: 400,
guide: {
visible: false
},
item: {
visible: false
},
tick: {
visible: false
},
lineWidth: '0px',
visible: true,
values: '0:214:42.8',
},
scaleX: {
zooming: false,
item: {
visible: false
},
tick: {
visible: false
},
label: {
visible: false
},
visible: false,
},
series: [{
values: [114, 114, 111, 107, 99, 94, 90, 85, 84, 80, 78, 77, 74, 74, 74, 74, 73, 73, 73, 70, 68, 67, 67, 66, 66, 65, 64, 64, 62, 62, 61, 61, 60, 60, 59, 57, 57, 56, 56, 54, 53, 53, 52, 51, 51, 51, 50, 47, 47, 46, 46, 45, 45, 45, 44, 43, 42, 41, 41, 41, 40, 40, 39, 38, 38, 37, 37, 35, 35, 32, 32, 31, 30, 30, 29, 29, 29, 28, 27, 27, 27, 26, 25, 24, 24, 23, 23, 22, 21, 21, 20, 19, 18, 17, 17, 16, 16, 16, 14, 14, 14, 13, 13, 12, 10, 10, 9, 9, 8, 8, 7, 7, 6, 5, 5, 4, 4, 4, 3, 2, 2, 2, 1, 1, 2, 2, 2, 3, 3, 3, 4, 5, 6, 10, 12, 12, 13, 13, 16, 17, 18, 20, 21, 23, 24, 24, 24, 25, 25, 26, 27, 28, 28, 29, 30, 30, 31, 32, 37, 38, 40, 45, 47, 47, 48, 49, 49, 51, 53, 56, 62, 69],
dataIndex: [214, 214, 211, 207, 199, 194, 190, 185, 184, 180, 178, 177, 174, 174, 174, 174, 173, 173, 173, 170, 168, 167, 167, 166, 166, 165, 164, 164, 162, 162, 161, 161, 160, 160, 159, 157, 157, 156, 156, 154, 153, 153, 152, 151, 151, 151, 150, 147, 147, 146, 146, 145, 145, 145, 144, 143, 142, 141, 141, 141, 140, 140, 139, 138, 138, 137, 137, 135, 135, 132, 132, 131, 130, 130, 129, 129, 129, 128, 127, 127, 127, 126, 125, 124, 124, 123, 123, 122, 121, 121, 120, 119, 118, 117, 117, 116, 116, 116, 114, 114, 114, 113, 113, 112, 110, 110, 109, 109, 108, 108, 107, 107, 106, 105, 105, 104, 104, 104, 103, 102, 102, 102, 101, 99, 98, 98, 98, 97, 97, 97, 96, 95, 94, 90, 88, 88, 87, 87, 84, 83, 82, 80, 79, 77, 76, 76, 76, 75, 75, 74, 73, 72, 72, 71, 70, 70, 69, 68, 63, 62, 60, 55, 53, 53, 52, 51, 51, 49, 47, 44, 38, 31],
offsetValues: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 99, 98, 98, 98, 97, 97, 97, 96, 95, 94, 90, 88, 88, 87, 87, 84, 83, 82, 80, 79, 77, 76, 76, 76, 75, 75, 74, 73, 72, 72, 71, 70, 70, 69, 68, 63, 62, 60, 55, 53, 53, 52, 51, 51, 49, 47, 44, 38, 31],
tooltip: {
htmlMode: true,
text: '<table style="height:35px;"> <tr> <td style="background-color: Transparent; text-align:left; cursor: none;font-family:dincomp-light;color: rgba(51, 51, 51, 1);font-size: 11px;height: 12px;"> CODE %kt </td> </tr> <tr> <td> <span class="e1xm-ca-chartp1tooltip-text" style="color:#4A90E2;">%data-index</span> <span class="e1xm-ca-charttooltip-desc"> Index Score</span> </td> </tr> <tr> <td> <span class="e1xm-ca-chartp1tooltip-text" style="color:#4A90E2;">%data-PROF1_PCT_COMP</span> <span class="e1xm-ca-charttooltip-desc"> % Comp</span> </td> </tr></table>'
},
backgroundState: {
backgroundColor: 'rgba(74, 144, 226, 0.2)'
},
selectedState: {
backgroundColor: '#ff9002'
},
}]
};
zingchart.loadModules('selection-tool,svg-simple-selection', function() {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%',
modules: 'selection-tool,svg-simple-selection'
});
});