We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
A linear gauge chart making use of LED and bar pointers to visualize the progress of the COVID-19 vaccination campaign around the world as of October 2021. Features custom colors, labels, tooltip, and legend.
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-linear-gauge.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){// Create and return simple linear gaugefunctiondrawGauge(value, settings){// Create gauge with settingsvar gauge = anychart.gauges.linear();
gauge.data([value, settings.value]);
gauge.layout('horizontal');// Set scale for gaugevar scale = anychart.scales.linear();
scale.minimum(0).maximum(settings.maximum).ticks({ interval:2});// Set axis for gaugevar axis = gauge.axis(0);
axis.width('1%').offset('43%').scale(scale).orientation('bottom');// Set the axis label format
axis.labels().format('{%Value}%').fontSize('10px');// Create and set bar pointvar barSeries = gauge.bar(0);
barSeries
.scale(scale).width('4%').fill('#296953').stroke('#296953');// Create and set LED pointvar ledPointer = gauge.led(1);
ledPointer
.offset('10%').width('30%').count(settings.maximum).scale(scale).gap(0.55).dimmer(function(){return'#eee';});
ledPointer.colorScale().colors(['#63b39b','#63b39b']);// Create and set label with actual datavar labelBar = barSeries.labels();
labelBar
.enabled(true).offsetY('-15px').fontColor('#455a64').fontSize('12px').fontWeight(600).format('{%Value} %');// Set gauge tooltip
gauge
.tooltip().useHtml(true).titleFormat('{%Value} %').format('Maximum on scale: '+
settings.maximum +' %');return gauge;}// Create gaugesvar world =drawGauge(13.68,{ maximum:50, value:27.13});var europe =drawGauge(36.98,{ maximum:50, value:47.28});var nAmerica =drawGauge(36.77,{ maximum:50, value:46.53});var sAmerica =drawGauge(22.8,{ maximum:50, value:40.54});var asia =drawGauge(10.14,{ maximum:50, value:27.16});var oceania =drawGauge(9.75,{ maximum:50, value:22.12});var africa =drawGauge(1.56,{ maximum:50, value:3.04});
world.a11y(true);
europe.a11y(true);
nAmerica.a11y(true);// Create standalone legendvar legend = anychart.standalones.legend();
legend
.position('center')//.fontSize(14).items([{ text:'Fully vaccinated', iconFill:'#296953'},{ text:'Partially vaccinated', iconFill:'#63b39b'},{ text:'Not vaccinated', iconFill:'#eee'}]);// Create table to place gaugesvar layoutTable = anychart.standalones.table();
layoutTable
.hAlign('right').vAlign('middle').fontSize(14).cellBorder(null);// Put gauges into the layout table
layoutTable.contents([[null,'COVID19 Vaccination - How far are we from the halfway mark?'],[null,'% of population partially and fully vaccinated'],[null, legend],['World', world],['Europe', europe],['North America', nAmerica],['South America', sAmerica],['Asia', asia],['Oceania', oceania],['Africa', africa]]);// Set height for first row in layout table
layoutTable
.getRow(0).height(30).fontSize(20).hAlign('center');
layoutTable
.getRow(1).height(40).fontSize(16).hAlign('center');
layoutTable.getRow(2).height(40).fontSize(12);
layoutTable.getCol(0).width(100);// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();});</script></body></html>
This is an interactive JS linear gauge chart making use of LED and bar pointers to visualize the progress of the COVID-19 vaccination campaign around the world as of October 2021. Features custom colors, labels, tooltip, and legend.