| Server IP : 182.53.201.61 / Your IP : 216.73.217.175 Web Server : Apache/2.2.15 (Fedora) System : Linux km10.dyndns.org 2.6.31.5-127.fc12.i686.PAE #1 SMP Sat Nov 7 21:25:57 EST 2009 i686 User : apache ( 48) PHP Version : 5.3.3 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/temp/examples/bullet-graph/ |
Upload File : |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}
#container2, #container3 {
max-width: 800px;
height: 85px;
margin: 1em auto;
}
.hc-cat-title {
font-size: 13px;
font-weight: bold;
}
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/bullet.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<script type="text/javascript">
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
title: {
text: '2017 YTD'
},
xAxis: {
categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
},
yAxis: {
plotBands: [{
from: 0,
to: 150,
color: '#666'
}, {
from: 150,
to: 225,
color: '#999'
}, {
from: 225,
to: 9e9,
color: '#bbb'
}],
title: null
},
series: [{
data: [{
y: 275,
target: 250
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
Highcharts.chart('container2', {
xAxis: {
categories: ['<span class="hc-cat-title">Profit</span><br/>%']
},
yAxis: {
plotBands: [{
from: 0,
to: 20,
color: '#666'
}, {
from: 20,
to: 25,
color: '#999'
}, {
from: 25,
to: 100,
color: '#bbb'
}],
labels: {
format: '{value}%'
},
title: null
},
series: [{
data: [{
y: 22,
target: 27
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
Highcharts.chart('container3', {
xAxis: {
categories: ['<span class="hc-cat-title">New Customers</span><br/>Count']
},
yAxis: {
plotBands: [{
from: 0,
to: 1400,
color: '#666'
}, {
from: 1400,
to: 2000,
color: '#999'
}, {
from: 2000,
to: 9e9,
color: '#bbb'
}],
labels: {
format: '{value}'
},
title: null
},
series: [{
data: [{
y: 1650,
target: 2100
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
},
credits: {
enabled: true
}
});
</script>
</body>
</html>