[tcb-script src=”//cdn.anychart.com/js/latest/anychart-bundle.min.js”][/tcb-script][tcb-script] anychart.onDocumentReady(function () { var data = [ { fullName: ‘Extroversion’, name: ‘Extro’, value: 62, color: ‘#00BFFF’ }, { fullName: ‘Social Intelligence’, name: ‘SocIQ’, value: 73, color: ‘#1E90FF’ }, { fullName: ‘Achievement’, name: ‘Ach’, value: 66, color: ‘#FF4500’ }, { fullName: ‘Locus of Control’, name: ‘LOC’, value: 77, color: ‘#FFD700’ }, { fullName: ‘Sales Interest’, name: ‘SI’, value: 82, color: ‘#2F4F4F’ }, { fullName: ‘Sales Belief’, name: ‘SB’, value: 58, color: ‘#A9A9A9’ }, { fullName: ‘Perseverance’, name: ‘Per’, value: 72, color: ‘#FF0000’ }, { fullName: ‘Competitive’, name: ‘Comp’, value: 80, color: ‘#008080’ }, { fullName: ‘Empathy’, name: ‘Empy’, value: 55, color: ‘#20B2AA’ }, { fullName: ‘Purposefulness’, name: ‘Purp’, value: 62, color: ‘#FF8C00’ }, { fullName: ‘Optimism’, name: ‘Opt’, value: 65, color: ‘#00BFFF’ }, { fullName: ‘Influence’, name: ‘In’, value: 68, color: ‘#1E90FF’ }, { fullName: ‘Curiosity’, name: ‘Cur’, value: 78, color: ‘#FF4500’ }, { fullName: ‘Rejection Stamina’, name: ‘RS’, value: 79, color: ‘#FFD700’ }, { fullName: ‘Assertiveness’, name: ‘Ast’, value: 69, color: ‘#2F4F4F’ } ]; var chart = anychart.polar(); // setup chart appearance settings chart .background(‘#FEFEFE’) .sortPointsByX(true) .xScale(‘ordinal’) .yAxis(false); // setup chart scales settings chart.xScale().names(‘name’); // set chart x-axis settings chart.xAxis().fill(‘#EDECEF’).stroke(‘none’).overlapMode(‘auto-width’); // set chart x-axis ticks settings chart.xAxis().ticks().length(‘100%’).stroke(‘#FEFEFE’); // set chart x-axis labels settings chart.xAxis().labels().padding(0).fontSize(12).hAlign(‘center’).fontColor(‘black’); // create range column series var series = chart.column(data); series.stroke(‘none’); series.fill(function() { return {color: this.iterator.get(‘color’), opacity: 0.7 }; }); series.tooltip().titleFormat(‘{%fullName}’); series.tooltip().format(“{%value}”); // set chart container id chart.container(‘container’).draw();});[/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-linear-gauge.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js”][/tcb-script]html, body, #lineargauge { width: 100%; height: 250px; margin: 0; padding: 0;}[tcb-script](function(){function ac_add_to_head(el){var head = document.getElementsByTagName(‘head’)[0];head.insertBefore(el,head.firstChild);}function ac_add_link(url){var el = document.createElement(‘link’);el.rel=’stylesheet’;el.type=’text/css’;el.media=’all’;el.href=url;ac_add_to_head(el);}function ac_add_style(css){var ac_style = document.createElement(‘style’);if (ac_style.styleSheet) ac_style.styleSheet.cssText = css;else ac_style.appendChild(document.createTextNode(css));ac_add_to_head(ac_style);}ac_add_link(‘https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css’);ac_add_style(document.getElementById(“ac_style_wpPZNRfK”).innerHTML);ac_add_style(“.anychart-embed-wpPZNRfK{width:600px;height:450px;}”);})();[/tcb-script] [tcb-script]anychart.onDocumentReady(function () { // set the chart value var data = anychart.data.set([ [‘AQI’ , 75.5],]); // set the gauge type var gauge = anychart.gauges.linear(); // set the data for the gauge gauge.data(data); // set the layout gauge.layout(‘horizontal’); // set labels gauge.label(0) .position(‘left-center’) .anchor(‘left-center’) .offsetY(‘-50px’) .offsetX(’20px’) .fontFamily(‘helvetica neue, helvetica, arial, sans-serif’) .fontColor(‘#555’) .fontSize(24) .fontWeight(400) .text(‘Assertiveness: 75’); gauge.label(1) .position(‘left-center’) .anchor(‘left-center’) .offsetY(’30px’) .offsetX(’50px’) .fontColor(‘#777777’) .fontColor(‘#777777’) .fontSize(12) .fontFamily(‘helvetica neue, helvetica, arial, sans-serif’) .text(”); gauge.label(2) .position(‘right-center’) .anchor(‘right-center’) .offsetY(’30px’) .offsetX(’50px’) .fontColor(‘#777777’) .fontSize(12) .fontFamily(‘helvetica neue, helvetica, arial, sans-serif’) .text(”); // create a color scale var scaleBarColorScale = anychart.scales.ordinalColor().ranges( [ { from: 0, to: 100, color: [‘#00BFFF’,’#00BFFF’,’#0000FF’] } ] ); // create a Scale Bar var scaleBar = gauge.scaleBar(0); // set the width of the Scale Bar scaleBar.width(‘4.5%’); // use the color scale (defined earlier) as the color scale of the Scale Bar scaleBar.colorScale(scaleBarColorScale); // add a marker pointer var marker = gauge.marker(0); // set the marker type and color marker.type(‘triangle-down’); marker.color(‘black’); marker.width(‘2.5%’) // set the zIndex of the marker marker.zIndex(10); marker.offset(‘-0.5%’); // configure the scale var scale = gauge.scale(); scale.minimum(0); scale.maximum(100); scale.ticks().interval(10); // configure the axis var axis = gauge.axis(); axis.minorTicks(false) axis.width(‘1%’); axis.offset(‘4.8%’); axis.orientation(‘bottom’); axis.labels(‘bottom’); // set paddings gauge.padding([0, 18]); // set the container id gauge.container(‘container’); // initiate drawing the gauge gauge.draw();});[/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js”][/tcb-script][tcb-script src=”https://cdn.anychart.com/releases/8.2.1/js/anychart-circular-gauge.min.js”][/tcb-script]html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0;}[tcb-script](function(){function ac_add_to_head(el){var head = document.getElementsByTagName(‘head’)[0];head.insertBefore(el,head.firstChild);}function ac_add_link(url){var el = document.createElement(‘link’);el.rel=’stylesheet’;el.type=’text/css’;el.media=’all’;el.href=url;ac_add_to_head(el);}function ac_add_style(css){var ac_style = document.createElement(‘style’);if (ac_style.styleSheet) ac_style.styleSheet.cssText = css;else ac_style.appendChild(document.createTextNode(css));ac_add_to_head(ac_style);}ac_add_link(‘https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css’);ac_add_link(‘https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css’);ac_add_style(document.getElementById(“ac_style_mZsEI68c”).innerHTML);ac_add_style(“.anychart-embed-mZsEI68c{width:600px;height:450px;}”);})();[/tcb-script][tcb-script]var names = [‘Total’, ‘Warrior’, ‘Closer’, ‘Empath’, ‘Detailed’];var data = [23, 72, 66, 82, 61, 100];var dataSet = anychart.data.set(data);var palette = anychart.palettes.distinctColors().items([‘#64b5f6’, ‘#1976d2’, ‘#ef6c00’, ‘#ffd54f’, ‘#008080’, ‘#008080’, ‘#dd2c00’, ‘#00838f’, ‘#00bfa5’, ‘#ffa000’]);var makeBarWithBar = function (gauge, radius, i, width, without_stroke) { var stroke = ‘1 #e5e4e4’; if (without_stroke) { stroke = null; gauge.label(i) .text(names[i] + ‘ <span style=””>’ + ‘</span>’)// color: #7c868e .useHtml(true); gauge.label(i) .hAlign(‘center’) .vAlign(‘middle’) .anchor(‘right-center’) .padding(0, 10) .height(width / 2 + ‘%’) .offsetY(radius + ‘%’) .offsetX(0); } gauge.bar(i).dataIndex(i) .radius(radius) .width(width) .fill(palette.itemAt(i)) .stroke(null) .zIndex(5); gauge.bar(i + 100).dataIndex(5) .radius(radius) .width(width) .fill(‘#F5F4F4’) .stroke(stroke) .zIndex(4); return gauge.bar(i)};anychart.onDocumentReady(function () { var gauge = anychart.gauges.circular(); gauge.data(dataSet); gauge.fill(‘#fff’) .stroke(null) .padding(0) .margin(100) .startAngle(0) .sweepAngle(270); var axis = gauge.axis().radius(100).width(1).fill(null); axis.scale() .minimum(0) .maximum(100) .ticks({interval: 1}) .minorTicks({interval: 1}); axis.labels().enabled(false); axis.ticks().enabled(false); axis.minorTicks().enabled(false); makeBarWithBar(gauge, 80, 1, 17, true); makeBarWithBar(gauge, 60, 2, 17, true); makeBarWithBar(gauge, 40, 3, 17, true); makeBarWithBar(gauge, 20, 4, 17, true); gauge.margin(50); gauge.container(‘container’); gauge.draw();});[/tcb-script]