<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
// Create stage for all charts
stage = anychart.graphics.create('container');
// Create bullet chart
var chart_1 = anychart.bullet([{value: 5}]);
// Set chart to render on stage
chart_1.container(stage);
// Set chart size and position settings
chart_1.bounds(0, 0, '100%', '20%');
// Set chart layout
chart_1.layout('horizontal');
// Create chart ranges
chart_1.range().from(0).to(5);
chart_1.range(1).from(5).to(10);
chart_1.range(2).from(10).to(15);
// Set chart title
chart_1.title().text('Central').width('10%');
// Initiate chart drawing
chart_1.draw();
// Create second bullet chart
var chart_2 = anychart.bullet([{value: 11}]);
// Set chart to render on stage
chart_2.container(stage);
// Set chart size and position settings
chart_2.bounds(0, '20%', '100%', '20%');
// Set chart layout
chart_2.layout('horizontal');
// Create chart ranges
chart_2.range().from(0).to(5);
chart_2.range(1).from(5).to(10);
chart_2.range(2).from(10).to(15);
// Set chart title
chart_2.title().text('North').width('10%').align('right');
// Initiate chart drawing
chart_2.draw();
// Create bullet chart
var chart_3 = anychart.bullet([{value: 7}]);
// Set chart to render on stage
chart_3.container(stage);
// Set chart size and position settings
chart_3.bounds(0, '40%', '100%', '20%');
// Set chart layout
chart_3.layout('horizontal');
// Create chart ranges
chart_3.range().from(0).to(5);
chart_3.range(1).from(5).to(10);
chart_3.range(2).from(10).to(15);
// Set chart title
chart_3.title().text('East').width('10%');
// Initiate chart drawing
chart_3.draw();
// Create bullet chart
var chart_4 = anychart.bullet([{value: 9}]);
// Set chart to render on stage
chart_4.container(stage);
// Set chart size and position settings
chart_4.bounds(0,'60%','100%','20%');
// Set chart layout
chart_4.layout('horizontal');
// Create chart ranges
chart_4.range().from(0).to(5);
chart_4.range(1).from(5).to(10);
chart_4.range(2).from(10).to(15);
// Set chart title
chart_4.title().text('South').width('10%');
// Initiate chart drawing
chart_4.draw();
// Create bullet chart
var chart_5 = anychart.bullet([{value: 13}]);
// Set chart to render on stage
chart_5.container(stage);
// Set chart size and position settings
chart_5.bounds(0,'80%', '100%', '20%');
// Set chart layout
chart_5.layout('horizontal');
// Create chart ranges
chart_5.range().from(0).to(5);
chart_5.range(1).from(5).to(10);
chart_5.range(2).from(10).to(15);
// Set chart title
chart_5.title().text('West').width('10%');
// Initiate chart drawing
chart_5.draw();
});
</script>
</body>
</html>