1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>ZingSoft Demo</title> 7
7<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
7 8 <style> 9 .chart--container { 10 height: 100%; 11 width: 100%; 12 min-height: 530px; 13 } 14 15 .zc-ref { 16 display: none; 17 } 18 </style> 19</head> 20 21<body> 22 <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div> 23
23<script> 24 ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; 25 let chartData = [{ 26 type: 'line', 27 values: [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69], 28 scales: 'scale-x,scale-y', 29 lineColor: '#0D47A1', 30 legendMarker: { 31 type: 'circle', 32 }, 33 marker: { 34 backgroundColor: '#0D47A1', 35 }, 36 }, 37 { 38 type: 'line', 39 values: [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48], 40 scales: 'scale-x,scale-y-2', 41 lineColor: '#B71C1C', 42 tooltipText: '%v%', 43 legendMarker: { 44 type: 'circle', 45 }, 46 marker: { 47 backgroundColor: '#B71C1C', 48 }, 49 }, 50 { 51 type: 'bar', 52 values: [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21], 53 scales: 'scale-x,scale-y-3', 54 backgroundColor: '#1B5E20', 55 tooltip: { 56 text: 'The number being shown is the percentage of the node when compared to its plot', 57 width: '200px', 58 wrapText: true, 59 }, 60 valueBox: { 61 text: '%pper%', 62 decimals: 1, 63 fontAngle: 90, 64 fontColor: '#fff', 65 offsetY: '5px', 66 placement: 'top-in', 67 }, 68 }, 69 { 70 type: 'bar', 71 values: [ 72 250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 73 250000, 220000, 240000, 74 ], 75 scales: 'scale-x,scale-y-4', 76 backgroundColor: '#E65100', 77 text: 'Dell', 78 tooltip: { 79 text: 'The number being shown above the bar is the value of the node', 80 width: '200px', 81 wrapText: true, 82 }, 83 valueBox: { 84 bold: true, 85 fontAngle: 90, 86 fontColor: '#fff', 87 offsetY: '5px', 88 placement: 'top-in', 89 short: true, 90 }, 91 }, 92 ]; 93 94 let chartConfig = { 95 type: 'mixed', 96 backgroundColor: 'white', 97 title: { 98 text: 'Chart Title', 99 align: 'left', 100 backgroundColor: '#BDBDBD', 101 fontSize: '14px', 102 height: '5%', 103 }, 104 subtitle: { 105 text: 'Subtitle', 106 align: 'left', 107 backgroundColor: '#E0E0E0', 108 height: '4%', 109 offsetY: '-5px', 110 }, 111 legend: { 112 alpha: 1, 113 draggable: true, 114 footer: { 115 text: '- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag', 116 fontSize: '8px', 117 }, 118 header: { 119 text: 'Legend Info', 120 }, 121 layout: 'x2', 122 maxItems: 2, 123 minimize: true, 124 overflow: 'page', 125 shadow: false, 126 width: '180px', 127 x: '74%', 128 y: '9.5%', 129 }, 130 plotarea: { 131 margin: '34% 30% 10% 10%', 132 }, 133 scaleX: { 134 values: [ 135 'Jan', 136 'Feb', 137 'Mar', 138 'Apr', 139 'May', 140 'Jun', 141 'Jul', 142 'Aug', 143 'Sep', 144 'Oct', 145 'Nov', 146 'Dec', 147 ], 148 guide: { 149 lineColor: '#BDBDBD', 150 lineStyle: 'solid', 151 }, 152 label: { 153 text: 'X label', 154 }, 155 markers: [{ 156 type: 'area', 157 alpha: 0.5, 158 backgroundColor: '#66BB6A', 159 label: { 160 text: 'Active<br>Month', 161 angle: 0, 162 bold: true, 163 fontSize: '10px', 164 offsetY: '-240px', 165 }, 166 range: [6.5, 7.5], 167 }, 168 { 169 type: 'area', 170 alpha: 0.5, 171 backgroundColor: '#cccccc', 172 range: [7.5, 11.5], 173 }, 174 ], 175 zooming: true, 176 }, 177 scaleX2: { 178 values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], 179 guide: { 180 visible: false, 181 }, 182 label: { 183 text: 'X-2 label', 184 }, 185 zooming: true, 186 }, 187 scaleY: { 188 guide: { 189 lineStyle: 'solid', 190 }, 191 label: { 192 text: 'Y label', 193 }, 194 markers: [{ 195 type: 'line', 196 alpha: 1, 197 label: { 198 text: 'Threshold', 199 backgroundColor: '#212121', 200 callout: true, 201 calloutPosition: 'right', 202 fontColor: 'white', 203 fontSize: '10px', 204 offsetX: '-60px', 205 offsetY: '8px', 206 }, 207 lineColor: '#212121', 208 lineWidth: '2px', 209 range: [74], 210 }, ], 211 minorGuide: { 212 alpha: 0.7, 213 lineGapSize: '6px', 214 lineSegementSize: '1px', 215 lineStyle: 'dashed', 216 lineWidth: '1px', 217 }, 218 minorTick: { 219 placement: 'cross', 220 size: '6px', 221 }, 222 minorTicks: 3, 223 zooming: true, 224 }, 225 scaleY2: { 226 values: '0:100:10', 227 format: '%v%', 228 guide: { 229 visible: false, 230 }, 231 label: { 232 text: 'Y-2 label', 233 }, 234 zooming: true, 235 }, 236 scaleY3: { 237 values: '0:50:10', 238 decimals: 2, 239 guide: { 240 visible: false, 241 }, 242 label: { 243 text: 'Y-3 label', 244 }, 245 zooming: true, 246 }, 247 scaleY4: { 248 values: '0:1000000:100000', 249 format: '$%v', 250 guide: { 251 visible: false, 252 }, 253 label: { 254 text: 'Y-4 label', 255 }, 256 multiplier: true, 257 zooming: true, 258 }, 259 crosshairX: { 260 plotLabel: { 261 visible: false, 262 }, 263 }, 264 labels: [{ 265 text: 'View External<br>Report', 266 url: 'https://www.zingchart.com/pricing', 267 target: '_blank', 268 padding: '5px', 269 backgroundColor: '#ccc', 270 borderRadius: '3px', 271 callout: true, 272 calloutHeight: '10px', 273 calloutWidth: '15px', 274 fontColor: '#000', 275 hook: 'node:plot=2,index=4', 276 offsetY: '-35px', 277 underline: true, 278 }, ], 279 source: { 280 text: 'Source: www.zingchart.com', 281 fontColor: '#B71C1C', 282 }, 283 zoom: { 284 alpha: 0.2, 285 backgroundColor: '#B71C1C', 286 label: { 287 borderColor: '#B71C1C', 288 visible: true, 289 }, 290 }, 291 scrollX: { 292 bar: { 293 backgroundColor: '#757575', 294 height: '8px', 295 }, 296 handle: { 297 backgroundColor: '#E0E0E0', 298 height: '4px', 299 offsetY: '-1px', 300 }, 301 }, 302 scrollY: { 303 bar: { 304 width: '8px', 305 backgroundColor: '#757575', 306 }, 307 handle: { 308 backgroundColor: '#E0E0E0',
309 offsetX: '-1px', 310 width: '4px', 311 }, 312 }, 313 preview: { 314 position: '14% 14%', 315 width: '69%', 316 height: '50px', 317 }, 318 series: chartData, 319 }; 320 321 zingchart.render({ 322 id: 'myChart', 323 data: chartConfig, 324 height: '100%', 325 width: '100%', 326 events: { 327 load: function() { 328 // Onboarding fires here, after the chart SVG exists in the DOM 329 var s = document.createElement('script'); 330 s.src = 'onboarding_labelmania.js'; // adjust path as needed 331 document.body.appendChild(s); 332 } 333 } 334 }); 335 </script>
335 336</body> 337 338</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.