• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     let chartConfig = {
    35.       type: 'bar',
    36.       title: {
    37.         text: 'Selection Tool Demo'
    38.       },
    39.       subtitle: {
    40.         text: 'Click and drag to make a selection',
    41.       },
    42.       selectionTool: {
    43.         mask: {
    44.           borderWidth: 0,
    45.           borderColor: 'rgba(222, 243, 199, 0.7)',
    46.           backgroundColor: 'rgba(222, 243, 199, 0.6)'
    47.         }
    48.       },
    49.       plot: {
    50.         tooltip: {
    51.           placement: 'node:top',
    52.           borderColor: '#7CBE49',
    53.           borderWidth: '1px',
    54.           backgroundColor: 'white'
    55.         },
    56.         dataAppendSelection: true,
    57.         selectionMode: 'multiple',
    58.         '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'],
    59.         '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']
    60.       },
    61.       scaleY: {
    62.         zooming: false,
    63.         maxValue: 400,
    64.         guide: {
    65.           visible: false
    66.         },
    67.         item: {
    68.           visible: false
    69.         },
    70.         tick: {
    71.           visible: false
    72.         },
    73.         lineWidth: '0px',
    74.         visible: true,
    75.         values: '0:214:42.8',
    76.       },
    77.       scaleX: {
    78.         zooming: false,
    79.         item: {
    80.           visible: false
    81.         },
    82.         tick: {
    83.           visible: false
    84.         },
    85.         label: {
    86.           visible: false
    87.         },
    88.         visible: false,
    89.       },
    90.       series: [{
    91.         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],
    92.         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],
    93.         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],
    94.         tooltip: {
    95.           htmlMode: true,
    96.           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">&nbsp;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">&nbsp;% Comp</span>       </td>   </tr></table>'
    97.         },
    98.         backgroundState: {
    99.           backgroundColor: 'rgba(74, 144, 226, 0.2)'
    100.         },
    101.         selectedState: {
    102.           backgroundColor: '#ff9002'
    103.         },
    104.       }]
    105.     };
    106.  
    107.     zingchart.loadModules('selection-tool,svg-simple-selection', function() {
    108.       zingchart.render({
    109.         id: 'myChart',
    110.         data: chartConfig,
    111.         height: 400,
    112.         width: '100%',
    113.         modules: 'selection-tool,svg-simple-selection'
    114.       });
    115.     });
    116.   </script>
    117. </body>
    118.  
    119. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. let chartConfig = {
    2.   type: 'bar',
    3.   title: {
    4.     text: 'Selection Tool Demo'
    5.   },
    6.   subtitle: {
    7.     text: 'Click and drag to make a selection',
    8.   },
    9.   selectionTool: {
    10.     mask: {
    11.       borderWidth: 0,
    12.       borderColor: 'rgba(222, 243, 199, 0.7)',
    13.       backgroundColor: 'rgba(222, 243, 199, 0.6)'
    14.     }
    15.   },
    16.   plot: {
    17.     tooltip: {
    18.       placement: 'node:top',
    19.       borderColor: '#7CBE49',
    20.       borderWidth: '1px',
    21.       backgroundColor: 'white'
    22.     },
    23.     dataAppendSelection: true,
    24.     selectionMode: 'multiple',
    25.     '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'],
    26.     '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']
    27.   },
    28.   scaleY: {
    29.     zooming: false,
    30.     maxValue: 400,
    31.     guide: {
    32.       visible: false
    33.     },
    34.     item: {
    35.       visible: false
    36.     },
    37.     tick: {
    38.       visible: false
    39.     },
    40.     lineWidth: '0px',
    41.     visible: true,
    42.     values: '0:214:42.8',
    43.   },
    44.   scaleX: {
    45.     zooming: false,
    46.     item: {
    47.       visible: false
    48.     },
    49.     tick: {
    50.       visible: false
    51.     },
    52.     label: {
    53.       visible: false
    54.     },
    55.     visible: false,
    56.   },
    57.   series: [{
    58.     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],
    59.     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],
    60.     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],
    61.     tooltip: {
    62.       htmlMode: true,
    63.       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">&nbsp;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">&nbsp;% Comp</span>       </td>   </tr></table>'
    64.     },
    65.     backgroundState: {
    66.       backgroundColor: 'rgba(74, 144, 226, 0.2)'
    67.     },
    68.     selectedState: {
    69.       backgroundColor: '#ff9002'
    70.     },
    71.   }]
    72. };
    73.  
    74. zingchart.loadModules('selection-tool,svg-simple-selection', function() {
    75.   zingchart.render({
    76.     id: 'myChart',
    77.     data: chartConfig,
    78.     height: 400,
    79.     width: '100%',
    80.     modules: 'selection-tool,svg-simple-selection'
    81.   });
    82. });